巡更地图

operationSupport/src/assets/css/main.scss

@@ -6,7 +6,6 @@
     box-sizing: border-box;
 }
 
-
 html,
 body,
 #app {

operationSupport/src/assets/css/public-style.scss

@@ -15,6 +15,12 @@ $ashColor: #dcdcdc;
 .ashText {
   color: $ashColor !important;
 }
+.height100 {
+  min-height: inherit;
+  height: 100%;
+}
+
+
 
 .formContent-item_title {
   font-size: 14px;

operationSupport/src/views/patrolManagement/patrolRecords.vue

@@ -1,49 +1,74 @@
 <template>
     <div class="main">
-        <div class="search">
-            <el-input placeholder="请输入巡更路线/人员" class="search-input" clearable v-model="mixins_query.partolName"></el-input>
-            <el-select class="width90" placeholder="请选择巡更状态" v-model="mixins_query.patrolStatus" clearable>
-                <el-option label="待执行" :value="1"></el-option>
-                <el-option label="执行中" :value="2"></el-option>
-                <el-option label="已完成" :value="3"></el-option>
-                <el-option label="已完成(超时)" :value="4"></el-option>
-                <el-option label="已逾期" :value="5"></el-option>
-            </el-select>
-            <el-date-picker
-                v-model="times"
-                value-format="yyyy-MM-dd"
-                type="daterange"
-                range-separator="至"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"
-                @change="effectiveDateToggle"
-            ></el-date-picker>
-            <el-button type="primary" class="search-btn" @click="mixins_search" icon="el-icon-search">查询 </el-button>
-        </div>
-        <zz-table
-            :cols="cols"
-            :settings="{ showIndex: true, stripe: true }"
-            :loading="mixins_onQuery"
-            :data="mixins_list"
-            :pageset="mixins_pageset"
-            @page-change="pageChange"
-        >
-            <template slot-scope="scope" slot="opt">
-                <div class="opt">
-                    <el-tooltip effect="light" placement="bottom" content="详情">
-                        <i class="zoniot_font zoniot-icon-xiangqing" @click="lookDetails(scope.row)"></i>
-                    </el-tooltip>
-                </div>
-            </template>
-        </zz-table>
+        <template v-if="!isLook">
+            <div class="search">
+                <el-input
+                    placeholder="请输入巡更路线/人员"
+                    class="search-input"
+                    clearable
+                    v-model="mixins_query.partolName"
+                ></el-input>
+                <el-select
+                    class="width90"
+                    placeholder="请选择巡更状态"
+                    v-model="mixins_query.patrolStatus"
+                    clearable
+                >
+                    <el-option label="待执行" :value="1"></el-option>
+                    <el-option label="执行中" :value="2"></el-option>
+                    <el-option label="已完成" :value="3"></el-option>
+                    <el-option label="已完成(超时)" :value="4"></el-option>
+                    <el-option label="已逾期" :value="5"></el-option>
+                </el-select>
+                <el-date-picker
+                    v-model="times"
+                    value-format="yyyy-MM-dd"
+                    type="daterange"
+                    range-separator="至"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                    @change="effectiveDateToggle"
+                ></el-date-picker>
+                <el-button
+                    type="primary"
+                    class="search-btn"
+                    @click="mixins_search"
+                    icon="el-icon-search"
+                >查询</el-button>
+            </div>
+            <zz-table
+                :cols="cols"
+                :settings="{ showIndex: true, stripe: true }"
+                :loading="mixins_onQuery"
+                :data="mixins_list"
+                :pageset="mixins_pageset"
+                @page-change="pageChange"
+            >
+                <template slot-scope="scope" slot="opt">
+                    <div class="opt">
+                        <el-tooltip effect="light" placement="bottom" content="详情">
+                            <i
+                                class="zoniot_font zoniot-icon-xiangqing"
+                                @click="lookDetails(scope.row)"
+                            ></i>
+                        </el-tooltip>
+                    </div>
+                </template>
+            </zz-table>
+        </template>
+        <patrol-details v-else @initPage="initPage" :thisObj="thisObj"></patrol-details>
     </div>
 </template>
 
 <script>
 import list from '@utils/list.js';
+import patrolDetails from './popups/patrolDetails';
 export default {
     mixins: [list],
     name: 'workOrdersRecords',
+    components: {
+        patrolDetails
+    },
     data() {
         return {
             communityArr: [],
@@ -54,11 +79,11 @@ export default {
                 },
                 {
                     label: '巡更路线',
-                    prop: 'patrolRouteId'
+                    prop: 'routeName'
                 },
                 {
                     label: '巡更人员',
-                    prop: 'currentUsers'
+                    prop: 'partolName'
                 },
                 {
                     label: '巡更日期',
@@ -93,6 +118,8 @@ export default {
                 }
             ],
             times: [],
+            thisObj: {},
+            isLook: false,
             mixins_post: 'post'
         };
     },
@@ -112,23 +139,12 @@ export default {
             this.mixins_query.endTime = arr[1];
         },
         lookDetails(row) {
-            new Promise((resolve) => {
-                this.$store.dispatch('addPopup', {
-                    url: '/facilityInspections/popups/details.vue',
-                    width: '900px',
-                    height: '581px',
-                    props: {
-                        data: row,
-                        callback: resolve
-                    },
-                    showConfirmButton: true,
-                    showCancelButton: true,
-                    hideStar: true,
-                    title: '巡检详情'
-                });
-            }).then(() => {
-                this.mixins_search();
-            });
+            this.thisObj = row;
+            this.isLook = true;
+        },
+        initPage() {
+            this.isLook = false;
+            this.thisObj = {};
         }
     }
 };

