Merge branch 'new_web' of http://39.108.172.131:3000/Shannon_mu/SmartCommunity into new_web

operationSupport/src/utils/AmapSearch.js

@@ -3,7 +3,17 @@ var jsapi = document.createElement('script');
 jsapi.charset = 'utf-8';
 jsapi.src = url;
 document.head.appendChild(jsapi);
-window.onLoad  = function(){
+let times = setInterval(() => {
+	if (!!AMap) {
+		const s = document.createElement('script');
+		s.charset = 'utf-8';
+		s.src = 'https://webapi.amap.com/ui/1.1/main.js';
+		document.head.appendChild(s);
+		clearInterval(times)
+	}
+}, 1000)
+
+window.onLoad = function () {
 	// var map = new AMap.Map('container');
 }
 
@@ -89,7 +99,7 @@ function RoadInfoSearch() {
 	})
 }
 
-  //经度转墨卡托
+//经度转墨卡托
 function handle_x(x) {
 	return (x / 180.0) * 20037508.34;
 }
@@ -114,8 +124,8 @@ function handle_y(y) {
  * @param {String} val 行政区域名
  * @param {Function} cb 回调函数
  */
-function getExtent(val,cb) {
-	if(!val)return;
+function getExtent(val, cb) {
+	if (!val) return;
 	var AmapCityBoundaries = {};
 	AMap.plugin('AMap.DistrictSearch', function () {
 		var districtSearch = new AMap.DistrictSearch({
@@ -125,25 +135,25 @@ function getExtent(val,cb) {
 			subdistrict: 1,
 			extensions: "all"
 		})
-		
+
 		// 搜索所有省/直辖市信息
 		districtSearch.search(val, function (status, result) {
 			let initWkid = 2360; // 默认xian80坐标系
-            //巴里坤的lessid 巴里坤的层级和坐标系
-            let blklessid = "912588c2a65543dca846";
-            let getblklessid = JSON.parse(sessionStorage.getItem("account")).lesseeId;
-            if (blklessid === getblklessid) {
-                initWkid = 102100;
-            }
+			//巴里坤的lessid 巴里坤的层级和坐标系
+			let blklessid = "912588c2a65543dca846";
+			let getblklessid = JSON.parse(sessionStorage.getItem("account")).lesseeId;
+			if (blklessid === getblklessid) {
+				initWkid = 102100;
+			}
 			// 查询成功时，result即为对应的行政区信息
 			if (status == "complete") {
 				let cruExtent = result.districtList[0].center;
 				AmapCityBoundaries.type = "point";
 				AmapCityBoundaries.x = handle_x(cruExtent.lng);
 				AmapCityBoundaries.y = handle_y(cruExtent.lat);
-				AmapCityBoundaries.spatialReference = {"wkid":initWkid};
+				AmapCityBoundaries.spatialReference = { "wkid": initWkid };
 				cb(AmapCityBoundaries);
-			}else{
+			} else {
 
 			}
 		})
@@ -153,7 +163,7 @@ function getExtent(val,cb) {
 
 
 // 高德测量面积接口
-function AmapGetArea(paths,callback){
-	var area =AMap.GeometryUtil.ringArea(paths);
+function AmapGetArea(paths, callback) {
+	var area = AMap.GeometryUtil.ringArea(paths);
 	callback(area);
 }

operationSupport/src/views/facilityInspections/popups/add.vue

@@ -37,8 +37,7 @@
                     :titles="['待选列表', '已选列表']"
                     @change="handleChange"
                     :data="devicesArr"
-                >
-                </el-transfer>
+                ></el-transfer>
             </div>
         </template>
 
@@ -176,17 +175,20 @@ export default {
 
     methods: {
         submit() {
-            new Promise((resolve) => {
+            new Promise(resolve => {
                 this.$refs.form.validate(resolve);
             }).then(() => {
                 var loading = this.$loading();
                 let url = '/sc-community/inspection/add';
-
+                let initData = JSON.parse(JSON.stringify(this.formData));
                 if (this.params.todo === 'edit') {
                     url = '/sc-community/inspection/update';
+                    // } else {
+                    //     initData.startDate = this.formData.startDate + '00:00:00';
+                    // initData.endDate = this.formData.endDate + '23:59:59';
                 }
                 this.$http
-                    .post(url, this.formData)
+                    .post(url, initData)
                     .then(({ status, msg }) => {
                         if (status == 0) {
                             this.$message.success(msg);
@@ -225,8 +227,8 @@ export default {
             if (!arr) {
                 arr = ['', ''];
             }
-            this.formData.startDate = arr[0];
-            this.formData.endDate = arr[1];
+            this.formData.startDate = arr[0] + '00:00:00';
+            this.formData.endDate = arr[1] + '23:59:59';
         },
         getDetails(id, resolve) {
             this.$http.get('/sc-community/inspection/find/' + id).then(({ data, msg }) => {
@@ -265,7 +267,7 @@ export default {
             this.$http.get('/sc-community/inspection/getInspectionDevices?id=' + id).then(({ data, msg }) => {
                 if (!!data && data.length > 0) {
                     let deviceIds = [];
-                    data.map((item) => {
+                    data.map(item => {
                         deviceIds.push(item.deviceId);
                     });
                     this.formData.deviceIds = deviceIds;
@@ -277,9 +279,9 @@ export default {
         this.deviceArr = this.params.deviceArr;
         this.findUser = this.params.arrData;
         if (!!this.params.data && !!this.params.data.id) {
-            new Promise((resolve) => {
+            new Promise(resolve => {
                 this.getDetails(this.params.data.id, resolve);
-            }).then((_) => {
+            }).then(_ => {
                 this.getTypes();
                 this.getSelectDevice(this.params.data.id);
             });

operationSupport/src/views/facilityInspections/popups/details.vue

@@ -65,7 +65,7 @@ export default {
                 },
                 {
                     label: '任务名称:',
-                    prop: 'currentTaskName'
+                    prop: 'inspectionName'
                 },
                 {
                     label: '设备/设施类型:',
@@ -73,7 +73,7 @@ export default {
                 },
                 {
                     label: '巡检人员:',
-                    prop: 'currentUsers'
+                    prop: 'peopleName'
                 },
                 {
                     label: '计划开始时间:',
@@ -100,15 +100,15 @@ export default {
             cols: [
                 {
                     label: '设备编号',
-                    prop: 'deviceId'
+                    prop: 'no'
                 },
                 {
                     label: '设备名称',
-                    prop: 'typeValue'
+                    prop: 'name'
                 },
                 {
                     label: '地址',
-                    prop: 'peopleName'
+                    prop: 'address'
                 },
                 {
                     label: '巡检时间',

operationSupport/src/views/patrolManagement/popups/mapValue.vue

@@ -1,41 +1,53 @@
 <template>
     <div>
-        <div id="mapValue" ></div>
+        <div id="mapValue" :style="`height:${height||300}px`"></div>
         <!--控制条-->
-        <div class="map-control" v-if="isStart">
-            <div class="clickIco" @click="startAnimation()">
-                <i class="zoniot_font" :class="isSta?'zoniot-icon-kaishi':'zoniot-icon-tingzhi'"></i>
+        <div class="map-control" v-if="isStart && !!point.length">
+            <div class="clickIco">
+                <i
+                    class="zoniot_font zoniot-icon-kaishi"
+                    v-if="palyStayus==0"
+                    @click="navgControl('start')"
+                ></i>
+                <i
+                    class="zoniot_font zoniot-icon-tingzhi"
+                    v-else-if="palyStayus==2"
+                    @click="navgControl('pause')"
+                ></i>
+                <i
+                    class="zoniot_font zoniot-icon-kaishi"
+                    v-else-if="palyStayus==1"
+                    @click="navgControl('resume')"
+                ></i>
             </div>
             <el-slider
                 class="slider"
                 v-model="sliderVal"
+                :show-tooltip="false"
                 :format-tooltip="hideFormat"
                 :step="0.0001"
+                :disabled="beforeInit"
+                @change="carReLocate"
             ></el-slider>
-            <el-select v-model="speed">
-                <el-option :value="1000" label="1倍速"></el-option>
-                <el-option :value="1500" label="1.5倍速"></el-option>
-                <el-option :value="2000" label="2倍速"></el-option>
-                <el-option :value="3000" label="3倍速"></el-option>
+            <el-select v-model="times">
+                <el-option :value="1" label="1倍速"></el-option>
+                <el-option :value="2" label="2倍速"></el-option>
+                <el-option :value="3" label="3倍速"></el-option>
+                <el-option :value="4" label="4倍速"></el-option>
             </el-select>
         </div>
     </div>
 </template>
 
 <script>
+import functionJs from './pathSimplifierIns';
 export default {
-    props: ['point','isStart'],
+    props: ['point', 'isStart', 'height'],
+    mixins: [functionJs],
     data() {
         return {
-            map: '',
             marker: '',
-            icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
-            markerArr: [],
-            lineArr: [],
-            marker2: '',
-            speed: 1000,
-            sliderVal: 0,
-            isSta: true
+            markerArr: []
         };
     },
     watch: {
@@ -49,9 +61,6 @@ export default {
                     this.addIcon(item, tag);
                 }
             });
-        },
-        speed(e) {
-            this.startAnimation(e);
         }
     },
     methods: {
@@ -68,62 +77,19 @@ export default {
                 icon: this.icon,
                 position: lineArr
             });
-            this.map.add(this.marker);
             this.markerArr.push(this.marker);
             this.lineArr.push(lineArr);
-            this.map.setFitView();
             if (is) {
-                this.initLineArr();
+                this.map.add(this.markerArr);
+                this.map.setFitView();
+                if (this.isStart) {
+                    this.$nextTick(() => {
+                        this.initPlayBox();
+                        this.beforeInit = true;
+                        this.initLineArr();
+                    });
+                }
             }
-        },
-        initLineArr() {
-            let _this = this;
-            this.marker2 = new AMap.Marker({
-                map: _this.map,
-                position: _this.lineArr[0],
-                icon: 'https://webapi.amap.com/images/car.png',
-                offset: new AMap.Pixel(-26, -13),
-                autoRotation: true,
-                angle: -90
-            });
-            // 绘制轨迹
-            let polyline = new AMap.Polyline({
-                map: this.map,
-                path: _this.lineArr,
-                showDir: true,
-                strokeColor: '#28F', //线颜色
-                // strokeOpacity: 1,     //线透明度
-                strokeWeight: 6 //线宽
-                // strokeStyle: "solid"  //线样式
-            });
-            let passedPolyline = new AMap.Polyline({
-                map: _this.map,
-                // path: lineArr,
-                strokeColor: '#AF5', //线颜色
-                // strokeOpacity: 1,     //线透明度
-                strokeWeight: 6 //线宽
-                // strokeStyle: "solid"  //线样式
-            });
-            this.marker2.on('moving', e => {
-                passedPolyline.setPath(e.passedPath);
-            });
-            this.marker2.on('moveend', e => {
-                this.isSta = true;
-            });
-        },
-        startAnimation(time) {
-            let _this = this;
-            this.isSta = false;
-            this.marker2.moveAlong(
-                this.lineArr,
-                time | 1000,
-                e => {
-                    this.sliderVal = e * 100;
-                    return e;
-                },
-
-                false
-            );
         }
     },
     created() {
@@ -138,7 +104,7 @@ export default {
 #mapValue {
     // margin-top: 20px;
     width: 100%;
-    height: 300px;
+    // height: 300px;
 }
 .my-autocomplete {
     li {

operationSupport/src/views/patrolManagement/popups/pathSimplifierIns.js

@@ -0,0 +1,237 @@
+export default {
+    data() {
+        return {
+            lineArr: [],
+            // 巡航轨迹
+            AMap: null,
+            map: null,
+            PathSimplifier: null,
+            beforeInit: true,
+            isPlay: true,
+            sliderVal: 0, // 进度条
+            times: 1, // 倍速
+            maxSpeed: 40, // 最高倍速
+            navgtrSpeed: 1000, // 速度
+            isMinSpeed: true,
+            isMaxSpeed: false,
+            navgtr: null,
+            pathSimplifierIns: null,
+            actualList: [],
+            defaultRenderOptions: {
+                renderAllPointsIfNumberBelow: -1, // 描绘路径点，如不需要设为-1
+                pathTolerance: 2,
+                keyPointTolerance: 0,
+                pathLineStyle: {
+                    lineWidth: 6,
+                    strokeStyle: '#409eff',
+                    borderWidth: 1,
+                    borderStyle: '#eeeeee',
+                    dirArrowStyle: false
+                },
+                pathLineHoverStyle: {
+                    lineWidth: 6,
+                    strokeStyle: '#ff0000',
+                    borderWidth: 1,
+                    borderStyle: '#cccccc',
+                    dirArrowStyle: false
+                },
+                dirArrowStyle: {
+                    stepSpace: 30,
+                    strokeStyle: '#ffffff',
+                    lineWidth: 2
+                },
+                pathLineSelectedStyle: {
+                    lineWidth: 6,
+                    strokeStyle: '#409eff',
+                    borderWidth: 1,
+                    borderStyle: '#cccccc',
+                    dirArrowStyle: true
+                },
+                keyPointStyle: {
+                    radius: 0,
+                    fillStyle: 'rgba(8, 126, 196, 1)',
+                    lineWidth: 1,
+                    strokeStyle: '#eeeeee'
+                },
+                keyPointHoverStyle: {
+                    radius: 0,
+                    fillStyle: 'rgba(0, 0, 0, 0)',
+                    lineWidth: 2,
+                    strokeStyle: '#ffa500'
+                },
+                keyPointOnSelectedPathLineStyle: {
+                    radius: 0,
+                    fillStyle: 'rgba(8, 126, 196, 1)',
+                    lineWidth: 2,
+                    strokeStyle: '#eeeeee'
+                }
+            },
+            isCursorAtPathEnd: false,
+            palyStayus: 0, //0->未开始  1->行驶中  2->暂停
+            value: 0, // 进度条初始化
+
+            // signMarker: null,
+            currentPoint: null,
+
+            timeValue: '',
+            trackData: []
+        };
+    },
+    methods: {
+        initLineArr() {
+            let _this = this;
+            let that = this;
+
+            AMapUI.load(['ui/misc/PathSimplifier'], PathSimplifier => {
+                if (!PathSimplifier.supportCanvas) {
+                    alert('当前环境不支持 Canvas！');
+                    return;
+                }
+
+                // 如果已存在巡航轨迹，则删除
+                if (window.pathSimplifierIns && that.pathSimplifierIns) {
+                    //通过该方法清空上次传入的轨迹
+                    that.pathSimplifierIns.setData([]);
+                }
+
+                // 初始化坐标点
+                if (_this.lineArr.length > 0) {
+                    that.actualList = _this.lineArr;
+
+                    //创建一个巡航轨迹路线
+                    that.pathSimplifierIns = new PathSimplifier({
+                        zIndex: 100, //地图层级，
+                        map: this.map, //所属的地图实例
+                        //巡航路线轨迹列表
+                        getPath: (pathData, pathIndex) => {
+                            return pathData.path;
+                        },
+                        //hover每一个轨迹点，展示内容
+                        getHoverTitle: function (pathData, pathIndex, pointIndex) {
+                            return '';
+                        },
+                        //自定义样式，可设置巡航器样式，巡航轨迹样式，巡航轨迹点击、hover等不同状态下的样式，不设置则用默认样式，详情请参考api文档 renderOptions:{}
+                        //绘制路线节点
+                        renderOptions: that.defaultRenderOptions
+                    });
+                    window.pathSimplifierIns = that.pathSimplifierIns;
+                    //设置数据
+                    that.pathSimplifierIns.setData([
+                        {
+                            name: '轨迹路线',
+                            path: that.actualList
+                        }
+                    ]);
+                    that.pathSimplifierIns.setSelectedPathIndex(0);
+
+                    function onload() {
+                        that.pathSimplifierIns.renderLater();
+                    }
+
+                    function onerror(e) {
+                        console.log('图片加载失败！');
+                    }
+
+                    //对第一条线路（即索引 0）创建一个巡航器
+                    let image = PathSimplifier.Render.Canvas.getImageContent('https://webapi.amap.com/images/car.png', onload, onerror);
+                    that.navgtr = that.pathSimplifierIns.createPathNavigator(0, {
+                        loop: false, //循环播放
+                        speed: that.navgtrSpeed, //巡航速度，单位千米/小时
+                        pathNavigatorStyle: {
+                            width: 20,
+                            height: 30,
+                            //使用图片
+                            content: image, // 自定义巡航样式
+                            strokeStyle: null,
+                            fillStyle: null,
+                            //经过路径的样式
+                            pathLinePassedStyle: {
+                                lineWidth: 6,
+                                strokeStyle: '#69f81e',
+                                dirArrowStyle: {
+                                    stepSpace: 15,
+                                    strokeStyle: '#FFF'
+                                }
+                            }
+                        }
+                    });
+
+                    that.navgtr.on('start resume', function () {
+                        that.navgtr._startTime = Date.now();
+                        that.navgtr._startDist = this.getMovedDistance();
+                    });
+                    that.navgtr.on('stop pause', function () {
+                        that.navgtr._movedTime = Date.now() - that.navgtr._startTime;
+                        that.navgtr._movedDist = this.getMovedDistance() - that.navgtr._startDist;
+                    });
+                    that.navgtr.on('move', function (data, position) {
+                        that.isCursorAtPathEnd = false;
+                        let idx = position.dataItem.pointIndex; //走到了第几个点
+                        let tail = position.tail; //至下一个节点的比例位置
+                        let totalIdx = idx + tail;
+                        let len = position.dataItem.pathData.path.length - 1;
+                        // 设置当前点位
+                        that.currentPoint = that.actualList[idx];
+                        if (idx < len - 1) {
+                            that.navgtr.setSpeed(that.navgtrSpeed * that.times);
+                        }
+                        // 进度条实时展示tail
+                        !that.isOnSlider && (that.sliderVal = (totalIdx / len) * 100);
+
+                        // 如果到头了，回到初始状态
+                        if (that.navgtr.isCursorAtPathEnd()) {
+                            that.isCursorAtPathEnd = true;
+                            that.initPlayBox();
+                        }
+                    });
+
+                    // 加载完成
+                    that.beforeInit = false;
+                }
+            });
+        },
+        initPlayBox() {
+            // 暂停
+            this.navgControl('pause');
+            this.playIcon = 'start';
+            this.isPlay = true; // 播放图标
+            this.palyStayus = 0; // 继续状态
+        },
+        // 控制播放按钮
+        navgControl(type) {
+            if (!this.navgtr || !type) {
+                return;
+            }
+            if (type === 'start' || type === 'resume') {
+                this.isPlay = false;
+                this.palyStayus = 2;
+                // 如果已经到了终点，重新定位坐标
+                if (this.isCursorAtPathEnd && this.actualList.length > 0) {
+                    this.map.setCenter(this.actualList[0]);
+
+                }
+            } else if (type === 'pause') {
+                this.isPlay = true;
+                this.palyStayus = 1;
+            }
+            this.navgtr[type]();
+            this.map.setFitView();
+        },
+        // carReLocate() {
+        //     // 鼠标从滑动条抬起时，重新定位
+        //     if (this.currentPoint) {
+        //         let timeout = setTimeout(() => {
+        //             clearTimeout(timeout)
+        //             this.map.setCenter(this.currentPoint)
+        //         }, 0)
+        //     }
+        // },
+    },
+    created() {
+        // const s = document.createElement('script');
+        // s.style = 'text/javascript';
+        // s.src = 'https://webapi.amap.com/ui/1.1/main.js';
+        // document.body.appendChild(s);
+
+    }
+};

operationSupport/src/views/patrolManagement/popups/patrolDetails.vue

@@ -10,7 +10,7 @@
         </div>
         <div class="contentText">
             <div class="leftMap">
-                <map-value :point="targetData" ref="mapVal" :isStart='true'></map-value>
+                <map-value :point="targetData" ref="mapVal" :isStart="true" :height="400"></map-value>
                 <div class="formLabel">
                     <div class="formLabelList">
                         <div class="label">所属社区</div>
@@ -35,25 +35,33 @@
                 </div>
             </div>
             <div class="rightList">
-                <el-steps direction="vertical" :active="thisActive">
-                    <el-step
-                        :title="item.createDate"
-                        icon="el-icon-full-screen"
-                        v-for="(item,index) in thisItem"
-                        :key="item.id"
-                    >
-                        <div slot="description">
-                            <div>
-                                <div class v-if="index===0">开始任务</div>
-                                <div class="flex" v-else>
-                                    <span>巡更点{{index}}</span>
-                                    <span>{{item.pointStatus | statusType}}</span>
-                                </div>
-                                <div>{{item.checkTime}}</div>
+                <template v-for="(item,index) in thisItem">
+                    <div class="steps" :key="index">
+                        <div class="steps-left">
+                            <img src="@assets/img/point_yiwancheng@2x.png" alt />
+                            <div class="steps-left-line" v-if="index !== thisItem.length-1"></div>
+                        </div>
+                        <div class="steps-right">
+                            <div class="steps-right-title">
+                                <span v-if="index===0">{{item.pointStatus==1?'待执行':'开始任务'}}</span>
+                                <span v-else>巡更点{{index}}</span>
+                                <span
+                                    class="status"
+                                    v-if="index!==0"
+                                >{{item.pointStatus==1?'未完成 ':'已完成'}}</span>
+                            </div>
+                            <div class="steps-right-content">{{item.checkTime}}</div>
+                            <div class="steps-right-content">
+                                <span>巡更结果:</span>
+                                <span>{{item.result||'-'}}</span>
+                            </div>
+                            <div class="steps-right-content">
+                                <span>图片/视频:</span>
+                                <span>{{item.picturePath||'-'}}</span>
                             </div>
                         </div>
-                    </el-step>
-                </el-steps>
+                    </div>
+                </template>
             </div>
         </div>
     </div>
@@ -65,8 +73,7 @@ export default {
     components: { mapValue },
     data() {
         return {
-            thisItem: {},
-            thisActive: 0,
+            thisItem: [],
             targetData: []
         };
     },
@@ -104,14 +111,11 @@ export default {
         },
         getTrack(id) {
             this.$http.get('/sc-community/patrolRecord/getUserPatrolTrack', { recordId: id }).then(({ data, status, msg }) => {
-                this.thisItem = data;
-                this.targetData = [
-                    { longitude: '114.073587', latitude: '22.59709' },
-                    { longitude: '114.086634', latitude: '22.57763' }
-                ];
-                console.log(data);
+                if (!!data) {
+                    this.targetData = data;
+                }
             });
-        },
+        }
     },
     created() {
         this.getDetail(this.thisObj.id);
@@ -162,9 +166,43 @@ export default {
             width: 400px;
             background: white;
             @extend .border20;
-            .flex {
+            .steps {
                 display: flex;
-                justify-content: space-between;
+                img {
+                    width: 20px;
+                    vertical-align: -webkit-baseline-middle;
+                }
+                .steps-left {
+                    margin-right: 10px;
+                    .steps-left-line {
+                        width: 2px;
+                        height: calc(100% - 40px);
+                        margin: 10px auto;
+                        background-color: $mainBgColor;
+                    }
+                }
+                .steps-right {
+                    width: 100%;
+                    line-height: 30px;
+                    margin-bottom: 10px;
+                    .steps-right-title {
+                        font-weight: 600;
+                        display: flex;
+                        justify-content: space-between;
+                        .status {
+                            color: $mainBgColor;
+                            font-weight: 400;
+                        }
+                    }
+                    .steps-right-content {
+                        font-size: 12px;
+                        color: #303133;
+                        display: flex;
+                        span:first-child {
+                            margin-right: 10px;
+                        }
+                    }
+                }
             }
         }
     }

operationSupport/src/views/patrolManagement/popups/scheduling.vue

@@ -39,7 +39,11 @@
                             </template>
                         </div>
                     </template>
-                    <div class="pointSet" @click="add(data)">点击设置</div>
+                    <div
+                        class="pointSet"
+                        v-if="date.getTime()>=new Date(new Date().toLocaleDateString()).getTime()"
+                        @click="add(data)"
+                    >点击设置</div>
                 </div>
             </template>
         </el-calendar>
@@ -81,6 +85,10 @@ export default {
                 title = '批量排班';
                 isSingle = false;
             }
+            if (dateDe !== undefined && onj !== undefined) {
+                new Date(dateDe).getTime() >= new Date(new Date().toLocaleDateString()).getTime();
+                return;
+            }
             new Promise(resolve => {
                 this.$store.dispatch('addPopup', {
                     url: '/patrolManagement/popups/schedulingAdd.vue',

operationSupport/src/views/workOrders/popups/details.vue

@@ -13,16 +13,29 @@
                                         <span v-else-if="thisItem['orderType'] == 2">内部报修</span>
                                         <span v-else>--</span>
                                     </template>
-                                    <template v-if="item.slot === 'repairFile' && !!thisItem['repairFile']">
-                                        <div class="imgVdio" v-for="item in thisItem['repairFile'].split(',')" :key="item">
-                                            <video v-if="typeVideo(item)" :src="item" @click="lookVideos(item)"></video>
-                                            <el-image class="imgs" v-else :src="item" :preview-src-list="[item]"></el-image>
+                                    <template
+                                        v-if="item.slot === 'repairFile' && !!thisItem['repairFile']"
+                                    >
+                                        <div
+                                            class="imgVdio"
+                                            v-for="item in thisItem['repairFile'].split(',')"
+                                            :key="item"
+                                        >
+                                            <video
+                                                v-if="typeVideo(item)"
+                                                :src="item"
+                                                @click="lookVideos(item)"
+                                            ></video>
+                                            <el-image
+                                                class="imgs"
+                                                v-else
+                                                :src="item"
+                                                :preview-src-list="[item]"
+                                            ></el-image>
                                         </div>
                                     </template>
                                 </template>
-                                <template v-else>
-                                    {{ thisItem[item.prop] || '--' }}
-                                </template>
+                                <template v-else>{{ thisItem[item.prop] || '--' }}</template>
                             </el-form-item>
                         </el-col>
                     </template>
@@ -36,25 +49,47 @@
                             <el-form-item :label="item.label">
                                 <template v-if="item.slot">
                                     <template v-if="item.slot === 'urgencyDegree'">
-                                        <span v-if="thisItem['urgencyDegree'] == 2" class="redText">紧急</span>
+                                        <span
+                                            v-if="thisItem['urgencyDegree'] == 2"
+                                            class="redText"
+                                        >紧急</span>
                                         <span v-else-if="thisItem['urgencyDegree'] == 1">普通</span>
                                         <span v-else>--</span>
                                     </template>
                                     <template v-if="item.slot === 'handleResult'">
-                                        <span v-if="thisItem['handleResult'] == 2" class="redText">无法处理</span>
-                                        <span v-else-if="thisItem['handleResult'] == 1" class="greenText">成功处理</span>
+                                        <span
+                                            v-if="thisItem['handleResult'] == 2"
+                                            class="redText"
+                                        >无法处理</span>
+                                        <span
+                                            v-else-if="thisItem['handleResult'] == 1"
+                                            class="greenText"
+                                        >成功处理</span>
                                         <span v-else>--</span>
                                     </template>
-                                    <template v-if="item.slot === 'handleFile' && !!thisItem['handleFile']">
-                                        <div class="imgVdio" v-for="item in thisItem['handleFile'].split(',')" :key="item">
-                                            <video v-if="typeVideo(item)" :src="item" @click="lookVideos(item)"></video>
-                                            <el-image class="imgs" v-else :src="item" :preview-src-list="[item]"></el-image>
+                                    <template
+                                        v-if="item.slot === 'handleFile' && !!thisItem['handleFile']"
+                                    >
+                                        <div
+                                            class="imgVdio"
+                                            v-for="item in thisItem['handleFile'].split(',')"
+                                            :key="item"
+                                        >
+                                            <video
+                                                v-if="typeVideo(item)"
+                                                :src="item"
+                                                @click="lookVideos(item)"
+                                            ></video>
+                                            <el-image
+                                                class="imgs"
+                                                v-else
+                                                :src="item"
+                                                :preview-src-list="[item]"
+                                            ></el-image>
                                         </div>
                                     </template>
                                 </template>
-                                <template v-else>
-                                    {{ thisItem[item.prop] || '--' }}
-                                </template>
+                                <template v-else>{{ thisItem[item.prop] || '--' }}</template>
                             </el-form-item>
                         </el-col>
                     </template>
@@ -64,24 +99,40 @@
         <div class="right">
             <div class="list-item">
                 <div class="formContent-item_title">工单进度追踪</div>
-                <div style="height: 300px">
-                    <el-steps direction="vertical" :active="thisActive">
-                        <el-step
-                            :title="item.createDate"
-                            icon="el-icon-full-screen"
-                            v-for="item in thisItem['progressList']"
-                            :key="item.id"
-                        >
-                            <div slot="description">
-                                <div v-if="item.type == 1">报修人：{{ thisItem['repairName'] }}</div>
-                                <template v-else>
-                                    <div>处理人：{{ item.name }}</div>
-                                    <div v-if="!!item.operation">操作：{{ item.operation }}</div>
-                                </template>
+                <template v-for="(item,index) in thisItem['progressList']">
+                    <div class="steps" :key="index">
+                        <div class="steps-left">
+                            <img src="@assets/img/point_yiwancheng@2x.png" alt />
+                            <div
+                                class="steps-left-line"
+                                v-if="index !== thisItem['progressList'].length-1"
+                            ></div>
+                        </div>
+                        <div class="steps-right">
+                            <div class="steps-right-title">
+                                <span>{{item.createDate}}</span>
+                                <span
+                                    class="status"
+                                    v-if="index === thisItem['progressList'].length-1"
+                                >{{item.operation}}</span>
+                            </div>
+                            <div class="steps-right-content" v-if="item.type == 1">
+                                <span>报修人：</span>
+                                <span>{{ thisItem['repairName'] }}</span>
                             </div>
-                        </el-step>
-                    </el-steps>
-                </div>
+                            <template v-else>
+                                <div class="steps-right-content">
+                                    <span>处理人：</span>
+                                    <span>{{ item.name }}</span>
+                                </div>
+                                <div class="steps-right-content" v-if="!!item.operation">
+                                    <span>操作：</span>
+                                    <span>{{ item.operation }}</span>
+                                </div>
+                            </template>
+                        </div>
+                    </div>
+                </template>
             </div>
         </div>
     </div>
@@ -183,7 +234,7 @@ export default {
             return videoType.includes(type);
         },
         lookVideos(src) {
-            new Promise((resolve) => {
+            new Promise(resolve => {
                 this.$store.dispatch('addPopup', {
                     url: '/lookVideo.vue',
                     width: '600px',
@@ -248,4 +299,43 @@ export default {
         cursor: pointer;
     }
 }
+
+.steps {
+    display: flex;
+    img {
+        width: 20px;
+        vertical-align: -webkit-baseline-middle;
+    }
+    .steps-left {
+        margin-right: 10px;
+        .steps-left-line {
+            width: 2px;
+            height: calc(100% - 40px);
+            margin: 10px auto;
+            background-color: $mainBgColor;
+        }
+    }
+    .steps-right {
+        width: 100%;
+        line-height: 30px;
+        margin-bottom: 10px;
+        .steps-right-title {
+            font-weight: 600;
+            display: flex;
+            justify-content: space-between;
+            .status {
+                color: $mainBgColor;
+                font-weight: 400;
+            }
+        }
+        .steps-right-content {
+            font-size: 12px;
+            color: #303133;
+            display: flex;
+            span:first-child {
+                margin-right: 10px;
+            }
+        }
+    }
+}
 </style>