路线速度

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

@@ -1,149 +1,179 @@
 <template>
-    <div>
-        <div id="mapValue" :style="`height:${height || 300}px`"></div>
-        <!--控制条-->
-        <div class="map-control" v-if="isStart && !!line.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="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>
+    <div
+      id="mapValue"
+      :style="`height:${height || 300}px`"
+    ></div>
+    <!--控制条-->
+    <div
+      class="map-control"
+      v-if="isStart && !!line.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="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', 'height', 'line'],
-    mixins: [functionJs],
-    data() {
-        return {
-            marker: '',
-            markerArr: [],
-            polyline: null,
-            lineArr2: []
-        };
-    },
-    watch: {
-        point: {
-            handler() {
-                if (!!this.map) {
-                    // 判断当前是否有绘制点位清除
-                    if (this.markerArr.length > 0) {
-                        this.map.remove(this.markerArr);
-                        this.markerArr = [];
-                    }
-                    // 判断当前是否有轨迹清除
-                    if (!!this.polyline) {
-                        this.map.remove(this.polyline);
-                        this.polyline = null;
-                        this.lineArr2 = [];
-                    }
-                    // 先初始化点位信息
-                    this.point.map((item, index) => {
-                        this.addIcon(item, index);
-                    });
-                    this.setMap();
-                }
-            },
-            deep: true,
-            immediate: true
-        },
-        line: {
-            handler() {
-                if (!!this.map) {
-                    this.lineArr = [];
-                    // 判断当前是否有巡航路线清除
-                    if (!!this.pathSimplifierIns) {
-                        this.pathSimplifierIns.setData([]);
-                        this.pathSimplifierIns = null;
-                    }
-                    this.line.map((item) => {
-                        this.lineArr.push([item.longitude, item.latitude]);
-                    });
-                    // 是否巡航开启
-                    if (this.isStart && this.lineArr.length != 0) {
-                        this.$nextTick(() => {
-                            this.initPlayBox();
-                            this.beforeInit = true;
-                            this.initLineArr(true);
-                        });
-                    }
-                }
-            },
-            deep: true,
-            immediate: true
+  props: ['point', 'isStart', 'height', 'line'],
+  mixins: [functionJs],
+  data () {
+    return {
+      marker: '',
+      markerArr: [],
+      polyline: null,
+      lineArr2: []
+    };
+  },
+  watch: {
+    point: {
+      handler () {
+        if (!!this.map) {
+          // 判断当前是否有绘制点位清除
+          if (this.markerArr.length > 0) {
+            this.map.remove(this.markerArr);
+            this.markerArr = [];
+          }
+          // 判断当前是否有轨迹清除
+          if (!!this.polyline) {
+            this.map.remove(this.polyline);
+            this.polyline = null;
+            this.lineArr2 = [];
+          }
+          // 先初始化点位信息
+          this.point.map((item, index) => {
+            this.addIcon(item, index);
+          });
+          this.setMap();
         }
+      },
+      deep: true,
+      immediate: true
     },
-    methods: {
-        init() {
-            this.map = new AMap.Map('mapValue', {
-                resizeEnable: true, //是否监控地图容器尺寸变化
-                zoom: 11 //初始化地图层级
-            });
-        },
-        //绘制点位信息
-        addIcon(e, index) {
-            let lineArr = [e.longitude, e.latitude];
-            let self = this;
-            this.marker = new AMap.Marker({
-                icon: new AMap.Icon({
-                    image: !!e.id ? self.pointIcon : self.pointGradIcon,
-                    size: new AMap.Size(20, 25),
-                    imageSize: new AMap.Size(20, 28)
-                }),
-                position: lineArr
-            });
-            this.marker.setLabel({
-                offset: new AMap.Pixel(-22, 30),
-                content: `巡更点：${index + 1}`
-            });
-            this.markerArr.push(this.marker);
-            this.lineArr2.push(lineArr);
-        },
-        // 添加点位 添加路线到地图
-        setMap() {
-            this.map.add(this.markerArr);
-            this.map.setFitView();
-            // 大于一个点创建 轨迹回放
-            if (this.point.length > 1 && !this.isStart) {
-                this.addPolyline();
-            }
-        },
-        //轨迹路线
-        addPolyline() {
-            this.polyline = new AMap.Polyline({
-                map: this.map,
-                path: this.lineArr2,
-                showDir: true,
-                strokeColor: '#28F', //线颜色
-                // strokeOpacity: 1,     //线透明度
-                strokeWeight: 6 //线宽
-                // strokeStyle: "solid"  //线样式
+    line: {
+      handler () {
+        if (!!this.map) {
+          this.lineArr = [];
+          // 判断当前是否有巡航路线清除
+          if (!!this.pathSimplifierIns) {
+            this.pathSimplifierIns.setData([]);
+            this.pathSimplifierIns = null;
+          }
+          this.line.map((item) => {
+            this.lineArr.push([item.longitude, item.latitude]);
+          });
+          // 是否巡航开启
+          if (this.isStart && this.lineArr.length != 0) {
+            this.$nextTick(() => {
+              this.initPlayBox();
+              this.beforeInit = true;
+              this.initLineArr(true);
             });
+          }
         }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  methods: {
+    init () {
+      this.map = new AMap.Map('mapValue', {
+        resizeEnable: true, //是否监控地图容器尺寸变化
+        zoom: 11 //初始化地图层级
+      });
+    },
+    //绘制点位信息
+    addIcon (e, index) {
+      let lineArr = [e.longitude, e.latitude];
+      let self = this;
+      this.marker = new AMap.Marker({
+        icon: new AMap.Icon({
+          image: !!e.id ? self.pointIcon : self.pointGradIcon,
+          size: new AMap.Size(20, 25),
+          imageSize: new AMap.Size(20, 28)
+        }),
+        position: lineArr
+      });
+      this.marker.setLabel({
+        offset: new AMap.Pixel(-22, 30),
+        content: `巡更点：${index + 1}`
+      });
+      this.markerArr.push(this.marker);
+      this.lineArr2.push(lineArr);
+    },
+    // 添加点位 添加路线到地图
+    setMap () {
+      this.map.add(this.markerArr);
+      this.map.setFitView();
+      // 大于一个点创建 轨迹回放
+      if (this.point.length > 1 && !this.isStart) {
+        this.addPolyline();
+      }
     },
-    created() {
-        this.$nextTick(() => {
-            this.init();
-        });
+    //轨迹路线
+    addPolyline () {
+      this.polyline = new AMap.Polyline({
+        map: this.map,
+        path: this.lineArr2,
+        showDir: true,
+        strokeColor: '#28F', //线颜色
+        // strokeOpacity: 1,     //线透明度
+        strokeWeight: 6 //线宽
+        // strokeStyle: "solid"  //线样式
+      });
     }
+  },
+  created () {
+    this.$nextTick(() => {
+      this.init();
+    });
+  }
 };
 </script>
 <style scoped  lang="scss">

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

@@ -1,3 +1,4 @@
+//测试跟着图片走动
 export default {
     data() {
         return {
@@ -11,7 +12,7 @@ export default {
             sliderVal: 0, // 进度条
             times: 1, // 倍速
             maxSpeed: 10, // 最高倍速
-            navgtrSpeed: 5000, // 速度
+            navgtrSpeed: 50, // 速度
             isMinSpeed: true,
             isMaxSpeed: false,
             navgtr: null,
@@ -84,7 +85,7 @@ export default {
             let _this = this;
             let that = this;
 
-            AMapUI.load(['ui/misc/PathSimplifier'], PathSimplifier => {
+            AMapUI.load(['ui/misc/PathSimplifier'], (PathSimplifier) => {
                 if (!PathSimplifier.supportCanvas) {
                     alert('当前环境不支持 Canvas！');
                     return;
@@ -210,7 +211,6 @@ export default {
                 // 如果已经到了终点，重新定位坐标
                 if (this.isCursorAtPathEnd && this.actualList.length > 0) {
                     this.map.setCenter(this.actualList[0]);
-
                 }
             } else if (type === 'pause') {
                 this.isPlay = true;
@@ -218,7 +218,7 @@ export default {
             }
             this.navgtr[type]();
             this.map.setFitView();
-        },
+        }
         // carReLocate() {
         //     // 鼠标从滑动条抬起时，重新定位
         //     if (this.currentPoint) {
@@ -234,6 +234,5 @@ export default {
         // 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

@@ -1,206 +1,269 @@
 <template>
-    <div class="patrolDetails">
-        <div class="search" v-if="!this.params">
-            <span>巡更详情</span>
-            <div class="search-icon">
-                <el-tooltip effect="light" placement="bottom" content="返回">
-                    <i class="zoniot_font zoniot-icon-fanhui" @click="goback()"></i>
-                </el-tooltip>
-            </div>
+  <div class="patrolDetails">
+    <div
+      class="search"
+      v-if="!this.params"
+    >
+      <span>巡更详情</span>
+      <div class="search-icon">
+        <el-tooltip
+          effect="light"
+          placement="bottom"
+          content="返回"
+        >
+          <i
+            class="zoniot_font zoniot-icon-fanhui"
+            @click="goback()"
+          ></i>
+        </el-tooltip>
+      </div>
+    </div>
+    <div class="contentText">
+      <div class="leftMap">
+        <map-value
+          :point="thisItem"
+          :line="targetData"
+          ref="mapVal"
+          :isStart="true"
+          :height="400"
+        ></map-value>
+        <div class="formLabel">
+          <div class="formLabelList">
+            <div class="label">所属社区</div>
+            <div class="text">{{ thisObj.communityName }}</div>
+          </div>
+          <div class="formLabelList">
+            <div class="label">巡更路线</div>
+            <div class="text">{{ thisObj.routeName }}</div>
+          </div>
+          <div class="formLabelList">
+            <div class="label">巡更人员</div>
+            <div class="text">{{ thisObj.partolName }}</div>
+          </div>
+          <div class="formLabelList">
+            <div class="label">巡更日期</div>
+            <div class="text">{{ !!thisObj.patrolDate ? $moment(thisObj.patrolDate).format('YYYY-MM-DD') : '' }}</div>
+          </div>
+          <div class="formLabelList">
+            <div class="label">巡更时间</div>
+            <div class="text">{{ thisObj.patrolTime }}</div>
+          </div>
         </div>
-        <div class="contentText">
-            <div class="leftMap">
-                <map-value :point="thisItem" :line="targetData" ref="mapVal" :isStart="true" :height="400"></map-value>
-                <div class="formLabel">
-                    <div class="formLabelList">
-                        <div class="label">所属社区</div>
-                        <div class="text">{{ thisObj.communityName }}</div>
-                    </div>
-                    <div class="formLabelList">
-                        <div class="label">巡更路线</div>
-                        <div class="text">{{ thisObj.routeName }}</div>
-                    </div>
-                    <div class="formLabelList">
-                        <div class="label">巡更人员</div>
-                        <div class="text">{{ thisObj.partolName }}</div>
-                    </div>
-                    <div class="formLabelList">
-                        <div class="label">巡更日期</div>
-                        <div class="text">{{ !!thisObj.patrolDate ? $moment(thisObj.patrolDate).format('YYYY-MM-DD') : '' }}</div>
-                    </div>
-                    <div class="formLabelList">
-                        <div class="label">巡更时间</div>
-                        <div class="text">{{ thisObj.patrolTime }}</div>
-                    </div>
-                </div>
+      </div>
+      <div class="rightList">
+        <template v-for="(item, index) in leftItem">
+          <div
+            class="steps"
+            :key="index"
+          >
+            <div class="steps-left">
+              <img
+                v-if="!!leftItem[1].id"
+                src="@assets/img/point_yiwancheng@2x.png"
+                alt
+              />
+              <img
+                v-else-if="!leftItem[1].id && index !== leftItem.length - 1"
+                src="@assets/img/point_weiwancheng@2x.png"
+                alt
+              />
+              <div
+                class="steps-left-line"
+                v-if="index !== leftItem.length - 1 && !!leftItem[leftItem.length - 2].id"
+              ></div>
+              <div
+                class="steps-left-line"
+                v-else-if="index !== leftItem.length - 2"
+              ></div>
             </div>
-            <div class="rightList">
-                <template v-for="(item, index) in leftItem">
-                    <div class="steps" :key="index">
-                        <div class="steps-left">
-                            <img v-if="!!leftItem[1].id" src="@assets/img/point_yiwancheng@2x.png" alt />
-                            <img
-                                v-else-if="!leftItem[1].id && index !== leftItem.length - 1"
-                                src="@assets/img/point_weiwancheng@2x.png"
-                                alt
-                            />
-                            <div class="steps-left-line" v-if="index !== leftItem.length - 1 && !!leftItem[leftItem.length - 2].id"></div>
-                            <div class="steps-left-line" v-else-if="index !== leftItem.length - 2"></div>
-                        </div>
-                        <div class="steps-right">
-                            <!-- 待开始 开始 -->
-                            <div class="steps-right-title" v-if="index == 0">
-                                <span>{{ !!leftItem[1].id ? '开始任务 ' : '待执行' }}</span>
-                            </div>
-                            <!-- 点位状态 -->
-                            <div class="steps-right-title" v-else-if="index !== 0 && index !== leftItem.length - 1">
-                                <span>{{ item.pointName }}</span>
-                                <span class="status" :class="!!item.id ? '' : 'grad'">{{ !!item.id ? '已完成' : '未完成' }}</span>
-                            </div>
-                            <div class="steps-right-title" v-else>
-                                <span>{{ !!leftItem[leftItem.length - 2].id ? '结束任务 ' : '' }}</span>
-                            </div>
+            <div class="steps-right">
+              <!-- 待开始 开始 -->
+              <div
+                class="steps-right-title"
+                v-if="index == 0"
+              >
+                <span>{{ !!leftItem[1].id ? '开始任务 ' : '待执行' }}</span>
+              </div>
+              <!-- 点位状态 -->
+              <div
+                class="steps-right-title"
+                v-else-if="index !== 0 && index !== leftItem.length - 1"
+              >
+                <span>{{ item.pointName }}</span>
+                <span
+                  class="status"
+                  :class="!!item.id ? '' : 'grad'"
+                >{{ !!item.id ? '已完成' : '未完成' }}</span>
+              </div>
+              <div
+                class="steps-right-title"
+                v-else
+              >
+                <span>{{ !!leftItem[leftItem.length - 2].id ? '结束任务 ' : '' }}</span>
+              </div>
 
-                            <div class="steps-right-content" v-if="index == 0">{{ leftItem[1].startTime }}</div>
-                            <template v-else-if="index !== 0 && index !== leftItem.length - 1">
-                                <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>
-                                    <template v-if="!!item.picturePath">
-                                        <div class="imgVdio" v-for="items in item.picturePath.split(',')" :key="items">
-                                            <video v-if="typeVideo(items)" :src="items" @click="lookVideos(items)"></video>
-                                            <el-image class="imgs" v-else :src="items" :preview-src-list="[items]">
-                                                <div slot="error" class="image-slot">--</div>
-                                            </el-image>
-                                        </div>
-                                    </template>
-                                </div>
-                            </template>
-                            <div class="steps-right-content" v-else>
-                                {{ leftItem[1].endTime }}
-                            </div>
-                        </div>
+              <div
+                class="steps-right-content"
+                v-if="index == 0"
+              >{{ leftItem[1].startTime }}</div>
+              <template v-else-if="index !== 0 && index !== leftItem.length - 1">
+                <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>
+                  <template v-if="!!item.picturePath">
+                    <div
+                      class="imgVdio"
+                      v-for="items in item.picturePath.split(',')"
+                      :key="items"
+                    >
+                      <video
+                        v-if="typeVideo(items)"
+                        :src="items"
+                        @click="lookVideos(items)"
+                      ></video>
+                      <el-image
+                        class="imgs"
+                        v-else
+                        :src="items"
+                        :preview-src-list="[items]"
+                      >
+                        <div
+                          slot="error"
+                          class="image-slot"
+                        >--</div>
+                      </el-image>
                     </div>
-                </template>
+                  </template>
+                </div>
+              </template>
+              <div
+                class="steps-right-content"
+                v-else
+              >
+                {{ leftItem[1].endTime }}
+              </div>
             </div>
-        </div>
+          </div>
+        </template>
+      </div>
     </div>
+  </div>
 </template>
 <script>
 import mapValue from './mapValue.vue';
 export default {
-    props: ['thisObj', 'params'],
-    components: { mapValue },
-    data() {
-        return {
-            thisItem: [],
-            leftItem: [],
-            targetData: []
-        };
+  props: ['thisObj', 'params'],
+  components: { mapValue },
+  data () {
+    return {
+      thisItem: [],
+      leftItem: [],
+      targetData: []
+    };
+  },
+  filters: {
+    statusType (val) {
+      let name = '-';
+      switch (val) {
+        case 1:
+          name = '待执行';
+          break;
+        case 2:
+          name = '执行中';
+          break;
+        case 3:
+          name = '已完成';
+          break;
+        case 4:
+          name = '已完成(超时)';
+          break;
+        case 5:
+          name = '已逾期';
+          break;
+      }
+      return name;
+    }
+  },
+  methods: {
+    goback () {
+      this.$emit('initPage');
     },
-    filters: {
-        statusType(val) {
-            let name = '-';
-            switch (val) {
-                case 1:
-                    name = '待执行';
-                    break;
-                case 2:
-                    name = '执行中';
-                    break;
-                case 3:
-                    name = '已完成';
-                    break;
-                case 4:
-                    name = '已完成(超时)';
-                    break;
-                case 5:
-                    name = '已逾期';
-                    break;
+    getDetail (id) {
+      this.$http.get('/sc-community/patrolRecord/findRecordDtail', { id: id }).then(({ data, status, msg }) => {
+        this.thisItem = data;
+        this.leftItem = [
+          [
+            {
+              checkTime: null,
+              id: null,
+              picturePath: null,
+              pointId: null,
+              pointStatus: null,
+              recordId: null,
+              result: null
             }
-            return name;
-        }
+          ],
+          ...data,
+          [
+            {
+              checkTime: null,
+              id: null,
+              picturePath: null,
+              pointId: null,
+              pointStatus: null,
+              recordId: null,
+              result: null
+            }
+          ]
+        ];
+      });
     },
-    methods: {
-        goback() {
-            this.$emit('initPage');
-        },
-        getDetail(id) {
-            this.$http.get('/sc-community/patrolRecord/findRecordDtail', { id: id }).then(({ data, status, msg }) => {
-                this.thisItem = data;
-                this.leftItem = [
-                    [
-                        {
-                            checkTime: null,
-                            id: null,
-                            picturePath: null,
-                            pointId: null,
-                            pointStatus: null,
-                            recordId: null,
-                            result: null
-                        }
-                    ],
-                    ...data,
-                    [
-                        {
-                            checkTime: null,
-                            id: null,
-                            picturePath: null,
-                            pointId: null,
-                            pointStatus: null,
-                            recordId: null,
-                            result: null
-                        }
-                    ]
-                ];
-            });
-        },
-        getTrack(id) {
-            this.$http.get('/sc-community/patrolRecord/getUserPatrolTrack', { recordId: id }).then(({ data, status, msg }) => {
-                if (!!data) {
-                    this.targetData = data;
-                }
-            });
-        },
-        typeVideo(str) {
-            let type = str.slice(str.lastIndexOf('.') + 1, str.length);
-            let videoType = ['mp4'];
-            return videoType.includes(type);
-        },
-        lookVideos(src) {
-            new Promise((resolve) => {
-                this.$store.dispatch('addPopup', {
-                    url: '/lookVideo.vue',
-                    width: '600px',
-                    height: '500px',
-                    props: {
-                        src: src,
-                        callback: resolve
-                    },
-                    showConfirmButton: true,
-                    showCancelButton: true,
-                    hideStar: true,
-                    title: '查看视频'
-                });
-            }).then(() => {
-                this.mixins_search();
-            });
+    getTrack (id) {
+      this.$http.get('/sc-community/patrolRecord/getUserPatrolTrack', { recordId: id }).then(({ data, status, msg }) => {
+        if (!!data) {
+          this.targetData = data;
         }
+      });
     },
-    created() {
-        if (!!this.params) {
-            this.thisObj = this.params.thisObj;
-            this.getDetail(this.params.thisObj.id);
-            this.getTrack(this.params.thisObj.id);
-        } else {
-            this.getDetail(this.thisObj.id);
-            this.getTrack(this.thisObj.id);
-        }
+    typeVideo (str) {
+      let type = str.slice(str.lastIndexOf('.') + 1, str.length);
+      let videoType = ['mp4'];
+      return videoType.includes(type);
+    },
+    lookVideos (src) {
+      new Promise((resolve) => {
+        this.$store.dispatch('addPopup', {
+          url: '/lookVideo.vue',
+          width: '600px',
+          height: '500px',
+          props: {
+            src: src,
+            callback: resolve
+          },
+          showConfirmButton: true,
+          showCancelButton: true,
+          hideStar: true,
+          title: '查看视频'
+        });
+      }).then(() => {
+        this.mixins_search();
+      });
+    }
+  },
+  created () {
+    if (!!this.params) {
+      this.thisObj = this.params.thisObj;
+      this.getDetail(this.params.thisObj.id);
+      this.getTrack(this.params.thisObj.id);
+    } else {
+      this.getDetail(this.thisObj.id);
+      this.getTrack(this.thisObj.id);
     }
+  }
 };
 </script>>
 <style lang="scss" scoped>