operationSupport/src/views/patrolManagement/patrolRoute.vue

@@ -46,7 +46,7 @@
                         <el-tooltip effect="light" placement="bottom" content="排班">
                             <i
                                 class="zoniot_font zoniot-icon-shenhe"
-                                @click="schedulingEdit(scope)"
+                                @click="schedulingEdit(scope.row)"
                             ></i>
                         </el-tooltip>
                         <el-tooltip effect="light" placement="bottom" content="删除">
@@ -59,7 +59,7 @@
                 </template>
             </zz-table>
         </template>
-        <scheduling v-if="isLook === 'schedu'" @initPage="initPage"></scheduling>
+        <scheduling v-if="isLook === 'schedu'" @initPage="initPage" ></scheduling>
         <add-patrol v-if="isLook === 'patrol'" @initPage="initPage"></add-patrol>
     </div>
 </template>
@@ -110,6 +110,7 @@ export default {
                 }
             ],
             findUser: [],
+            thisObj:{},
             mixins_post: 'post'
         };
     },
@@ -155,11 +156,13 @@ export default {
         add() {
             this.isLook = 'patrol';
         },
-        schedulingEdit() {
+        schedulingEdit(row) {
+            this.thisObj = row;
             this.isLook = 'schedu';
         },
         initPage() {
             this.isLook = 'index';
+             this.thisObj = {};
         }
     }
 };

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

@@ -35,6 +35,7 @@
                         v-model="ruleForm.routePointRelationDtos"
                         ref="transferTude"
                         filterable
+                        style="margin-bottom: 20px;"
                         :props="{
                             key: 'id',
                             label: 'pointName',

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

@@ -1,24 +1,57 @@
 <template>
-    <div id="mapValue"></div>
+    <div>
+        <div id="mapValue" ></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>
+            <el-slider
+                class="slider"
+                v-model="sliderVal"
+                :format-tooltip="hideFormat"
+                :step="0.0001"
+            ></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>
+        </div>
+    </div>
 </template>
 
 <script>
 export default {
-    props: ['point'],
+    props: ['point','isStart'],
     data() {
         return {
             map: '',
             marker: '',
-            icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png'
+            icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
+            markerArr: [],
+            lineArr: [],
+            marker2: '',
+            speed: 1000,
+            sliderVal: 0,
+            isSta: true
         };
     },
     watch: {
         point(e) {
-            this.point.map((item) => {
+            this.point.map((item, index) => {
+                let tag = false;
+                if (index == this.point.length - 1) {
+                    tag = true;
+                }
                 if (!!this.map) {
-                    this.addIcon(item);
+                    this.addIcon(item, tag);
                 }
             });
+        },
+        speed(e) {
+            this.startAnimation(e);
         }
     },
     methods: {
@@ -28,16 +61,69 @@ export default {
                 zoom: 11 //初始化地图层级
             });
         },
-        addIcon(e) {
+        addIcon(e, is) {
             let _this = this;
-            _this.marker = new AMap.Marker({
-                icon: _this.icon,
-                position: [e.longitude, e.latitude]
-                // map: _this.map
+            let lineArr = [e.longitude, e.latitude];
+            this.marker = new AMap.Marker({
+                icon: this.icon,
+                position: lineArr
             });
-            // this.marker.setMap(this.map);
             this.map.add(this.marker);
+            this.markerArr.push(this.marker);
+            this.lineArr.push(lineArr);
             this.map.setFitView();
+            if (is) {
+                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() {
@@ -50,7 +136,7 @@ export default {
 <style scoped  lang="scss">
 /* --------------------------------高德地图样式----------------------------- */
 #mapValue {
-    margin-top: 20px;
+    // margin-top: 20px;
     width: 100%;
     height: 300px;
 }
@@ -69,4 +155,16 @@ export default {
         }
     }
 }
+.map-control {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 20px;
+    .clickIco i {
+        font-size: 30px;
+        line-height: 31px;
+    }
+    .slider {
+        width: calc(100% - 270px);
+    }
+}
 </style>

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

@@ -0,0 +1,172 @@
+<template>
+    <div class="patrolDetails">
+        <div class="search">
+            <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="targetData" ref="mapVal" :isStart='true'></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}}</div>
+                    </div>
+                    <div class="formLabelList">
+                        <div class="label">巡更时间</div>
+                        <div class="text">{{thisObj.patrolTime}}</div>
+                    </div>
+                </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>
+                            </div>
+                        </div>
+                    </el-step>
+                </el-steps>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import mapValue from './mapValue.vue';
+export default {
+    props: ['thisObj'],
+    components: { mapValue },
+    data() {
+        return {
+            thisItem: {},
+            thisActive: 0,
+            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');
+        },
+        getDetail(id) {
+            this.$http.get('/sc-community/patrolRecord/findRecordDtail', { id: id }).then(({ data, status, msg }) => {
+                this.thisItem = data;
+            });
+        },
+        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);
+            });
+        },
+    },
+    created() {
+        this.getDetail(this.thisObj.id);
+        this.getTrack(this.thisObj.id);
+    }
+};
+</script>>
+<style lang="scss" scoped>
+@import '@assets/css/public-style.scss';
+.border20 {
+    padding: 20px;
+    box-sizing: border-box;
+}
+.patrolDetails {
+    // @extend .height100;
+
+    .search > span {
+        font-size: 16px;
+        line-height: 30px;
+    }
+    .contentText {
+        height: calc(100% - 100px);
+        display: flex;
+        justify-content: space-between;
+        .leftMap {
+            width: calc(100% - 420px);
+            background: white;
+            @extend .border20;
+            .formLabel {
+                box-shadow: 0px 2px 4px 0px rgba(236, 236, 236, 0.5);
+                border-radius: 4px;
+                border: 1px solid #eeeeee;
+                padding: 20px;
+                margin-top: 20px;
+                .formLabelList {
+                    display: flex;
+                    line-height: 30px;
+                    .label {
+                        width: 70px;
+                    }
+                    .text {
+                        color: #424656;
+                    }
+                }
+            }
+        }
+        .rightList {
+            width: 400px;
+            background: white;
+            @extend .border20;
+            .flex {
+                display: flex;
+                justify-content: space-between;
+            }
+        }
+    }
+}
+</style>

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

@@ -6,7 +6,6 @@
                 value-format="yyyy-MM-dd"
                 type="month"
                 placeholder="选择时间"
-                @change="changeMonth"
                 :clearable="false"
             ></el-date-picker>
             <div class="search-icon">
@@ -40,8 +39,8 @@
                             </template>
                         </div>
                     </template>
+                    <div class="pointSet" @click="add(data)">点击设置</div>
                 </div>
-                <div class="pointSet" @click="add(data)">点击设置</div>
             </template>
         </el-calendar>
     </div>
@@ -52,15 +51,8 @@ export default {
         return {
             monthValue: '',
             findUser: [],
-            calendarData: [
-                {
-                    partrolDate: '2022-02-21',
-                    rosterUserDtos: [
-                        { partrolTime: '8:30-10:00', partolName: '奥特曼' },
-                        { partrolTime: '18:30-19:00', partolName: '奥特曼30' }
-                    ]
-                }
-            ]
+            thisObj: {},
+            calendarData: []
         };
     },
     filters: {
@@ -68,6 +60,19 @@ export default {
             return val.getDate();
         }
     },
+    watch: {
+        monthValue(e) {
+            try {
+                let timeArr = e.split('-');
+                let time = new Date(timeArr[0], Number(timeArr[1]), 0);
+                this.getShiftInformation({
+                    patrolRouteId: this.thisObj.id,
+                    startTime: `${timeArr[0]}-${timeArr[1]}-01`,
+                    endTime: `${timeArr[0]}-${timeArr[1]}-${time.getDate()}`
+                });
+            } catch {}
+        }
+    },
     methods: {
         add(dateDe, onj) {
             let title = '排班',
@@ -86,34 +91,55 @@ export default {
                         findUser: this.findUser,
                         dateDe,
                         onj,
+                        thisObj: this.thisObj,
                         isSingle: isSingle
                     },
                     title: title
                 });
             }).then(() => {
-                this.mixins_search();
-            });
-        },
-        getUserList() {
-            this.$http.get('/sc-user-center/user/findUserList').then(({ data, status, msg }) => {
-                this.findUser = data;
+                let newTime = this.$moment(this.monthValue).format('YYYY-MM-DD');
+                let timeArr = newTime.split('-');
+                let time = new Date(timeArr[0], Number(timeArr[1]), 0);
+                this.getShiftInformation({
+                    patrolRouteId: this.thisObj.id,
+                    startTime: `${timeArr[0]}-${timeArr[1]}-01`,
+                    endTime: `${timeArr[0]}-${timeArr[1]}-${time.getDate()}`
+                });
             });
         },
-        changeMonth(va) {
-            console.log(va);
-        },
         goback() {
             this.$emit('initPage');
         },
         initDate(type) {
             this.monthValue = this.$moment().format(type);
+        },
+        getShiftInformation(obj) {
+            this.$http.post('/sc-community/patrolRoute/getShiftInformation', obj).then(({ data, status, msg }) => {
+                if (!!data) {
+                    this.calendarData = [];
+                    for (let inx in data) {
+                        let rosterUserDtos = [];
+                        data[inx].map(item => {
+                            rosterUserDtos.push({
+                                partrolTime: item.patrolTime,
+                                partolName: item.partolName
+                            });
+                        });
+                        this.calendarData.push({
+                            partrolDate: this.$moment(inx).format('YYYY-MM-DD'),
+                            rosterUserDtos: rosterUserDtos
+                        });
+                    }
+                }
+            });
         }
     },
     created() {
         this.initDate('YYYY-MM-DD');
     },
     mounted() {
-        this.getUserList();
+        this.findUser = this.$parent.findUser;
+        this.thisObj = this.$parent.thisObj;
         this.$el.querySelector('div.el-calendar__header').remove();
     }
 };

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

@@ -1,5 +1,11 @@
 <template>
-    <el-form class="timeNewStyle" label-width="100px" :model="formData" :rules="formRules" ref="formRu">
+    <el-form
+        class="timeNewStyle"
+        label-width="100px"
+        :model="formData"
+        :rules="formRules"
+        ref="formRu"
+    >
         <el-form-item label="巡更日期" v-if="!params.isSingle" prop="partrolDate">
             <el-date-picker
                 v-model="formData.partrolDate"
@@ -10,24 +16,17 @@
             ></el-date-picker>
         </el-form-item>
         <el-form-item label="巡更日期" v-else>{{ thisDay.day | dateText }}</el-form-item>
-        <el-form-item label="8:30-10:00">
-            <el-cascader
-                ref="userName0"
-                v-model="timePeriod[0].partolUserId"
-                :props="defaultProps"
-                :options="findUser"
-                @change="findUserToggle(0)"
-            ></el-cascader>
-        </el-form-item>
-        <el-form-item label="18:30-19:00">
-            <el-cascader
-                ref="userName1"
-                v-model="timePeriod[1].partolUserId"
-                :props="defaultProps"
-                :options="findUser"
-                @change="findUserToggle(1)"
-            ></el-cascader>
-        </el-form-item>
+        <template v-for="(item,index) in timePeriod">
+            <el-form-item :label="item.partrolTime" :key="index">
+                <el-cascader
+                    :ref="`userName${index}`"
+                    v-model="item.partolUserId"
+                    :props="defaultProps"
+                    :options="findUser"
+                    @change="findUserToggle(index)"
+                ></el-cascader>
+            </el-form-item>
+        </template>
     </el-form>
 </template>
 <script>
@@ -35,18 +34,7 @@ export default {
     props: ['params'],
     data() {
         return {
-            timePeriod: [
-                {
-                    partolName: '',
-                    partolUserId: '',
-                    partrolTime: '8:30-10:00'
-                },
-                {
-                    partolName: '',
-                    partolUserId: '',
-                    partrolTime: '18:30-19:00'
-                }
-            ],
+            timePeriod: [],
             findUser: [],
             thisDay: {},
             defaultProps: {
@@ -75,18 +63,43 @@ export default {
     },
     methods: {
         findUserToggle(index) {
-            this.timePeriod[index].partolName = this.$refs['userName' + index].getCheckedNodes()[0].label;
+            let thisObj = this.$refs[`userName${index}`][0].getCheckedNodes()[0];
+            this.timePeriod[index].partolName = thisObj.label;
         },
         submit() {
             if (!this.params.isSingle) {
-                this.$refs['formRu'].validate((valid) => {
+                this.$refs['formRu'].validate(valid => {
                     if (valid) {
-                        // 批量添加
+                        this.add();
                     }
                 });
             } else {
-                // 单个添加修改
+                this.add();
             }
+        },
+        add() {
+            let data = this.params.thisObj;
+            let initData = {
+                communityId: data.communityId,
+                patrolRouteId: data.id,
+                periodType: data.periodType,
+                periodValue: data.periodValue,
+                rosterUserDtos: this.timePeriod,
+                partrolDate: this.thisDay.day
+            };
+            if (!this.params.isSingle) {
+                initData.partrolDate = this.formData.partrolDate[0];
+                initData.partrolEndDate = this.formData.partrolDate[1];
+            }
+            this.$http.post('/sc-community/patrolRoute/roster', initData).then(({ data, status, msg }) => {
+                if (status == 0) {
+                    this.$message.success(msg);
+                    this.params.callback();
+                    this.$emit('close');
+                } else {
+                    this.$message.error(msg);
+                }
+            });
         }
     },
     created() {
@@ -97,6 +110,16 @@ export default {
         if (!!this.params.onj) {
             console.log(this.params.onj);
         }
+        if (!!this.params.thisObj) {
+            let arrs = this.params.thisObj.timePeriod.split(',');
+            arrs.map(item => {
+                this.timePeriod.push({
+                    partolName: '',
+                    partolUserId: '',
+                    partrolTime: item
+                });
+            });
+        }
     },
     mounted() {}
 };