minggao/config/index.js

@@ -11,10 +11,10 @@ module.exports = {
     assetsPublicPath: '/',
     proxyTable: {
       '/api': {
-        // target: 'http://192.168.1.52:12345', //翟毅飞
+         target: 'http://192.168.1.52:12345', //翟毅飞
         //  target: 'https://www.yhswjc.com', //线上
         // target: 'http://192.168.1.77:12345', //曹世祥
-        target: 'http://114.115.147.140:12345',
+        // target: 'http://114.115.147.140:12345',
         changeOrigin: true,
         pathRewrite: {
           '^/api': '/api' //重写接口
@@ -23,8 +23,8 @@ module.exports = {
     },
 
     // Various Dev Server settings
-    host: 'localhost', // can be overwritten by process.env.HOST
-    // host: '192.168.1.77', // can be overwritten by process.env.HOST
+    // host: 'localhost', // can be overwritten by process.env.HOST
+    host: '192.168.1.14', // can be overwritten by process.env.HOST
     port: 8888, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: false,
     errorOverlay: true,

minggao/src/assets/icon/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: 'iconfont';  /* Project id 1738837 */
-  src: url('//at.alicdn.com/t/font_1738837_98dclv30h25.woff2?t=1646902310465') format('woff2'),
-       url('//at.alicdn.com/t/font_1738837_98dclv30h25.woff?t=1646902310465') format('woff'),
-       url('//at.alicdn.com/t/font_1738837_98dclv30h25.ttf?t=1646902310465') format('truetype');
+  src: url('//at.alicdn.com/t/c/font_1738837_8v4lnlb9hs7.woff2?t=1675231909556') format('woff2'),
+       url('//at.alicdn.com/t/c/font_1738837_8v4lnlb9hs7.woff?t=1675231909556') format('woff'),
+       url('//at.alicdn.com/t/c/font_1738837_8v4lnlb9hs7.ttf?t=1675231909556') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,18 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-yujing:before {
+  content: "\e663";
+}
+
+.icon-yujing1:before {
+  content: "\e87a";
+}
+
+.icon-ceju:before {
+  content: "\e647";
+}
+
 .icon-zuidahua:before {
   content: "\e640";
 }

minggao/src/assets/icon/iconfont.json

@@ -1,11 +1,32 @@
 {
   "id": "1738837",
   "name": "农业大数据",
-  "font_family": "iconfont",
+  "font_family": "yficonfont",
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
     {
+      "icon_id": "4784148",
+      "name": "预警",
+      "font_class": "yujing",
+      "unicode": "e663",
+      "unicode_decimal": 58979
+    },
+    {
+      "icon_id": "5838825",
+      "name": "预警",
+      "font_class": "yujing1",
+      "unicode": "e87a",
+      "unicode_decimal": 59514
+    },
+    {
+      "icon_id": "1409834",
+      "name": "8测距",
+      "font_class": "ceju",
+      "unicode": "e647",
+      "unicode_decimal": 58951
+    },
+    {
       "icon_id": "991640",
       "name": "最大化",
       "font_class": "zuidahua",

minggao/src/main.js

@@ -57,8 +57,8 @@ Vue.prototype.$imghost = Vue.prototype.DOMIN // 翟毅飞本地图片服务器
 // Vue.prototype.$imghost = 'http://www.hnyfwlw.com:8006/projectimg' // 线上图片服务器路径常量
 Vue.prototype.$insectHost = 'https://images.weserv.nl/?url=' // 线上图片服务器路径常量
 Vue.prototype.$wsUrl = Vue.prototype.wsUrl  // 实时通信服务器url 
-Vue.prototype.$deriveData = Vue.prototype.DOMIN // 导出
-// Vue.prototype.$deriveData = 'http://192.168.1.112:8002' // 导出
+// Vue.prototype.$deriveData = Vue.prototype.DOMIN // 导出
+Vue.prototype.$deriveData = 'http://114.115.147.140:12345' // 导出
 Vue.prototype.$faultvideo = Vue.prototype.DOMIN //售后视频地址前缀
 
 import VueHighcharts from 'vue-highcharts';

minggao/src/page/commandCenter/superviseAdminDetails.vue

@@ -7,7 +7,10 @@
         <el-col :span="24">
           <div class="list_box">
             <div class="list_tlt">
-              <span>任务信息</span>
+              <div class="list_tlt_text">
+                <p>任务信息</p>
+                <p class="list_tlt_p"></p>
+              </div>
               <el-button type="info" size="mini" @click="overseer"
                 >监督</el-button
               >
@@ -56,9 +59,27 @@
           </div>
         </el-col>
 
-        <!-- 签到信息 -->
+        <!-- 任务汇报 -->
         <el-col :span="24">
           <div class="list_box">
+            <div class="list_tlt">
+              <div class="list_tlt_text">
+                <p>任务汇报</p>
+                <p class="list_tlt_p"></p>
+              </div>
+            </div>
+
+            <ul class="list_report_ul">
+              <li class="list_report_li">
+                {{ taskObj.report_msg || "暂无任务汇报" }}
+              </li>
+            </ul>
+          </div>
+        </el-col>
+
+        <!-- 签到信息 -->
+        <!-- <el-col :span="24">
+          <div class="list_box">
             <div class="list_tlt">签到信息</div>
 
             <ul class="list_ul">
@@ -89,13 +110,32 @@
               </li>
             </ul>
           </div>
-        </el-col>
+        </el-col> -->
 
         <!-- 任务填报信息 -->
-        <el-col :span="24" v-if="taskObj.task_type == '有害生物监测'">
+        <el-col :span="24">
           <div class="list_box">
-            <div class="list_tlt">任务填报信息</div>
-            <ul class="list_table_ul">
+            <div class="list_tlt_box">
+              <div class="list_tlts" @click="tabtask(0)">
+                <p>签到信息</p>
+                <p class="list_tlts_p" v-if="taskindex == 0"></p>
+              </div>
+              <div
+                class="list_tlts_dian"
+                v-if="taskObj.task_type == '有害生物监测'"
+              >
+                ●
+              </div>
+              <div
+                class="list_tlts"
+                @click="tabtask(1)"
+                v-if="taskObj.task_type == '有害生物监测'"
+              >
+                <p>任务填报信息</p>
+                <p class="list_tlts_p" v-if="taskindex == 1"></p>
+              </div>
+            </div>
+            <ul class="list_table_ul"  v-if="taskindex == 1">
               <li class="list_li">
                 <el-table :data="tableData" stripe style="width: 100%">
                   <el-table-column prop="trap_number" label="设备编号">
@@ -123,19 +163,70 @@
                 </el-table>
               </li>
             </ul>
-          </div>
-        </el-col>
-
-        <!-- 任务汇报 -->
-        <el-col :span="24">
-          <div class="list_box">
-            <div class="list_tlt">任务汇报</div>
-
-            <ul class="list_report_ul">
-              <li class="list_report_li">
-                {{ taskObj.report_msg || "暂无任务汇报" }}
-              </li>
-            </ul>
+            <div class="clockinbox" v-show="taskindex == 0">
+              <div class="clock_item">
+                <p v-if="activities.length == 0">暂无打卡记录</p>
+                <el-timeline>
+                  <el-timeline-item
+                    v-for="(activity, index) in activities"
+                    :key="index"
+                    :icon="activity.icon"
+                    :type="activity.type"
+                    :color="activity.color"
+                    :size="activity.size"
+                    :timestamp="activity.timestamp"
+                  >
+                    <div class="clock_item_timeline">
+                      <p class="timeline_title">{{ activity.content }}</p>
+                      <div class="timeline_imglist">
+                        <img
+                          v-for="(item, index) in activity.arrlist"
+                          :key="index"
+                          :src="$deriveData + item"
+                          alt=""
+                          v-viewer
+                        />
+                      </div>
+                      <p class="timeline_text">{{ activity.text }}</p>
+                    </div>
+                  </el-timeline-item>
+                </el-timeline>
+              </div>
+              <div class="track_item">
+                <div class="track_item_ser">
+                  <div class="track_item_ser_left">
+                    <el-checkbox
+                      v-model="checked1"
+                      size="mini"
+                      label="展示面积"
+                    ></el-checkbox>
+                    <el-button
+                      type="info"
+                      size="mini"
+                      @click="playtrack(0)"
+                      style="margin-left: 15px"
+                      :disabled="btndisabled"
+                      >播放轨迹</el-button
+                    >
+                  </div>
+                  <div class="track_item_ser_right">
+                    <div class="track_item_ser_right_item">
+                      <img src="../../../static/images/warning/1.png" alt="" />
+                      <p>监测点</p>
+                    </div>
+                    <div class="track_item_ser_right_item">
+                      <img src="../../../static/images/warning/2.png" alt="" />
+                      <p>诱捕器</p>
+                    </div>
+                    <div class="track_item_ser_right_item">
+                      <img src="../../../static/images/warning/3.png" alt="" />
+                      <p>打卡点</p>
+                    </div>
+                  </div>
+                </div>
+                <div class="track_item_map" id="mapContainer2"></div>
+              </div>
+            </div>
           </div>
         </el-col>
       </el-row>
@@ -212,7 +303,7 @@
             class="avatar"
             v-for="(item, index) in ruleForm2.img"
             :key="index"
-          > 
+          >
             <div class="delbox" @click="delimg(index)">
               <i class="el-icon-delete"></i>
             </div>
@@ -277,6 +368,18 @@ export default {
       submitBtn: false, // 防止弹框确定按钮重复请求
       //监督图片
       fileList: [],
+      //二期
+      taskindex: 0,
+      //轨迹地图
+      map: null,
+      trackmarker: [],
+      lineArr: [],
+      checked1: true,
+      polyline2: [],
+      pos_icon_pserson: null,
+      //签到信息
+      activities: [],
+      btndisabled: false,
     };
   },
   //监听属性 类似于data概念
@@ -301,6 +404,35 @@ export default {
         this.superviseSubmitForm("ruleForm2");
       }
     },
+     checked1(val) {
+      if (val) {
+        for (var i = 0; i < this.lineArr.length; i++) {
+          var polyline2 = new AMap.Polyline({
+            map: this.map,
+            path: this.lineArr[i],
+            isOutline: true,
+            outlineColor: "#ED7119",
+            borderWeight: 10,
+            strokeColor: "#3AD00C",
+            strokeOpacity: 0.6,
+            strokeWeight: 6,
+            // 折线样式还支持 'dashed'
+            strokeStyle: "solid",
+            // strokeStyle是dashed时有效
+            strokeDasharray: [10, 5],
+            lineJoin: "round",
+            lineCap: "round",
+            zIndex: 50,
+          });
+          this.polyline2.push(polyline2);
+        }
+      } else {
+        for (var i = 0; i < this.polyline2.length; i++) {
+          this.map.remove(this.polyline2[i]);
+        }
+        this.polyline2 = []
+      }
+    },
   },
   //方法集合
   methods: {
@@ -327,10 +459,35 @@ export default {
         .then((res) => {
           if (res.data.data) {
             var data = res.data.data;
-            data.img_list = JSON.parse(data.img_list);
+            // data.img_list = JSON.parse(data.img_list);
             this.taskObj = data;
+            this.activities = [];
+            for (var i = 0; i < this.taskObj.clock_in_list.length; i++) {
+              var obj = {
+                content: this.taskObj.clock_in_list[i].address,
+                timestamp: this.taskObj.clock_in_list[i].create_time,
+                color: "#409eff",
+                text: this.taskObj.clock_in_list[i].message,
+                arrlist: [],
+              };
+              obj.arrlist = this.taskObj.clock_in_list[i].img_list;
+              this.activities.push(obj);
+            }
+            this.lineArr = [];
+            for (var i = 0; i < this.taskObj.walk_lnglat_list.length; i++) {
+              var lnglat = this.taskObj.walk_lnglat_list[i];
+              var arr = [];
+              for (var j = 0; j < lnglat.length; j++) {
+                arr.push([Number(lnglat[j].lng), Number(lnglat[j].lat)]);
+              }
+              this.lineArr.push(arr);
+            }
+            console.log(this.taskObj);
             this.tableData = data.trap_record_list;
           }
+          this.$nextTick(() => {
+            this.initmap();
+          });
           this.loading = false;
         })
         .catch((err) => {
@@ -458,9 +615,152 @@ export default {
       this.ruleForm2.desc = ""; // 监督情况
       this.ruleForm2.img = [];
     },
-    delimg(index){
-      this.ruleForm2.img.splice(index,1)
-    }
+    delimg(index) {
+      this.ruleForm2.img.splice(index, 1);
+    },
+    //二期
+    tabtask(index) {
+      this.taskindex = index;
+    },
+    initmap() {
+      var map = new AMap.Map(document.getElementById("mapContainer2"), {
+        center: [114.052758, 22.545817],
+        resizeEnable: true,
+        zoom: 10,
+        lang: "en",
+        mapStyle: "amap://styles/fresh",
+        layers: [],
+      });
+      AMap.plugin(["AMap.ToolBar", "AMap.Geocoder"], () => {
+        map.addControl(new AMap.ToolBar());
+        this.geocoder = new AMap.Geocoder({
+          city: "全国",
+          radius: 1000,
+        });
+      });
+      AMap.plugin("AMap.MoveAnimation", function () {});
+      this.map = map;
+      for (var i = 0; i < this.lineArr.length; i++) {
+        this.inittrack(this.lineArr[i]);
+      }
+      for (var i = 0; i < this.taskObj.check_point_lnglat_list.length; i++) {
+        var data = this.taskObj.check_point_lnglat_list[i];
+        this.setmak(1, [Number(data.lng), Number(data.lat)]);
+      }
+      for (var i = 0; i < this.taskObj.trap_lnglat_list.length; i++) {
+        var data = this.taskObj.trap_lnglat_list[i];
+        this.setmak(2, [Number(data.lng), Number(data.lat)]);
+      }
+      for (var i = 0; i < this.taskObj.clock_in_lnglat_list.length; i++) {
+        var data = this.taskObj.clock_in_lnglat_list[i];
+        this.setmak(3, [Number(data.lng), Number(data.lat)]);
+      }
+      this.pos_icon_pserson = new AMap.Icon({
+        // 图标尺寸
+        size: new AMap.Size(44, 42),
+        // 图标的取图地址
+        image: "../../../static/images/warning/person1.png",
+        // 图标所用图片大小
+        imageSize: new AMap.Size(44, 42),
+      });
+      if (this.lineArr[0]) {
+        this.trackmarker = new AMap.Marker({
+          map: this.map,
+          position: this.lineArr[0][0],
+          icon: this.pos_icon_pserson,
+          offset: new AMap.Pixel(-22, -36),
+        });
+      }
+    },
+    setmak(index, data) {
+      // console.log(data);
+      var pos_icon = new AMap.Icon({
+        // 图标尺寸
+        size: new AMap.Size(18, 22),
+        // 图标的取图地址
+        image: "../../../static/images/warning/" + index + ".png",
+        // 图标所用图片大小
+        imageSize: new AMap.Size(18, 22),
+      });
+      var marker = new AMap.Marker({
+        position: data,
+        offset: new AMap.Pixel(-10, -10),
+        icon: pos_icon, // 添加 Icon 图标 URL
+        title: "设备标点",
+      });
+      this.map.add(marker);
+    },
+    //渲染轨迹图
+    inittrack(arrlist) {
+      console.log(arrlist);
+      if (this.checked1) {
+        var polyline2 = new AMap.Polyline({
+          map: this.map,
+          path: arrlist,
+          isOutline: true,
+          outlineColor: "#ED7119",
+          borderWeight: 10,
+          strokeColor: "#3AD00C",
+          strokeOpacity: 0.6,
+          strokeWeight: 6,
+          // 折线样式还支持 'dashed'
+          strokeStyle: "solid",
+          // strokeStyle是dashed时有效
+          strokeDasharray: [10, 5],
+          lineJoin: "round",
+          lineCap: "round",
+          zIndex: 50,
+        });
+        this.polyline2.push(polyline2);
+      }
+      var polyline = new AMap.Polyline({
+        map: this.map,
+        path: arrlist,
+        showDir: true,
+        strokeColor: "#3AD00C", //线颜色
+        strokeOpacity: 1, //线透明度
+        strokeWeight: 6, //线宽
+        zIndex: 51,
+        // strokeStyle: "solid"  //线样式
+      });
+      var passedPolyline = new AMap.Polyline({
+        map: this.map,
+        strokeColor: "red", //线颜色
+        strokeWeight: 6, //线宽
+      });
+      this.map.setFitView();
+    },
+    //播放轨迹
+    playtrack(index) {
+      this.btndisabled = true
+      if (this.trackmarker) {
+        this.map.remove(this.trackmarker);
+      }
+      // console.log(index);
+      this.trackmarker = new AMap.Marker({
+        map: this.map,
+        position: this.lineArr[index][0],
+        icon: this.pos_icon_pserson,
+        offset: new AMap.Pixel(-22, -36),
+      });
+      this.trackmarker.moveAlong(this.lineArr[index], {
+        // 每一段的时长
+        duration: 500, //可根据实际采集时间间隔设置
+        // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
+        autoRotation: false,
+      });
+      this.trackmarker.on("movealong", (e) => {
+        index++;
+        if (index == this.lineArr.length || index > this.lineArr.length) {
+          this.btndisabled = false
+          return false;
+        } else {
+          this.map.remove(this.trackmarker);
+          this.playtrack(index);
+        }
+        // console.log("结束");
+      });
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）z
   created() {},
@@ -487,9 +787,42 @@ export default {
     .list_tlt {
       display: flex;
       justify-content: space-between;
-      width: 95%;
+      // width: 95%;
       margin: 0 auto;
       font-size: 20px;
+      .list_tlt_text {
+        width: 80px;
+        // margin-left: 2.5%;
+        font-size: 20px;
+        .list_tlt_p {
+          width: 50%;
+          margin: 5px auto 0;
+          height: 3px;
+          background-color: #1b76ff;
+          border-radius: 3px;
+        }
+      }
+    }
+    .list_tlt_box {
+      display: flex;
+      width: 100%;
+      margin: 0 auto;
+      .list_tlts {
+        font-size: 20px;
+        margin-right: 15px;
+        .list_tlts_p {
+          width: 50%;
+          margin: 5px auto 0;
+          height: 3px;
+          background-color: #1b76ff;
+          border-radius: 3px;
+        }
+      }
+      .list_tlts_dian {
+        margin-right: 15px;
+        font-size: 20px;
+        color: #e1eaf4;
+      }
     }
 
     .list_ul {
@@ -532,7 +865,7 @@ export default {
     // 任务填报信息
     .list_table_ul {
       margin: 20px 0 0 0;
-      padding: 20px 40px 20px 40px;
+      // padding: 20px 40px 20px 40px;
       // background: #f6f8fa;
       .list_li {
         display: flex;
@@ -545,6 +878,82 @@ export default {
         }
       }
     }
+    .clockinbox {
+      width: 100%;
+      height: 588px;
+      display: flex;
+      justify-content: space-between;
+      margin-top: 20px;
+      .clock_item {
+        width: 49%;
+        height: 588px;
+        padding: 10px;
+        box-sizing: border-box;
+        overflow-y: auto;
+        .clock_item_timeline {
+          .timeline_title {
+            font-size: 14px;
+            color: #409eff;
+          }
+          .timeline_imglist {
+            display: flex;
+            margin: 10px 0;
+            img {
+              width: 100px;
+              margin-right: 10px;
+            }
+          }
+          .timeline_text {
+            font-size: 14px;
+          }
+        }
+      }
+      .track_item {
+        width: 49%;
+        height: 588px;
+        padding: 10px;
+        box-sizing: border-box;
+        .track_item_ser {
+          display: flex;
+          justify-content: space-between;
+          .track_item_ser_right {
+            display: flex;
+            .track_item_ser_right_item {
+              display: flex;
+              margin-left: 20px;
+              img {
+                width: 18px;
+                height: 22px;
+                margin-top: 3px;
+              }
+              p {
+                font-size: 14px;
+                margin-left: 10px;
+                line-height: 28px;
+              }
+            }
+          }
+        }
+        /deep/.el-button--info {
+          background-color: #409eff;
+          border-color: #409eff;
+        }
+        .track_item_map {
+          width: 100%;
+          margin-top: 10px;
+          height: calc(100% - 38px);
+          /deep/.amap-logo {
+            display: none !important;
+          }
+          /deep/.amap-copyright {
+            display: none !important;
+          }
+          /deep/.amap-controls {
+            display: none !important;
+          }
+        }
+      }
+    }
 
     // 任务汇报
     .list_report_ul {
@@ -605,7 +1014,7 @@ export default {
       height: 102px;
       width: 102px;
     }
-    .delbox{
+    .delbox {
       height: 102px;
       width: 102px;
       background-color: rgba(0, 0, 0, 0.4);
@@ -615,14 +1024,14 @@ export default {
       text-align: center;
       line-height: 102px;
       display: none;
-      i{
+      i {
         color: #fff;
         font-size: 20px;
       }
     }
   }
-  .avatar:hover{
-    .delbox{
+  .avatar:hover {
+    .delbox {
       display: block;
     }
   }

minggao/src/page/commandCenter/superviseDetails.vue

@@ -7,7 +7,8 @@
         <el-col :span="24">
           <div class="list_box">
             <div class="list_tlt">
-              <span>监督信息</span>
+              <p>监督信息</p>
+              <p class="list_tlt_p"></p>
             </div>
 
             <ul class="list_ul">
@@ -55,7 +56,13 @@
                 <div class="list_div">
                   <span class="list_div_tlt">监督图片：</span>
                   <div class="imgbox">
-                    <img v-viewer v-for="item,index in taskObj.supervisor_imglist" :key="index" :src="$deriveData+item" alt="">
+                    <img
+                      v-viewer
+                      v-for="(item, index) in taskObj.supervisor_imglist"
+                      :key="index"
+                      :src="$deriveData + item"
+                      alt=""
+                    />
                   </div>
                 </div>
               </li>
@@ -67,7 +74,8 @@
         <el-col :span="24">
           <div class="list_box">
             <div class="list_tlt">
-              <span>任务信息</span>
+              <p>任务信息</p>
+              <p class="list_tlt_p"></p>
             </div>
 
             <ul class="list_ul">
@@ -104,7 +112,11 @@
 
                 <div class="list_div">
                   <span class="list_div_tlt">实际处理人：</span>
-                  <span class="list_div_val">{{ taskObj.actual_operator==''?"无":taskObj.actual_operator }}</span>
+                  <span class="list_div_val">{{
+                    taskObj.actual_operator == ""
+                      ? "无"
+                      : taskObj.actual_operator
+                  }}</span>
                 </div>
 
                 <div class="list_div">
@@ -121,9 +133,24 @@
           </div>
         </el-col>
 
-        <!-- 签到信息 -->
+        <!-- 任务汇报 -->
         <el-col :span="24">
           <div class="list_box">
+            <div class="list_tlt">
+              <p>任务汇报</p>
+              <p class="list_tlt_p"></p>
+            </div>
+            <ul class="list_report_ul">
+              <li class="list_report_li">
+                {{ taskObj.report_msg || "暂无任务汇报" }}
+              </li>
+            </ul>
+          </div>
+        </el-col>
+
+        <!-- 签到信息 -->
+        <!-- <el-col :span="24">
+          <div class="list_box">
             <div class="list_tlt">签到信息</div>
 
             <ul class="list_ul">
@@ -151,13 +178,32 @@
               </li>
             </ul>
           </div>
-        </el-col>
+        </el-col> -->
 
         <!-- 任务填报信息 -->
-        <el-col :span="24" v-if="taskObj.task_type == '有害生物监测'">
+        <el-col :span="24">
           <div class="list_box">
-            <div class="list_tlt">任务填报信息</div>
-            <ul class="list_table_ul">
+            <div class="list_tlt_box">
+              <div class="list_tlts" @click="tabtask(0)">
+                <p>签到信息</p>
+                <p class="list_tlts_p" v-if="taskindex == 0"></p>
+              </div>
+              <div
+                class="list_tlts_dian"
+                v-if="taskObj.task_type == '有害生物监测'"
+              >
+                ●
+              </div>
+              <div
+                class="list_tlts"
+                @click="tabtask(1)"
+                v-if="taskObj.task_type == '有害生物监测'"
+              >
+                <p>任务填报信息</p>
+                <p class="list_tlts_p" v-if="taskindex == 1"></p>
+              </div>
+            </div>
+            <ul class="list_table_ul" v-if="taskindex == 1">
               <li class="list_li">
                 <el-table :data="tableData" stripe style="width: 100%">
                   <el-table-column prop="trap_number" label="设备编号">
@@ -185,19 +231,70 @@
                 </el-table>
               </li>
             </ul>
-          </div>
-        </el-col>
-
-        <!-- 任务汇报 -->
-        <el-col :span="24">
-          <div class="list_box">
-            <div class="list_tlt">任务汇报</div>
-
-            <ul class="list_report_ul">
-              <li class="list_report_li">
-                {{ taskObj.report_msg || "暂无任务汇报" }}
-              </li>
-            </ul>
+            <div class="clockinbox" v-show="taskindex == 0">
+              <div class="clock_item">
+                <p v-if="activities.length == 0">暂无打卡记录</p>
+                <el-timeline>
+                  <el-timeline-item
+                    v-for="(activity, index) in activities"
+                    :key="index"
+                    :icon="activity.icon"
+                    :type="activity.type"
+                    :color="activity.color"
+                    :size="activity.size"
+                    :timestamp="activity.timestamp"
+                  >
+                    <div class="clock_item_timeline">
+                      <p class="timeline_title">{{ activity.content }}</p>
+                      <div class="timeline_imglist">
+                        <img
+                          v-for="(item, index) in activity.arrlist"
+                          :key="index"
+                          :src="$deriveData + item"
+                          alt=""
+                          v-viewer
+                        />
+                      </div>
+                      <p class="timeline_text">{{ activity.text }}</p>
+                    </div>
+                  </el-timeline-item>
+                </el-timeline>
+              </div>
+              <div class="track_item">
+                <div class="track_item_ser">
+                  <div class="track_item_ser_left">
+                    <el-checkbox
+                      v-model="checked1"
+                      size="mini"
+                      label="展示面积"
+                    ></el-checkbox>
+                    <el-button
+                      type="info"
+                      size="mini"
+                      @click="playtrack(0)"
+                      style="margin-left: 15px"
+                      :disabled="btndisabled"
+                      >播放轨迹</el-button
+                    >
+                  </div>
+                  <div class="track_item_ser_right">
+                    <div class="track_item_ser_right_item">
+                      <img src="../../../static/images/warning/1.png" alt="" />
+                      <p>监测点</p>
+                    </div>
+                    <div class="track_item_ser_right_item">
+                      <img src="../../../static/images/warning/2.png" alt="" />
+                      <p>诱捕器</p>
+                    </div>
+                    <div class="track_item_ser_right_item">
+                      <img src="../../../static/images/warning/3.png" alt="" />
+                      <p>打卡点</p>
+                    </div>
+                  </div>
+                </div>
+                <div class="track_item_map" id="mapContainer2"></div>
+              </div>
+            </div>
           </div>
         </el-col>
       </el-row>
@@ -226,7 +323,7 @@
 </template>
 
 <script>
-import DOMIN from "../../util/server"
+import DOMIN from "../../util/server";
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: {},
@@ -250,8 +347,20 @@ export default {
         "1、今天做了检测完成任务了没有",
         "2、途中发生了什么事情",
         "3、对这次任务有什么总结",
-        "4、我对这次任务有哪些建议"
-      ]
+        "4、我对这次任务有哪些建议",
+      ],
+      //二期
+      taskindex: 0,
+      //轨迹地图
+      map: null,
+      trackmarker: [],
+      lineArr: [],
+      checked1: true,
+      polyline2: [],
+      pos_icon_pserson: null,
+      //签到信息
+      activities: [],
+      btndisabled: false,
     };
   },
   //监听属性 类似于data概念
@@ -264,12 +373,41 @@ export default {
         this.fullHeight = val;
         this.timer = true;
         let that = this;
-        setTimeout(function() {
+        setTimeout(function () {
           //防止过度调用监测事件，导致卡顿
           that.timer = false;
         }, 400);
       }
-    }
+    },
+    checked1(val) {
+      if (val) {
+        for (var i = 0; i < this.lineArr.length; i++) {
+          var polyline2 = new AMap.Polyline({
+            map: this.map,
+            path: this.lineArr[i],
+            isOutline: true,
+            outlineColor: "#ED7119",
+            borderWeight: 10,
+            strokeColor: "#3AD00C",
+            strokeOpacity: 0.6,
+            strokeWeight: 6,
+            // 折线样式还支持 'dashed'
+            strokeStyle: "solid",
+            // strokeStyle是dashed时有效
+            strokeDasharray: [10, 5],
+            lineJoin: "round",
+            lineCap: "round",
+            zIndex: 50,
+          });
+          this.polyline2.push(polyline2);
+        }
+      } else {
+        for (var i = 0; i < this.polyline2.length; i++) {
+          this.map.remove(this.polyline2[i]);
+        }
+        this.polyline2 = []
+      }
+    },
   },
   //方法集合
   methods: {
@@ -290,20 +428,47 @@ export default {
         method: "POST",
         url: "/api/api_gateway?method=control_center.task.task_info",
         data: this.qs.stringify({
-          task_id: this.$route.query.id
-        })
+          task_id: this.$route.query.id,
+        }),
       })
-        .then(res => {
+        .then((res) => {
           if (res.data.data) {
             var data = res.data.data;
-            data.img_list = JSON.parse(data.img_list);
+            // data.img_list = JSON.parse(data.img_list);
             this.taskObj = data;
-            this.taskObj.supervisor_imglist = JSON.parse(this.taskObj.supervisor_imglist)
+            this.taskObj.supervisor_imglist = JSON.parse(
+              this.taskObj.supervisor_imglist
+            );
+            this.activities = [];
+            for (var i = 0; i < this.taskObj.clock_in_list.length; i++) {
+              var obj = {
+                content: this.taskObj.clock_in_list[i].address,
+                timestamp: this.taskObj.clock_in_list[i].create_time,
+                color: "#409eff",
+                text: this.taskObj.clock_in_list[i].message,
+                arrlist: [],
+              };
+              obj.arrlist = this.taskObj.clock_in_list[i].img_list;
+              this.activities.push(obj);
+            }
+            this.lineArr = [];
+            for (var i = 0; i < this.taskObj.walk_lnglat_list.length; i++) {
+              var lnglat = this.taskObj.walk_lnglat_list[i];
+              var arr = [];
+              for (var j = 0; j < lnglat.length; j++) {
+                arr.push([Number(lnglat[j].lng), Number(lnglat[j].lat)]);
+              }
+              this.lineArr.push(arr);
+            }
+            console.log(this.taskObj);
             this.tableData = data.trap_record_list;
           }
+          this.$nextTick(() => {
+            this.initmap();
+          });
           this.loading = false;
         })
-        .catch(err => {
+        .catch((err) => {
           this.loading = false;
           console.log(err);
         });
@@ -314,7 +479,149 @@ export default {
       this.titleData = "设备编号：" + data.trap_number;
       this.insectList = data.pest_list;
       this.dialogVisible = true;
-    }
+    },
+    tabtask(index) {
+      this.taskindex = index;
+    },
+    initmap() {
+      var map = new AMap.Map(document.getElementById("mapContainer2"), {
+        center: [114.052758, 22.545817],
+        resizeEnable: true,
+        zoom: 10,
+        lang: "en",
+        mapStyle: "amap://styles/fresh",
+        layers: [],
+      });
+      AMap.plugin(["AMap.ToolBar", "AMap.Geocoder"], () => {
+        map.addControl(new AMap.ToolBar());
+        this.geocoder = new AMap.Geocoder({
+          city: "全国",
+          radius: 1000,
+        });
+      });
+      AMap.plugin("AMap.MoveAnimation", function () {});
+      this.map = map;
+      for (var i = 0; i < this.lineArr.length; i++) {
+        this.inittrack(this.lineArr[i]);
+      }
+      for (var i = 0; i < this.taskObj.check_point_lnglat_list.length; i++) {
+        var data = this.taskObj.check_point_lnglat_list[i];
+        this.setmak(1, [Number(data.lng), Number(data.lat)]);
+      }
+      for (var i = 0; i < this.taskObj.trap_lnglat_list.length; i++) {
+        var data = this.taskObj.trap_lnglat_list[i];
+        this.setmak(2, [Number(data.lng), Number(data.lat)]);
+      }
+      for (var i = 0; i < this.taskObj.clock_in_lnglat_list.length; i++) {
+        var data = this.taskObj.clock_in_lnglat_list[i];
+        this.setmak(3, [Number(data.lng), Number(data.lat)]);
+      }
+      this.pos_icon_pserson = new AMap.Icon({
+        // 图标尺寸
+        size: new AMap.Size(44, 42),
+        // 图标的取图地址
+        image: "../../../static/images/warning/person1.png",
+        // 图标所用图片大小
+        imageSize: new AMap.Size(44, 42),
+      });
+      if (this.lineArr[0]) {
+        this.trackmarker = new AMap.Marker({
+          map: this.map,
+          position: this.lineArr[0][0],
+          icon: this.pos_icon_pserson,
+          offset: new AMap.Pixel(-22, -36),
+        });
+      }
+    },
+    setmak(index, data) {
+      // console.log(data);
+      var pos_icon = new AMap.Icon({
+        // 图标尺寸
+        size: new AMap.Size(18, 22),
+        // 图标的取图地址
+        image: "../../../static/images/warning/" + index + ".png",
+        // 图标所用图片大小
+        imageSize: new AMap.Size(18, 22),
+      });
+      var marker = new AMap.Marker({
+        position: data,
+        offset: new AMap.Pixel(-10, -10),
+        icon: pos_icon, // 添加 Icon 图标 URL
+        title: "设备标点",
+      });
+      this.map.add(marker);
+    },
+    //渲染轨迹图
+    inittrack(arrlist) {
+      console.log(arrlist);
+      if (this.checked1) {
+        var polyline2 = new AMap.Polyline({
+          map: this.map,
+          path: arrlist,
+          isOutline: true,
+          outlineColor: "#ED7119",
+          borderWeight: 10,
+          strokeColor: "#3AD00C",
+          strokeOpacity: 0.6,
+          strokeWeight: 6,
+          // 折线样式还支持 'dashed'
+          strokeStyle: "solid",
+          // strokeStyle是dashed时有效
+          strokeDasharray: [10, 5],
+          lineJoin: "round",
+          lineCap: "round",
+          zIndex: 50,
+        });
+        this.polyline2.push(polyline2);
+      }
+      var polyline = new AMap.Polyline({
+        map: this.map,
+        path: arrlist,
+        showDir: true,
+        strokeColor: "#3AD00C", //线颜色
+        strokeOpacity: 1, //线透明度
+        strokeWeight: 6, //线宽
+        zIndex: 51,
+        // strokeStyle: "solid"  //线样式
+      });
+      var passedPolyline = new AMap.Polyline({
+        map: this.map,
+        strokeColor: "red", //线颜色
+        strokeWeight: 6, //线宽
+      });
+      this.map.setFitView();
+    },
+    //播放轨迹
+    playtrack(index) {
+      this.btndisabled = true;
+      if (this.trackmarker) {
+        this.map.remove(this.trackmarker);
+      }
+      // console.log(index);
+      this.trackmarker = new AMap.Marker({
+        map: this.map,
+        position: this.lineArr[index][0],
+        icon: this.pos_icon_pserson,
+        offset: new AMap.Pixel(-22, -36),
+      });
+      this.trackmarker.moveAlong(this.lineArr[index], {
+        // 每一段的时长
+        duration: 500, //可根据实际采集时间间隔设置
+        // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
+        autoRotation: false,
+      });
+      this.trackmarker.on("movealong", (e) => {
+        index++;
+        if (index == this.lineArr.length || index > this.lineArr.length) {
+          this.btndisabled = false;
+          return false;
+        } else {
+          this.map.remove(this.trackmarker);
+          this.playtrack(index);
+        }
+        // console.log("结束");
+      });
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -330,7 +637,7 @@ export default {
   updated() {}, //生命周期 - 更新之后
   beforeDestroy() {}, //生命周期 - 销毁之前
   destroyed() {}, //生命周期 - 销毁完成
-  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
 <style lang="less" scoped>
@@ -339,11 +646,37 @@ export default {
   .list_box {
     margin: 0 0 20px 0;
     .list_tlt {
+      width: 80px;
+      // margin-left: 2.5%;
+      font-size: 20px;
+      .list_tlt_p {
+        width: 50%;
+        margin: 5px auto 0;
+        height: 3px;
+        background-color: #1b76ff;
+        border-radius: 3px;
+      }
+    }
+    .list_tlt_box {
       display: flex;
-      justify-content: space-between;
-      width: 95%;
+      width: 100%;
       margin: 0 auto;
-      font-size: 20px;
+      .list_tlts {
+        font-size: 20px;
+        margin-right: 15px;
+        .list_tlts_p {
+          width: 50%;
+          margin: 5px auto 0;
+          height: 3px;
+          background-color: #1b76ff;
+          border-radius: 3px;
+        }
+      }
+      .list_tlts_dian {
+        margin-right: 15px;
+        font-size: 20px;
+        color: #e1eaf4;
+      }
     }
 
     .list_ul {
@@ -359,10 +692,10 @@ export default {
           font-size: 14px;
           color: #333333;
           display: flex;
-          .imgbox{
+          .imgbox {
             display: flex;
             flex-wrap: wrap;
-            img{
+            img {
               width: 100px;
               height: 100px;
               margin-left: 10px;
@@ -410,6 +743,83 @@ export default {
       }
     }
 
+    .clockinbox {
+      width: 100%;
+      height: 588px;
+      display: flex;
+      justify-content: space-between;
+      margin-top: 20px;
+      .clock_item {
+        width: 49%;
+        height: 588px;
+        padding: 10px;
+        box-sizing: border-box;
+        overflow-y: auto;
+        .clock_item_timeline {
+          .timeline_title {
+            font-size: 14px;
+            color: #409eff;
+          }
+          .timeline_imglist {
+            display: flex;
+            margin: 10px 0;
+            img {
+              width: 100px;
+              margin-right: 10px;
+            }
+          }
+          .timeline_text {
+            font-size: 14px;
+          }
+        }
+      }
+      .track_item {
+        width: 49%;
+        height: 588px;
+        padding: 10px;
+        box-sizing: border-box;
+        .track_item_ser {
+          display: flex;
+          justify-content: space-between;
+          .track_item_ser_right {
+            display: flex;
+            .track_item_ser_right_item {
+              display: flex;
+              margin-left: 20px;
+              img {
+                width: 18px;
+                height: 22px;
+                margin-top: 3px;
+              }
+              p {
+                font-size: 14px;
+                margin-left: 10px;
+                line-height: 28px;
+              }
+            }
+          }
+        }
+        /deep/.el-button--info {
+          background-color: #409eff;
+          border-color: #409eff;
+        }
+        .track_item_map {
+          width: 100%;
+          margin-top: 10px;
+          height: calc(100% - 38px);
+          /deep/.amap-logo {
+            display: none !important;
+          }
+          /deep/.amap-copyright {
+            display: none !important;
+          }
+          /deep/.amap-controls {
+            display: none !important;
+          }
+        }
+      }
+    }
+
     // 任务汇报
     .list_report_ul {
       margin: 20px 0 0 0;

minggao/src/page/commandCenter/taskRegulatorDetails.vue

@@ -6,10 +6,11 @@
         <!-- 任务信息 -->
         <el-col :span="24">
           <div class="list_box">
+            <!-- <span class="list_tlt">任务信息</span> -->
             <div class="list_tlt">
-              <span>任务信息</span>
+              <p>任务信息</p>
+              <p class="list_tlt_p"></p>
             </div>
-
             <ul class="list_ul">
               <li class="list_li">
                 <div class="list_div">
@@ -54,17 +55,19 @@
         </el-col>
 
         <!-- 签到信息 -->
-        <el-col :span="24">
+        <!-- <el-col :span="24">
           <div class="list_box">
-            <div class="list_tlt">签到信息</div>
-
+            <div class="list_tlt">
+              <p>签到信息</p>
+              <p class="list_tlt_p"></p>
+            </div>
             <ul class="list_ul">
               <li class="list_sing_li">
                 <div class="list_sing_div">
-                  <p class="list_div_tlt" style="width:12%">签到图片：</p>
+                  <p class="list_div_tlt" style="width: 12%">签到图片：</p>
                   <p
                     v-if="taskObj.img_list.length !== 0"
-                    style="display: flex;width:88%;flex-wrap:wrap;"
+                    style="display: flex; width: 88%; flex-wrap: wrap"
                   >
                     <span
                       class="list_div_img"
@@ -86,13 +89,52 @@
               </li>
             </ul>
           </div>
+        </el-col> -->
+
+        <!-- 任务汇报 -->
+        <el-col :span="24">
+          <div class="list_box">
+            <div class="list_tlt">
+              <p>任务汇报</p>
+              <p class="list_tlt_p"></p>
+            </div>
+            <ul class="list_report_ul">
+              <!-- <li
+                class="list_report_li"
+                v-for="item in tabskObj.report_msg"
+                :key="item"
+              >
+                {{ item }}
+              </li> -->
+              <li class="list_report_li">{{ taskObj.report_msg || "暂无" }}</li>
+            </ul>
+          </div>
         </el-col>
 
         <!-- 任务填报信息 -->
-        <el-col :span="24" v-if="taskObj.task_type == '有害生物监测'">
+        <el-col :span="24">
           <div class="list_box">
-            <div class="list_tlt">任务填报信息</div>
-            <ul class="list_table_ul">
+            <div class="list_tlt_box">
+              <div class="list_tlts" @click="tabtask(0)">
+                <p>签到信息</p>
+                <p class="list_tlts_p" v-if="taskindex == 0"></p>
+              </div>
+              <div
+                class="list_tlts_dian"
+                v-if="taskObj.task_type == '有害生物监测'"
+              >
+                ●
+              </div>
+              <div
+                class="list_tlts"
+                @click="tabtask(1)"
+                v-if="taskObj.task_type == '有害生物监测'"
+              >
+                <p>任务填报信息</p>
+                <p class="list_tlts_p" v-if="taskindex == 1"></p>
+              </div>
+            </div>
+            <ul class="list_table_ul" v-if="taskindex == 1">
               <li class="list_li">
                 <el-table :data="tableData" stripe style="width: 100%">
                   <el-table-column prop="trap_number" label="设备编号">
@@ -106,7 +148,7 @@
                       <span
                         v-if="scope.row.report_status == '已登记'"
                         @click="examine(scope.row)"
-                        style="color: #409EFF; cursor: pointer;"
+                        style="color: #409eff; cursor: pointer"
                         >查看</span
                       >
                       <span v-else>{{ scope.row.report_status || "无" }}</span>
@@ -120,24 +162,70 @@
                 </el-table>
               </li>
             </ul>
-          </div>
-        </el-col>
-
-        <!-- 任务汇报 -->
-        <el-col :span="24">
-          <div class="list_box">
-            <div class="list_tlt">任务汇报</div>
-
-            <ul class="list_report_ul">
-              <!-- <li
-                class="list_report_li"
-                v-for="item in tabskObj.report_msg"
-                :key="item"
-              >
-                {{ item }}
-              </li> -->
-              <li class="list_report_li">{{ taskObj.report_msg || "暂无" }}</li>
-            </ul>
+            <div class="clockinbox" v-show="taskindex == 0">
+              <div class="clock_item">
+                <p v-if="activities.length == 0">暂无打卡记录</p>
+                <el-timeline>
+                  <el-timeline-item
+                    v-for="(activity, index) in activities"
+                    :key="index"
+                    :icon="activity.icon"
+                    :type="activity.type"
+                    :color="activity.color"
+                    :size="activity.size"
+                    :timestamp="activity.timestamp"
+                  >
+                    <div class="clock_item_timeline">
+                      <p class="timeline_title">{{ activity.content }}</p>
+                      <div class="timeline_imglist">
+                        <img
+                          v-for="(item, index) in activity.arrlist"
+                          :key="index"
+                          :src="$deriveData + item"
+                          alt=""
+                          v-viewer
+                        />
+                      </div>
+                      <p class="timeline_text">{{ activity.text }}</p>
+                    </div>
+                  </el-timeline-item>
+                </el-timeline>
+              </div>
+              <div class="track_item">
+                <div class="track_item_ser">
+                  <div class="track_item_ser_left">
+                    <el-checkbox
+                      v-model="checked1"
+                      size="mini"
+                      label="展示面积"
+                    ></el-checkbox>
+                    <el-button
+                      type="info"
+                      size="mini"
+                      @click="playtrack(0)"
+                      style="margin-left: 15px"
+                      :disabled="btndisabled"
+                      >播放轨迹</el-button
+                    >
+                  </div>
+                  <div class="track_item_ser_right">
+                    <div class="track_item_ser_right_item">
+                      <img src="../../../static/images/warning/1.png" alt="" />
+                      <p>监测点</p>
+                    </div>
+                    <div class="track_item_ser_right_item">
+                      <img src="../../../static/images/warning/2.png" alt="" />
+                      <p>诱捕器</p>
+                    </div>
+                    <div class="track_item_ser_right_item">
+                      <img src="../../../static/images/warning/3.png" alt="" />
+                      <p>打卡点</p>
+                    </div>
+                  </div>
+                </div>
+                <div class="track_item_map" id="mapContainer2"></div>
+              </div>
+            </div>
           </div>
         </el-col>
       </el-row>
@@ -187,9 +275,20 @@ export default {
         "1、今天做了检测完成任务了没有",
         "2、途中发生了什么事情",
         "3、对这次任务有什么总结",
-        "4、我对这次任务有哪些建议"
+        "4、我对这次任务有哪些建议",
       ],
-      loading: false // 加载
+      loading: false, // 加载
+      taskindex: 0,
+      //轨迹地图
+      map: null,
+      trackmarker: [],
+      lineArr: [],
+      checked1: true,
+      polyline2: [],
+      pos_icon_pserson: null,
+      //签到信息
+      activities: [],
+      btndisabled:false
     };
   },
   //监听属性 类似于data概念
@@ -202,12 +301,41 @@ export default {
         this.fullHeight = val;
         this.timer = true;
         let that = this;
-        setTimeout(function() {
+        setTimeout(function () {
           //防止过度调用监测事件，导致卡顿
           that.timer = false;
         }, 400);
       }
-    }
+    },
+    checked1(val) {
+      if (val) {
+        for (var i = 0; i < this.lineArr.length; i++) {
+          var polyline2 = new AMap.Polyline({
+            map: this.map,
+            path: this.lineArr[i],
+            isOutline: true,
+            outlineColor: "#ED7119",
+            borderWeight: 10,
+            strokeColor: "#3AD00C",
+            strokeOpacity: 0.6,
+            strokeWeight: 6,
+            // 折线样式还支持 'dashed'
+            strokeStyle: "solid",
+            // strokeStyle是dashed时有效
+            strokeDasharray: [10, 5],
+            lineJoin: "round",
+            lineCap: "round",
+            zIndex: 50,
+          });
+          this.polyline2.push(polyline2);
+        }
+      } else {
+        for (var i = 0; i < this.polyline2.length; i++) {
+          this.map.remove(this.polyline2[i]);
+        }
+        this.polyline2 = []
+      }
+    },
   },
   //方法集合
   methods: {
@@ -228,19 +356,45 @@ export default {
         method: "POST",
         url: "/api/api_gateway?method=control_center.task.task_info",
         data: this.qs.stringify({
-          task_id: this.$route.query.id
-        })
+          task_id: this.$route.query.id,
+        }),
       })
-        .then(res => {
+        .then((res) => {
+          console.log(res);
           if (res.data.data) {
             var data = res.data.data;
-            data.img_list = JSON.parse(data.img_list);
+            // data.img_list = JSON.parse(data.img_list);
             this.taskObj = data;
+            this.activities = [];
+            for (var i = 0; i < this.taskObj.clock_in_list.length; i++) {
+              var obj = {
+                content: this.taskObj.clock_in_list[i].address,
+                timestamp: this.taskObj.clock_in_list[i].create_time,
+                color: "#409eff",
+                text: this.taskObj.clock_in_list[i].message,
+                arrlist: [],
+              };
+              obj.arrlist = this.taskObj.clock_in_list[i].img_list;
+              this.activities.push(obj);
+            }
+            this.lineArr = [];
+            for (var i = 0; i < this.taskObj.walk_lnglat_list.length; i++) {
+              var lnglat = this.taskObj.walk_lnglat_list[i];
+              var arr = [];
+              for (var j = 0; j < lnglat.length; j++) {
+                arr.push([Number(lnglat[j].lng), Number(lnglat[j].lat)]);
+              }
+              this.lineArr.push(arr);
+            }
+            console.log(this.taskObj);
             this.tableData = data.trap_record_list;
           }
+          this.$nextTick(() => {
+            this.initmap();
+          });
           this.loading = false;
         })
-        .catch(err => {
+        .catch((err) => {
           this.loading = false;
           console.log(err);
         });
@@ -251,7 +405,149 @@ export default {
       this.titleData = "设备编号：" + data.trap_number;
       this.insectList = data.pest_list;
       this.dialogVisible = true;
-    }
+    },
+    tabtask(index) {
+      this.taskindex = index;
+    },
+    initmap() {
+      var map = new AMap.Map(document.getElementById("mapContainer2"), {
+        center: [114.052758, 22.545817],
+        resizeEnable: true,
+        zoom: 10,
+        lang: "en",
+        mapStyle: "amap://styles/fresh",
+        layers: [],
+      });
+      AMap.plugin(["AMap.ToolBar", "AMap.Geocoder"], () => {
+        map.addControl(new AMap.ToolBar());
+        this.geocoder = new AMap.Geocoder({
+          city: "全国",
+          radius: 1000,
+        });
+      });
+      AMap.plugin("AMap.MoveAnimation", function () {});
+      this.map = map;
+      for (var i = 0; i < this.lineArr.length; i++) {
+        this.inittrack(this.lineArr[i]);
+      }
+      for (var i = 0; i < this.taskObj.check_point_lnglat_list.length; i++) {
+        var data = this.taskObj.check_point_lnglat_list[i];
+        this.setmak(1, [Number(data.lng), Number(data.lat)]);
+      }
+      for (var i = 0; i < this.taskObj.trap_lnglat_list.length; i++) {
+        var data = this.taskObj.trap_lnglat_list[i];
+        this.setmak(2, [Number(data.lng), Number(data.lat)]);
+      }
+      for (var i = 0; i < this.taskObj.clock_in_lnglat_list.length; i++) {
+        var data = this.taskObj.clock_in_lnglat_list[i];
+        this.setmak(3, [Number(data.lng), Number(data.lat)]);
+      }
+      this.pos_icon_pserson = new AMap.Icon({
+        // 图标尺寸
+        size: new AMap.Size(44, 42),
+        // 图标的取图地址
+        image: "../../../static/images/warning/person1.png",
+        // 图标所用图片大小
+        imageSize: new AMap.Size(44, 42),
+      });
+      if (this.lineArr[0]) {
+        this.trackmarker = new AMap.Marker({
+          map: this.map,
+          position: this.lineArr[0][0],
+          icon: this.pos_icon_pserson,
+          offset: new AMap.Pixel(-22, -36),
+        });
+      }
+    },
+    setmak(index, data) {
+      // console.log(data);
+      var pos_icon = new AMap.Icon({
+        // 图标尺寸
+        size: new AMap.Size(18, 22),
+        // 图标的取图地址
+        image: "../../../static/images/warning/" + index + ".png",
+        // 图标所用图片大小
+        imageSize: new AMap.Size(18, 22),
+      });
+      var marker = new AMap.Marker({
+        position: data,
+        offset: new AMap.Pixel(-10, -10),
+        icon: pos_icon, // 添加 Icon 图标 URL
+        title: "设备标点",
+      });
+      this.map.add(marker);
+    },
+    //渲染轨迹图
+    inittrack(arrlist) {
+      console.log(arrlist);
+      if (this.checked1) {
+        var polyline2 = new AMap.Polyline({
+          map: this.map,
+          path: arrlist,
+          isOutline: true,
+          outlineColor: "#ED7119",
+          borderWeight: 10,
+          strokeColor: "#3AD00C",
+          strokeOpacity: 0.6,
+          strokeWeight: 6,
+          // 折线样式还支持 'dashed'
+          strokeStyle: "solid",
+          // strokeStyle是dashed时有效
+          strokeDasharray: [10, 5],
+          lineJoin: "round",
+          lineCap: "round",
+          zIndex: 50,
+        });
+        this.polyline2.push(polyline2);
+      }
+      var polyline = new AMap.Polyline({
+        map: this.map,
+        path: arrlist,
+        showDir: true,
+        strokeColor: "#3AD00C", //线颜色
+        strokeOpacity: 1, //线透明度
+        strokeWeight: 6, //线宽
+        zIndex: 51,
+        // strokeStyle: "solid"  //线样式
+      });
+      var passedPolyline = new AMap.Polyline({
+        map: this.map,
+        strokeColor: "red", //线颜色
+        strokeWeight: 6, //线宽
+      });
+      this.map.setFitView();
+    },
+    //播放轨迹
+    playtrack(index) {
+      this.btndisabled = true
+      if (this.trackmarker) {
+        this.map.remove(this.trackmarker);
+      }
+      // console.log(index);
+      this.trackmarker = new AMap.Marker({
+        map: this.map,
+        position: this.lineArr[index][0],
+        icon: this.pos_icon_pserson,
+        offset: new AMap.Pixel(-22, -36),
+      });
+      this.trackmarker.moveAlong(this.lineArr[index], {
+        // 每一段的时长
+        duration: 500, //可根据实际采集时间间隔设置
+        // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
+        autoRotation: false,
+      });
+      this.trackmarker.on("movealong", (e) => {
+        index++;
+        if (index == this.lineArr.length || index > this.lineArr.length) {
+          this.btndisabled = false
+          return false;
+        } else {
+          this.map.remove(this.trackmarker);
+          this.playtrack(index);
+        }
+        // console.log("结束");
+      });
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -267,7 +563,7 @@ export default {
   updated() {}, //生命周期 - 更新之后
   beforeDestroy() {}, //生命周期 - 销毁之前
   destroyed() {}, //生命周期 - 销毁完成
-  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
 <style lang="less" scoped>
@@ -276,13 +572,38 @@ export default {
   .list_box {
     margin: 0 0 20px 0;
     .list_tlt {
+      width: 80px;
+      // margin-left: 2.5%;
+      font-size: 20px;
+      .list_tlt_p {
+        width: 50%;
+        margin: 5px auto 0;
+        height: 3px;
+        background-color: #1b76ff;
+        border-radius: 3px;
+      }
+    }
+    .list_tlt_box {
       display: flex;
-      justify-content: space-between;
-      width: 95%;
+      width: 100%;
       margin: 0 auto;
-      font-size: 20px;
+      .list_tlts {
+        font-size: 20px;
+        margin-right: 15px;
+        .list_tlts_p {
+          width: 50%;
+          margin: 5px auto 0;
+          height: 3px;
+          background-color: #1b76ff;
+          border-radius: 3px;
+        }
+      }
+      .list_tlts_dian {
+        margin-right: 15px;
+        font-size: 20px;
+        color: #e1eaf4;
+      }
     }
-
     .list_ul {
       margin: 20px 0 0 0;
       padding: 20px 40px 20px 40px;
@@ -323,8 +644,6 @@ export default {
     // 任务填报信息
     .list_table_ul {
       margin: 20px 0 0 0;
-      padding: 20px 40px 20px 40px;
-      // background: #f6f8fa;
       .list_li {
         display: flex;
         flex-wrap: wrap;
@@ -336,6 +655,82 @@ export default {
         }
       }
     }
+    .clockinbox {
+      width: 100%;
+      height: 588px;
+      display: flex;
+      justify-content: space-between;
+      margin-top: 20px;
+      .clock_item {
+        width: 49%;
+        height: 588px;
+        padding: 10px;
+        box-sizing: border-box;
+        overflow-y: auto;
+        .clock_item_timeline {
+          .timeline_title {
+            font-size: 14px;
+            color: #409eff;
+          }
+          .timeline_imglist {
+            display: flex;
+            margin: 10px 0;
+            img {
+              width: 100px;
+              margin-right: 10px;
+            }
+          }
+          .timeline_text {
+            font-size: 14px;
+          }
+        }
+      }
+      .track_item {
+        width: 49%;
+        height: 588px;
+        padding: 10px;
+        box-sizing: border-box;
+        .track_item_ser {
+          display: flex;
+          justify-content: space-between;
+          .track_item_ser_right {
+            display: flex;
+            .track_item_ser_right_item {
+              display: flex;
+              margin-left: 20px;
+              img {
+                width: 18px;
+                height: 22px;
+                margin-top: 3px;
+              }
+              p {
+                font-size: 14px;
+                margin-left: 10px;
+                line-height: 28px;
+              }
+            }
+          }
+        }
+        /deep/.el-button--info {
+          background-color: #409eff;
+          border-color: #409eff;
+        }
+        .track_item_map {
+          width: 100%;
+          margin-top: 10px;
+          height: calc(100% - 38px);
+          /deep/.amap-logo {
+            display: none !important;
+          }
+          /deep/.amap-copyright {
+            display: none !important;
+          }
+          /deep/.amap-controls {
+            display: none !important;
+          }
+        }
+      }
+    }
 
     // 任务汇报
     .list_report_ul {
@@ -363,7 +758,7 @@ export default {
   .insect_ul {
     .insect_list {
       display: flex;
-      // margin: 0 0 20px 0;
+      // margin: 0 0 20px 0 l;'
       margin-bottom: 20px;
       div {
         font-size: 16px;

minggao/src/page/home/index.vue

@@ -20,6 +20,10 @@
         <p>{{ headline }}</p>
       </div>
       <div class="index_out" style="display: flex">
+        <div class="index_out_info">
+          <i class="el-icon-message-solid" @click="towarn"></i>
+          <p class="dian" v-if="warntf"></p>
+        </div>
         <div
           class="iconfont icon-erweima"
           style="margin-right: 15px; font-size: 22px; color: #666666"
@@ -247,10 +251,12 @@ export default {
         20: "iconfont icon-gongzuoguanli-dingdanguanli",
         22: "iconfont icon-database-full",
         25: "iconfont icon-shezhi1",
+        45: "iconfont icon-yujing1"
       },
       QRtf: false,
       app_url: "",
       menunoneele: true,
+      warntf:false
     };
   },
   //监听属性 类似于data概念
@@ -494,6 +500,27 @@ export default {
     menunone() {
       this.menunoneele = !this.menunoneele;
     },
+    towarn(){
+      this.$router.push("/index/warningrecord");
+    },
+    getwarnnum(){
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=alert_manage.alert.alert_unread_num",
+        data: this.qs.stringify({}),
+      })
+        .then((res) => {
+          console.log(res);
+          if (res.data.data.unread_num>0) {
+            this.warntf = true
+          } else {
+            this.warntf = false
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    }
   },
   beforeCreate() {}, //生命周期 - 创建之前
   //生命周期 - 创建完成（可以访问当前this实例）
@@ -512,6 +539,7 @@ export default {
       // console.log("触发")
       this.menunone();
     }
+    this.getwarnnum()
     // this.menunone()
   },
   beforeUpdate() {}, //生命周期 - 更新之前
@@ -528,6 +556,22 @@ p {
 .indexbox {
   // display: flex;
 }
+.index_out_info{
+  position: relative;
+  margin-right: 15px;
+  i{
+    font-size: 18px;
+  }
+  .dian{
+    width: 8px;
+    height: 8px;
+    border-radius: 8px;
+    background-color: rgb(249, 63, 61);
+    position: absolute;
+    top: 20px;
+    right: 0;
+  }
+}
 .menubox {
   width: 100%;
   display: flex;
@@ -657,6 +701,7 @@ p {
         margin: 0 0 0 20px;
         padding: 0 !important;
         background-color: transparent !important;
+        font-size: 14px !important;
       }
     }
     .contentbox_box {

minggao/src/page/homepage/facilitydistribute.vue

@@ -83,17 +83,87 @@
     <div class="tallybox">
       <div class="tallybox_item">
         <img src="../../../static/images/homepage/cbd.png" alt="" />
-        <p>测报灯:<span style="color: #27c2ff">{{cbdnum}}台</span></p>
+        <p>
+          测报灯:<span style="color: #27c2ff">{{ cbdnum }}台</span>
+        </p>
       </div>
       <div class="tallybox_item">
         <img src="../../../static/images/homepage/ybq.png" alt="" />
-        <p>诱捕器:<span style="color: #ff00ff">{{ybqnum}}台</span></p>
+        <p>
+          诱捕器:<span style="color: #ff00ff">{{ ybqnum }}台</span>
+        </p>
       </div>
       <div class="tallybox_item">
         <img src="../../../static/images/homepage/jk.png" alt="" />
-        <p>监控设备:<span style="color: #e94c3e">{{jknum}}台</span></p>
+        <p>
+          监控设备:<span style="color: #e94c3e">{{ jknum }}台</span>
+        </p>
       </div>
     </div>
+    <div class="tracklistbox">
+      <el-date-picker
+        v-model="tracktime"
+        type="date"
+        size="mini"
+        placeholder="选择日期"
+        @change="timechange"
+      >
+      </el-date-picker>
+      <div class="tracklist">
+        <div class="tracklist_tilte" v-if="tracklistdata.length==0">
+          暂无数据
+        </div>
+        <div
+          class="tracklist_item"
+          v-for="(item, index) in tracklistdata"
+          :key="index"
+        >
+          <div class="tracklist_item_text">
+            <p
+              :style="{
+                'background-color':
+                  tracklistdata_backups[trackpage] &&
+                  tracklistdata_backups[trackpage][index] &&
+                  tracklistdata_backups[trackpage][index].color,
+              }"
+            >
+              {{ item.user_name.slice(0, 1) }}
+            </p>
+            <p>{{ item.user_name }}</p>
+          </div>
+          <div
+            :class="
+              (tracklistdata_backups[trackpage] &&
+                tracklistdata_backups[trackpage][index] &&
+                tracklistdata_backups[trackpage][index].type &&
+                'tracklist_btn tracklist_btn_none') ||
+              'tracklist_btn'
+            "
+            @click="seeteack(item, index)"
+          >
+            {{
+              (tracklistdata_backups[trackpage] &&
+                tracklistdata_backups[trackpage][index] &&
+                tracklistdata_backups[trackpage][index].type &&
+                "关闭") ||
+              "查看轨迹"
+            }}
+          </div>
+        </div>
+      </div>
+      <el-pagination
+      v-if="tracklistdata.length"
+        background
+        layout="prev, pager, next"
+        :total="total"
+        :key="pagekey"
+        :page-size="5"
+        :pager-count="3"
+        :small="true"
+        @current-change="handleCurrentChange"
+      >
+      </el-pagination>
+    </div>
     <div class="piebox">
       <p
         :class="
@@ -134,8 +204,8 @@
             ><span
               v-for="item in baseinfo[0].temp_org_list"
               :key="item.org_id"
-              style="margin-rignt:10px;"
-              >{{ item.org_name}}</span
+              style="margin-rignt: 10px"
+              >{{ item.org_name }}</span
             >
           </p>
         </div>
@@ -202,6 +272,28 @@
         </div>
       </div>
     </div>
+    <div class="measurebox">
+      <div
+        :class="
+          measure_index == 1 ? 'measurebox_item selmea' : 'measurebox_item'
+        "
+        @click="measure_distance"
+      >
+        <i class="iconfont icon-ceju"></i>
+        <p>测距</p>
+      </div>
+      <p class="measurebox_line"></p>
+      <div
+        :class="
+          measure_index == 2 ? 'measurebox_item selmea' : 'measurebox_item'
+        "
+        @click="measure_area"
+      >
+        <i class="iconfont icon-mianji"></i>
+        <p>侧面</p>
+      </div>
+      <!-- <p @click="measure_close">关闭</p> -->
+    </div>
   </div>
 </template>
 
@@ -237,25 +329,59 @@ export default {
       idinput: "", //设备编号
       baseinfo: [
         {
-          device_data:{
-            at:"",
-            ah:"",
-            ds:"",
-            ws:"",
-            csq:"",
+          device_data: {
+            at: "",
+            ah: "",
+            ds: "",
+            ws: "",
+            csq: "",
           },
-          uptime:"",
-          pest_list:[]
-        }
+          uptime: "",
+          pest_list: [],
+        },
       ], //设备详情
       loading: false,
       device_type_id: 0,
       myVideo2: {},
       pestboxloading: true,
       center: [114.052758, 22.545817],
-      cbdnum:0,
-      jknum:0,
-      ybqnum:0,
+      cbdnum: 0,
+      jknum: 0,
+      ybqnum: 0,
+      measure_index: 0,
+      mouseTool: null,
+      tracktime: "",
+      tracklistdata: [],
+      color: [
+        "rgb(197, 92, 142)",
+        "rgb(197, 32, 157)",
+        "rgb(206, 12, 55)",
+        "rgb(146, 78, 23)",
+        "rgb(173, 64, 221)",
+        "rgb(234, 169, 70)",
+        "rgb(123, 133, 244)",
+        "rgb(107, 27, 92)",
+        "rgb(13, 165, 14)",
+        "rgb(53, 52, 106)",
+        "rgb(237, 169, 161)",
+        "rgb(157, 84, 17)",
+        "rgb(14, 187, 149)",
+        "rgb(46, 11, 221)",
+        "rgb(208, 202, 126)",
+        "rgb(17, 118, 32)",
+        "rgb(7, 31, 67)",
+        "rgb(75, 40, 99)",
+        "rgb(224, 98, 40)",
+        "rgb(234, 3, 190)",
+        "rgb(97, 76, 115)",
+        "rgb(9, 117, 139)",
+        "rgb(165, 7, 62)",
+        "rgb(7, 107, 42)",
+      ],
+      trackpage: 1,
+      pagekey: 1,
+      total: 8,
+      tracklistdata_backups: {},
     };
   },
   //监听属性 类似于data概念
@@ -270,6 +396,15 @@ export default {
         this.width = "0";
         if (this.myVideo2[`myPlayer`]) {
           this.myVideo2[`myPlayer`].stop();
+          setTimeout(() => {
+            console.log("关闭关闭关闭");
+            this.myVideo2[`myPlayer`].stop();
+          }, 5000);
+        } else {
+          setTimeout(() => {
+            console.log("关闭关闭关闭");
+            this.myVideo2[`myPlayer`].stop();
+          }, 5000);
         }
       }
       // console.log(this.width)
@@ -321,7 +456,7 @@ export default {
       var map = new AMap.Map(document.getElementById("mapContainer2"), {
         center: this.center,
         resizeEnable: true,
-        zoom: 10,
+        zoom: 11,
         lang: "en",
         mapStyle: "amap://styles/fresh",
         layers: [],
@@ -334,6 +469,12 @@ export default {
           radius: 1000,
         });
       });
+      AMap.plugin(["AMap.MouseTool"], () => {
+        this.mouseTool = new AMap.MouseTool(map);
+      });
+      map.on("click", (e) => {
+        console.log(e);
+      });
       this.map = map;
       this.pestboxloading = false;
     },
@@ -354,9 +495,9 @@ export default {
         console.log(res.data.data);
         var resdata = res.data.data;
         // var data = [];
-        this.cbdnum = 0
-        this.jknum = 0
-        this.ybqnum = 0
+        this.cbdnum = 0;
+        this.jknum = 0;
+        this.ybqnum = 0;
         this.map.clearMap();
         if (resdata.huizhou) {
           for (var i = 0; i < resdata.huizhou.length; i++) {
@@ -381,15 +522,15 @@ export default {
       if (data.device_type_id == 3) {
         //测报灯
         icon = "../../../static/images/homepage/cbd.png";
-        this.cbdnum++
+        this.cbdnum++;
       } else if (data.device_type_id == 4) {
         //诱捕器
         icon = "../../../static/images/homepage/ybq.png";
-        this.ybqnum++
+        this.ybqnum++;
       } else if (data.device_type_id == 6) {
         //监控
         icon = "../../../static/images/homepage/jk.png";
-        this.jknum++
+        this.jknum++;
       }
       var marker = new AMap.Marker({
         position: new AMap.LngLat(
@@ -399,8 +540,8 @@ export default {
         offset: new AMap.Pixel(-10, -10),
         icon: icon, // 添加 Icon 图标 URL
         title: "设备标点",
-        d_id:data.d_id,
-        type_id:data.device_type_id,
+        d_id: data.d_id,
+        type_id: data.device_type_id,
       });
       marker.on("click", (e) => {
         console.log(e.target._originOpts.title);
@@ -490,6 +631,200 @@ export default {
         }
       });
     },
+    //距离测量
+    measure_distance() {
+      this.measure_index = 1;
+      this.draw("rule");
+      window.addEventListener("dblclick", () => {
+        this.measure_index = 0;
+        this.mouseTool.close();
+      });
+      window.addEventListener("contextmenu", () => {
+        this.measure_index = 0;
+        this.mouseTool.close();
+      });
+    },
+    //面积测量
+    measure_area() {
+      this.measure_index = 2;
+      this.draw("measureArea");
+      window.addEventListener("dblclick", () => {
+        this.measure_index = 0;
+        this.mouseTool.close();
+      });
+      window.addEventListener("contextmenu", () => {
+        this.measure_index = 0;
+        this.mouseTool.close();
+      });
+    },
+    measure_close() {
+      this.measure_index = 0;
+      this.mouseTool.close(true);
+    },
+    draw(type) {
+      console.log(type);
+      // this.mouseTool.close(true);
+      var mouseTool = this.mouseTool;
+      switch (type) {
+        case "rule": {
+          mouseTool.rule({
+            startMarkerOptions: {
+              //可缺省
+              icon: new AMap.Icon({
+                size: new AMap.Size(19, 31), //图标大小
+                imageSize: new AMap.Size(19, 31),
+                image: "//webapi.amap.com/theme/v1.3/markers/b/start.png",
+              }),
+              offset: new AMap.Pixel(-9, -31),
+            },
+            endMarkerOptions: {
+              //可缺省
+              icon: new AMap.Icon({
+                size: new AMap.Size(19, 31), //图标大小
+                imageSize: new AMap.Size(19, 31),
+                image: "//webapi.amap.com/theme/v1.3/markers/b/end.png",
+              }),
+              offset: new AMap.Pixel(-9, -31),
+            },
+            midMarkerOptions: {
+              //可缺省
+              icon: new AMap.Icon({
+                size: new AMap.Size(19, 31), //图标大小
+                imageSize: new AMap.Size(19, 31),
+                image: "//webapi.amap.com/theme/v1.3/markers/b/mid.png",
+              }),
+              offset: new AMap.Pixel(-9, -31),
+            },
+            lineOptions: {
+              //可缺省
+              strokeStyle: "solid",
+              strokeColor: "#FF33FF",
+              strokeOpacity: 1,
+              strokeWeight: 2,
+            },
+            //同 RangingTool 的 自定义 设置，缺省为默认样式
+          });
+          break;
+        }
+        case "measureArea": {
+          mouseTool.measureArea({
+            strokeColor: "#80d8ff",
+            fillColor: "#80d8ff",
+            fillOpacity: 0.3,
+            //同 Polygon 的 Option 设置
+          });
+          break;
+        }
+      }
+    },
+    //获取路径数据
+    gettracklist_data() {
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=monitor_manage.home_map.user_walk_list",
+        data: this.qs.stringify({
+          create_time: this.tracktime,
+          page: this.trackpage,
+          page_item: "5",
+        }),
+      }).then((res) => {
+        console.log(res.data.data);
+        var data = res.data.data.page_list;
+        // if(data.length){
+        //   return
+        // }
+        this.total = res.data.data.total_item;
+        var arr = [];
+        var index = this.trackpage;
+        index = index % 3 == 0 ? 3 : index % 3;
+        var colorlist = this.color.slice((index - 1) * 8, 8 * index);
+
+        if (!this.tracklistdata_backups[this.trackpage]) {
+          for (var i = 0; i < data.length; i++) {
+            var obj = {
+              type: false,
+              color: colorlist[i],
+              walk_list_arr: [],
+            };
+            arr.push(obj);
+          }
+          this.$set(this.tracklistdata_backups, this.trackpage, arr);
+          // this.tracklistdata_backups[this.trackpage] = arr;n
+        }
+        this.tracklistdata = data;
+        console.log(this.tracklistdata_backups);
+      });
+    },
+    //时间切换
+    timechange(e) {
+      console.log(e);
+      if (e) {
+        this.tracktime = this.timetag(e);
+        this.trackpage = 1;
+        this.pagekey = Math.random() * 10 + 1;
+        this.tracklistdata_backups = {};
+        this.gettracklist_data();
+      } else {
+        var time = new Date();
+        this.tracktime = this.timetag(time);
+      }
+    },
+    //分页
+    handleCurrentChange(e) {
+      this.trackpage = e;
+      this.gettracklist_data();
+    },
+    //绘制or关闭路径
+    seeteack(data, index) {
+      if (this.tracklistdata_backups[this.trackpage][index].type) {
+        console.log(
+          this.tracklistdata_backups[this.trackpage][index].walk_list_arr
+        );
+        var walk_list_arr =
+          this.tracklistdata_backups[this.trackpage][index].walk_list_arr;
+        for (var i = 0; i < walk_list_arr.length; i++) {
+          this.map.remove(walk_list_arr[i]);
+        }
+        this.tracklistdata_backups[this.trackpage][index].walk_list_arr = [];
+      } else {
+        console.log(this.tracklistdata_backups[this.trackpage][index].type);
+        this.initteack_info(data.walk_list, index);
+      }
+      this.tracklistdata_backups[this.trackpage][index].type =
+        !this.tracklistdata_backups[this.trackpage][index].type;
+    },
+    //绘制路径
+    initteack_info(walk_list, index) {
+      console.log(walk_list);
+      for (var i = 0; i < walk_list.length; i++) {
+        console.log(walk_list[i]);
+        var arr = [];
+        for (var j = 0; j < walk_list[i].length; j++) {
+          var list = [walk_list[i][j].lng, walk_list[i][j].lat];
+          arr.push(list);
+        }
+        var polyline2 = new AMap.Polyline({
+          map: this.map,
+          path: arr,
+          showDir: true,
+          strokeColor: this.tracklistdata_backups[this.trackpage][index].color, //线颜色
+          strokeOpacity: 1, //线透明度
+          strokeWeight: 6, //线宽
+          zIndex: 51,
+        });
+        this.tracklistdata_backups[this.trackpage][index].walk_list_arr.push(
+          polyline2
+        );
+      }
+    },
+    timetag(time) {
+      var years = time.getFullYear();
+      var month = time.getMonth() + 1;
+      var day = time.getDate();
+      month = month < 10 ? "0" + month : month;
+      day = day < 10 ? "0" + day : day;
+      return years + "-" + month + "-" + day;
+    },
   },
   beforeCreate() {}, //生命周期 - 创建之前
   //生命周期 - 创建完成（可以访问当前this实例）
@@ -499,8 +834,11 @@ export default {
   mounted() {
     // this.getmon();
     // this.init()
+    var time = new Date();
+    this.tracktime = this.timetag(time);
     this.gettype();
     this.getmon2();
+    this.gettracklist_data();
   },
   beforeUpdate() {}, //生命周期 - 更新之前
   updated() {}, //生命周期 - 更新之后
@@ -527,10 +865,10 @@ export default {
   #mapContainer2 {
     width: 100%;
     height: 100%;
-    /deep/.amap-logo{
+    /deep/.amap-logo {
       display: none !important;
     }
-    /deep/.amap-copyright{
+    /deep/.amap-copyright {
       display: none !important;
     }
   }
@@ -570,7 +908,7 @@ export default {
     position: absolute;
     top: 50px;
     left: 15px;
-    background-color: rgba(255,255,255,0.8);
+    background-color: rgba(255, 255, 255, 0.8);
     padding: 10px;
     .tallybox_item {
       margin-bottom: 10px;
@@ -581,6 +919,67 @@ export default {
       }
     }
   }
+  .tracklistbox {
+    position: absolute;
+    top: 180px;
+    left: 15px;
+    background-color: rgba(255, 255, 255, 0.8);
+    padding: 10px;
+    width: 200px;
+    // height: 500px;
+    .el-date-editor{
+      width: 200px;
+    }
+    .tracklist {
+      width: 100%;
+      height: 245px;
+      margin-top: 15px;
+      .tracklist_tilte{
+        text-align: center;
+        font-size: 14px;
+      }
+      .tracklist_item {
+        display: flex;
+        font-size: 14px;
+        justify-content: space-between;
+        padding-bottom: 10px;
+        border-bottom: 1px solid #409eff;
+        margin-bottom: 10px;
+        .tracklist_item_text {
+          display: flex;
+          line-height: 30px;
+          p:first-child {
+            width: 30px;
+            height: 30px;
+            background-color: chocolate;
+            line-height: 30px;
+            text-align: center;
+            border-radius: 50%;
+            color: #fff;
+          }
+          p:nth-child(2) {
+            margin-left: 10px;
+          }
+        }
+        .tracklist_btn {
+          width: 50px;
+          height: 18px;
+          color: #409eff;
+          padding: 5px;
+          font-size: 12px;
+          text-align: center;
+          cursor: pointer;
+          user-select: none;
+        }
+        .tracklist_btn_none {
+          color: #ff4949;
+        }
+      }
+      .tracklist_item:last-child{
+        border-bottom: none;
+      }
+    }
+  }
   .piebox {
     position: absolute;
     top: 0;
@@ -600,7 +999,7 @@ export default {
     }
     #mychartpie {
       transition: all 1s ease;
-      background-color: rgba(255,255,255,1);
+      background-color: rgba(255, 255, 255, 1);
       // padding: 20px;
       box-sizing: border-box;
       overflow: hidden;
@@ -697,5 +1096,28 @@ export default {
       }
     }
   }
+  .measurebox {
+    position: absolute;
+    right: 20px;
+    bottom: 20px;
+    background-color: #fff;
+    border-radius: 4px;
+    box-shadow: 0 0 3px rgb(0 0 0 / 50%);
+    padding: 10px 5px;
+    .measurebox_item {
+      text-align: center;
+      font-size: 14px;
+    }
+    .measurebox_line {
+      margin: 10px 0;
+      border-bottom: 1px solid;
+    }
+    .selmea {
+      color: #409eff;
+    }
+  }
+}
+/deep/.amap-controls {
+  display: none !important;
 }
 </style>

minggao/src/page/homepage/pestdistribute.vue

@@ -14,7 +14,12 @@
     ></div> -->
     <div class="amap-demo" id="mapContainer2"></div>
     <div class="searchbox">
-      <el-select v-model="wornvalue" placeholder="请选择害虫名称" size="mini" @change="search">
+      <el-select
+        v-model="wornvalue"
+        placeholder="请选择害虫名称"
+        size="mini"
+        @change="search"
+      >
         <el-option
           v-for="item in wornoptions"
           :key="item.point_id"
@@ -91,6 +96,27 @@
         element-loading-background="rgba(0, 0, 0, 0.8)"
       ></div>
     </div>
+    <div class="measurebox">
+      <div
+        :class="
+          measure_index == 1 ? 'measurebox_item selmea' : 'measurebox_item'
+        "
+        @click="measure_distance"
+      >
+        <i class="iconfont icon-ceju"></i>
+        <p>测距</p>
+      </div>
+      <p class="measurebox_line"></p>
+      <div
+        :class="
+          measure_index == 2 ? 'measurebox_item selmea' : 'measurebox_item'
+        "
+        @click="measure_area"
+      >
+        <i class="iconfont icon-mianji"></i>
+        <p>侧面</p>
+      </div>
+    </div>
     <el-dialog
       title="设置"
       :visible.sync="dialogVisible"
@@ -160,6 +186,8 @@ export default {
       },
       pestboxloading: true,
       center: [114.052758, 22.545817],
+      measure_index:0,
+      mouseTool:null
     };
   },
   //监听属性 类似于data概念
@@ -213,7 +241,7 @@ export default {
       var map = new AMap.Map(document.getElementById("mapContainer2"), {
         center: this.center,
         resizeEnable: true,
-        zoom: 10,
+        zoom: 11,
         lang: "en",
         mapStyle: "amap://styles/fresh",
         layers: [],
@@ -226,6 +254,9 @@ export default {
           radius: 1000,
         });
       });
+      AMap.plugin(["AMap.MouseTool"], () => {
+        this.mouseTool = new AMap.MouseTool(map);
+      });
       this.map = map;
       this.getwornlist();
     },
@@ -498,25 +529,25 @@ export default {
             capitals.push(obj);
           }
         }
-        var maxnum = 0
+        var maxnum = 0;
         for (var i = 0; i < capitals.length; i += 1) {
-          if(capitals[i].pest_total>maxnum){
-            console.log()
-            maxnum = capitals[i].pest_total
+          if (capitals[i].pest_total > maxnum) {
+            console.log();
+            maxnum = capitals[i].pest_total;
           }
         }
         for (var i = 0; i < capitals.length; i += 1) {
-          var color = ''
-          if(capitals[i].pest_total > Math.floor(maxnum*0.8)){
-              color = '#ff0202'
-          }else if(capitals[i].pest_total > Math.floor(maxnum*0.6)){
-              color = '#ff4902'
-          }else if(capitals[i].pest_total > Math.floor(maxnum*0.4)){
-              color = '#ffe402'
-          }else if(capitals[i].pest_total > Math.floor(maxnum*0.2)){
-              color = '#ff00ba'
-          }else{
-              color = '#0cff00'
+          var color = "";
+          if (capitals[i].pest_total > Math.floor(maxnum * 0.8)) {
+            color = "#ff0202";
+          } else if (capitals[i].pest_total > Math.floor(maxnum * 0.6)) {
+            color = "#ff4902";
+          } else if (capitals[i].pest_total > Math.floor(maxnum * 0.4)) {
+            color = "#ffe402";
+          } else if (capitals[i].pest_total > Math.floor(maxnum * 0.2)) {
+            color = "#ff00ba";
+          } else {
+            color = "#0cff00";
           }
           var center = capitals[i].center;
           var device_id = capitals[i].device_id;
@@ -560,10 +591,15 @@ export default {
           ` 只</p>`;
       }
       var infoWindow = new AMap.InfoWindow({
-        content: `<div style="height:100px;overflow-y: auto;"><p>设备id ：` + info.device_id + `</p>` + str + `</div>`, //使用默认信息窗体框样式，显示信息内容
+        content:
+          `<div style="height:100px;overflow-y: auto;"><p>设备id ：` +
+          info.device_id +
+          `</p>` +
+          str +
+          `</div>`, //使用默认信息窗体框样式，显示信息内容
       });
 
-      infoWindow.open(this.map, [info.center.lng,info.center.lat]);
+      infoWindow.open(this.map, [info.center.lng, info.center.lat]);
     },
     getwornlistflex() {
       this.$axios({
@@ -614,11 +650,11 @@ export default {
         url: "/api/api_gateway?method=monitor_manage.trap_manage.pest_trap_org",
       }).then((res) => {
         // console.log(res.data.data);
-        this.versionsoptions2 = []
+        this.versionsoptions2 = [];
         var org_list = res.data.data.org_list;
-        for(var i = 0;i<org_list.length;i++){
-          if(org_list[i].org_name != ""){
-            this.versionsoptions2.push(org_list[i])
+        for (var i = 0; i < org_list.length; i++) {
+          if (org_list[i].org_name != "") {
+            this.versionsoptions2.push(org_list[i]);
           }
         }
         // this.versionsoptions2 = res.data.data.org_list;
@@ -672,6 +708,92 @@ export default {
       this.dialogVisible = false;
       this.$refs[formName].resetFields();
     },
+    //距离测量
+    measure_distance() {
+      this.measure_index = 1;
+      this.draw("rule");
+      window.addEventListener("dblclick", () => {
+        this.measure_index = 0;
+        this.mouseTool.close();
+      });
+      window.addEventListener("contextmenu", () => {
+        this.measure_index = 0;
+        this.mouseTool.close();
+      });
+    },
+    //面积测量
+    measure_area() {
+      this.measure_index = 2;
+      this.draw("measureArea");
+      window.addEventListener("dblclick", () => {
+        this.measure_index = 0;
+        this.mouseTool.close();
+      });
+      window.addEventListener("contextmenu", () => {
+        this.measure_index = 0;
+        this.mouseTool.close();
+      });
+    },
+    measure_close() {
+      this.measure_index = 0;
+      this.mouseTool.close(true);
+    },
+    draw(type) {
+      console.log(type);
+      // this.mouseTool.close(true);
+      var mouseTool = this.mouseTool;
+      switch (type) {
+        case "rule": {
+          mouseTool.rule({
+            startMarkerOptions: {
+              //可缺省
+              icon: new AMap.Icon({
+                size: new AMap.Size(19, 31), //图标大小
+                imageSize: new AMap.Size(19, 31),
+                image: "//webapi.amap.com/theme/v1.3/markers/b/start.png",
+              }),
+              offset: new AMap.Pixel(-9, -31),
+            },
+            endMarkerOptions: {
+              //可缺省
+              icon: new AMap.Icon({
+                size: new AMap.Size(19, 31), //图标大小
+                imageSize: new AMap.Size(19, 31),
+                image: "//webapi.amap.com/theme/v1.3/markers/b/end.png",
+              }),
+              offset: new AMap.Pixel(-9, -31),
+            },
+            midMarkerOptions: {
+              //可缺省
+              icon: new AMap.Icon({
+                size: new AMap.Size(19, 31), //图标大小
+                imageSize: new AMap.Size(19, 31),
+                image: "//webapi.amap.com/theme/v1.3/markers/b/mid.png",
+              }),
+              offset: new AMap.Pixel(-9, -31),
+            },
+            lineOptions: {
+              //可缺省
+              strokeStyle: "solid",
+              strokeColor: "#FF33FF",
+              strokeOpacity: 1,
+              strokeWeight: 2,
+            },
+            //同 RangingTool 的 自定义 设置，缺省为默认样式
+          });
+          break;
+        }
+        case "measureArea": {
+          mouseTool.measureArea({
+            strokeColor: "#80d8ff",
+            fillColor: "#80d8ff",
+            fillOpacity: 0.3,
+            //同 Polygon 的 Option 设置
+          });
+          break;
+        }
+      }
+    },
   },
   beforeCreate() {}, //生命周期 - 创建之前
   //生命周期 - 创建完成（可以访问当前this实例）
@@ -746,6 +868,26 @@ export default {
       border-radius: 10px;
     }
   }
+  .measurebox {
+    position: absolute;
+    right: 20px;
+    bottom: 20px;
+    background-color: #fff;
+    border-radius: 4px;
+    box-shadow: 0 0 3px rgb(0 0 0 / 50%);
+    padding: 10px 5px;
+    .measurebox_item {
+      text-align: center;
+      font-size: 14px;
+    }
+    .measurebox_line {
+      margin: 10px 0;
+      border-bottom: 1px solid;
+    }
+    .selmea {
+      color: #409eff;
+    }
+  }
 }
 /deep/.el-dialog__body {
   padding-bottom: 0;
@@ -761,4 +903,7 @@ export default {
     cursor: pointer;
   }
 }
+/deep/.amap-controls {
+  display: none !important;
+}
 </style>

minggao/src/page/systemmanger/coefficientset.vue

@@ -0,0 +1,115 @@
+<!--  -->
+<template>
+  <div class="coebox">
+    <p>巡护面积指数设置：</p>
+    <div class="coebox_item">
+      <p>方圆：</p>
+      <el-input
+        v-model="area"
+        size="mini"
+        oninput="value=value.replace(/[^\d]+/g,'')"
+        placeholder="请输入内容"
+      ></el-input>
+      <p>米</p>
+      <el-button type="info" @click="setarea_info" size="mini">保存</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      area: '',
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    //获取范围
+    getarea_info() {
+      this.$axios({
+        method: 'POST',
+        url: '/api/api_gateway?method=sysmenage.maintain.walk_area_get',
+        data: this.qs.stringify({}),
+      }).then((res) => {
+        console.log(res.data.data);
+        this.area = res.data.data.area;
+      });
+    },
+    //设置范围
+    setarea_info() {
+      if (this.area == '') {
+        this.$message({
+          showClose: true,
+          message: '请将信息填写完整',
+          type: 'warning',
+        });
+      } else {
+        this.$axios({
+          method: 'POST',
+          url: '/api/api_gateway?method=sysmenage.maintain.walk_area_set',
+          data: this.qs.stringify({
+            area: this.area,
+          }),
+        }).then((res) => {
+          console.log(res.data.data);
+          this.$message({
+            message: '信息保存成功',
+            type: 'success',
+          });
+          this.getarea_info();
+        });
+      }
+    },
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.getarea_info();
+  },
+  beforeMount() {}, //生命周期 - 挂载之前
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style scoped lang="less">
+.coebox {
+  width: 100%;
+  height: calc(100% - 20px);
+  background-color: #fff;
+  padding: 20px;
+  box-sizing: border-box;
+  font-size: 14px;
+  .coebox_item {
+    display: flex;
+    margin-top: 16px;
+    /deep/.el-input {
+      width: 200px;
+    }
+    p {
+      line-height: 28px;
+    }
+    p:nth-child(3) {
+      margin: 0 10px;
+    }
+  }
+}
+/deep/.el-button--info {
+  background-color: #409eff;
+  border-color: #409eff;
+}
+</style>

minggao/src/page/systemmanger/equipmentOPS.vue

@@ -0,0 +1,191 @@
+<!--  -->
+<template>
+  <div class="OPSbox">
+    <div class="OPSbox_search">
+      <el-input
+        v-model="device_id"
+        size="mini"
+        placeholder="请输入设备ID"
+      ></el-input>
+      <el-select v-model="device_type" size="mini" clearable placeholder="请选择设备类型">
+        <el-option
+          v-for="item in typeoptions"
+          :key="item"
+          :label="item"
+          :value="item"
+        >
+        </el-option>
+      </el-select>
+      <el-date-picker
+        size="mini"
+        v-model="timevalue"
+        type="daterange"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        @change="timechange"
+      >
+      </el-date-picker>
+      <el-button type="info" @click="search" size="mini">搜索</el-button>
+    </div>
+    <div class="OPSbox_table">
+      <el-table
+        :data="tableData"
+        stripe
+        :height="48 * 13"
+        style="width: 100%; overflow-y: auto"
+      >
+        <el-table-column prop="device_type_name" label="设备类型"> </el-table-column>
+        <el-table-column prop="device_id" label="设备编号"> </el-table-column>
+        <el-table-column prop="device_status" label="设备状态"> </el-table-column>
+        <el-table-column prop="org_name" label="隶属组织">
+          <template slot-scope="scope">
+            <span>{{scope.row.org_name || "暂无"}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="address" label="设备地点"> </el-table-column>
+        <el-table-column prop="message" label="故障描述"> </el-table-column>
+        <el-table-column prop="failure_time" label="故障时间"> </el-table-column>
+      </el-table>
+      <el-pagination
+        style="margin: 60px 0 0 0"
+        :page-size="20"
+        @current-change="newPage"
+        :current-page="page"
+        v-if="tableData.length > 0"
+        background
+        layout="prev, pager, next, jumper"
+        :total="tableSum"
+        :key="pagekey"
+      >
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等） 
+
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      device_id: "",
+      device_type: "",
+      timevalue: "",
+      start_time:"",
+      end_time:"",
+      typeoptions: [],
+      tableData: [],
+      tableSum:100,
+      page:1,
+      pagekey:1,
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    getdatainfo(){
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=monitor_manage.device.device_monitor_list",
+        data: this.qs.stringify({
+          page:this.page,
+          page_item:20,
+          device_id:this.device_id,
+          type_name:this.device_type,
+          start_time:this.start_time,
+          end_time:this.end_time
+        }),
+      }).then((res) => {
+        console.log(res.data.data);
+        this.tableSum = res.data.data.total_item
+        this.tableData = res.data.data.page_list
+        this.typeoptions = res.data.data.type_name_list
+        // this.typeoptions = res.data.data.type_name_list
+      });
+    },
+    timechange(e){
+      if(e){
+        this.start_time = this.timetag(e[0])
+        this.end_time = this.timetag(e[1])
+      }else{
+        this.start_time = ""
+        this.end_time = ""
+      }
+    },
+    timetag(time) {
+      var years = time.getFullYear();
+      var month = time.getMonth() + 1;
+      var day = time.getDate();
+      month = month < 10 ? "0" + month : month;
+      day = day < 10 ? "0" + day : day;
+      return years + "-" + month + "-" + day;
+    },
+    
+    search() {
+      this.page = 1
+      this.pagekey = Math.random() * 10 + 1;
+      this.getdatainfo()
+    },
+    newPage(e){
+      this.page = e
+      this.getdatainfo()
+    }
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.getdatainfo()
+  },
+  beforeMount() {}, //生命周期 - 挂载之前
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style scoped lang="less">
+.OPSbox {
+  height: 100%;
+  .OPSbox_search {
+    display: flex;
+    justify-content: flex-start;
+    // height: 40px;
+    .el-input {
+      width: 250px;
+      margin-right: 15px;
+    }
+    .el-select {
+      width: 250px;
+      margin-right: 15px;
+    }
+    .el-date-editor {
+      width: 250px;
+      margin-right: 15px;
+    }
+    .el-button--info {
+      margin-right: 15px;
+      margin-left: 0;
+    }
+  }
+  .OPSbox_table {
+    margin-top: 15px;
+    background-color: #fff;
+    padding: 20px;
+    box-sizing: border-box;
+  }
+}
+/deep/.el-button--info {
+  background-color: #409eff;
+  border-color: #409eff;
+}
+</style>

minggao/src/page/systemmanger/harmfulBiology.vue

@@ -84,7 +84,7 @@
         style="width: 100%"
         ref="gridTable"
       >
-        <el-table-column prop="ind" label="序号">
+        <el-table-column prop="ind" label="序号" width="80px">
           <template slot-scope="scope">
             <span>{{ (page - 1) * 20 + scope.row.ind }}</span>
           </template>
@@ -99,6 +99,30 @@
         </el-table-column>
         <el-table-column prop="alien_specie" label="是否外来物种">
         </el-table-column>
+        <el-table-column prop="level_name" label="有害生物等级">
+        </el-table-column>
+        <el-table-column prop="describe" label="有害生物描述">
+          <template slot-scope="scope">
+            <el-popover
+              placement="top-start"
+              title="详情"
+              width="200"
+              trigger="hover"
+              :content="scope.row.describe || '无'"
+            >
+              <p
+                slot="reference"
+                style="
+                  overflow: hidden;
+                  white-space: nowrap;
+                  text-overflow: ellipsis;
+                "
+              >
+                {{ scope.row.describe || "无" }}
+              </p>
+            </el-popover>
+          </template>
+        </el-table-column>
         <el-table-column
           prop="messages"
           :show-overflow-tooltip="true"
@@ -168,6 +192,31 @@
           </el-select>
         </el-form-item>
 
+        <el-form-item label="有害生物等级: " prop="level">
+          <el-radio-group v-model="form.level" size="medium">
+            <el-radio-button label="1" style="user-select: none"
+              >一级</el-radio-button
+            >
+            <el-radio-button label="2" style="user-select: none"
+              >二级</el-radio-button
+            >
+            <el-radio-button label="3" style="user-select: none"
+              >三级</el-radio-button
+            >
+            <el-radio-button label="4" style="user-select: none"
+              >四级</el-radio-button
+            >
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="有害生物描述: " prop="describe">
+          <el-input
+            style="width: 80%"
+            size="mini"
+            type="textarea"
+            resize="none"
+            v-model.trim="form.describe"
+          ></el-input>
+        </el-form-item>
         <el-form-item label="备注: " prop="remark">
           <el-input
             style="width: 80%"
@@ -227,6 +276,8 @@ export default {
         judge: "", // 检疫性有害生物
         judge2: "", //是否外来入侵物种
         remark: "", // 备注
+        level: "1",
+        describe: "",
       },
       rules: {
         name: [
@@ -243,12 +294,13 @@ export default {
             message: "请选择是否外来入侵物种",
             trigger: "blur",
           },
-          //   { min: 3, max: 5, message: "长度在 1 到 30 个字符", trigger: "blur" },
         ],
-        // remark: [
-        //   { required: true, message: "请输入备注", trigger: "blur" },
-        //   //   { min: 3, max: 5, message: "长度在 1 到 30 个字符", trigger: "blur" },
-        // ],
+        level: [
+          { required: true, message: "请选择有害生物等级", trigger: "change" },
+        ],
+        describe: [
+          { required: true, message: "请填写活动形式", trigger: "blur" },
+        ],
       },
       insectObj: {},
       isClick: true, // 防止重复弹框
@@ -279,6 +331,8 @@ export default {
         this.form.judge = ""; // 检疫性有害生物
         this.form.judge2 = ""; // 是否外来入侵物种
         this.form.remark = ""; // 备注
+        this.form.level = "";
+        this.form.describe = "";
         // this.$refs["form"].resetFields();
       }
     },
@@ -359,6 +413,8 @@ export default {
         judge: data.quarantine, // 检疫性有害生物
         judge2: data.alien_specie, //是否外来入侵物种
         remark: data.messages, // 备注
+        level: data.level == "" ? "1" : data.level,
+        describe: data.describe,
       };
       this.addrInsectVisible = true;
     },
@@ -421,6 +477,8 @@ export default {
               alien_specie: this.form.judge2,
               quarantine: this.form.judge,
               messages: this.form.remark,
+              level: this.form.level,
+              describe: this.form.describe,
             });
           } else if (this.tltData == "编辑有害生物") {
             var url = "/api/api_gateway?method=sysmenage.maintain.pest_modify";
@@ -430,6 +488,8 @@ export default {
               alien_specie: this.form.judge2,
               quarantine: this.form.judge,
               messages: this.form.remark,
+              level: this.form.level,
+              describe: this.form.describe,
             });
           }
           this.$axios({

minggao/src/page/warning/warningrecord.vue

@@ -0,0 +1,402 @@
+<!--  -->
+<template>
+  <div class="recordbox">
+    <div class="recordbox_search">
+      <el-select
+        v-model="alert_type"
+        size="mini"
+        clearable
+        placeholder="请选择"
+      >
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+      <el-date-picker
+        size="mini"
+        v-model="timevalue"
+        type="daterange"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+      >
+      </el-date-picker>
+      <el-button type="info" @click="search" size="mini">搜索</el-button>
+      <el-button type="info" size="mini" @click="allread">一键已读</el-button>
+    </div>
+    <div class="recordbox_list">
+      <el-card class="box-card" v-for="item in tablelist" :key="item.record_id">
+        <div class="recordbox_list_item" @click="onlyread(item)">
+          <div class="list_item_fir">
+            <p :class="item.is_read == 1 ? 'dian' : 'dian dian_none'"></p>
+            <p>{{ item.alert_title }}</p>
+          </div>
+          <div class="list_item_text">预警类型：{{ item.alert_type }}</div>
+          <div class="list_item_text">设备ID：{{ item.device_id || "无" }}</div>
+          <div class="list_item_text">
+            <p>设备位置：</p>
+            <p v-if="item.lng == '' || item.lat == ''">无</p>
+            <p style="color: #14a478" v-else>
+              <i
+                class="el-icon-location-information"
+                @click="initmap(item.lng, item.lat)"
+              ></i>
+              <span @click="initmap(item.lng, item.lat)">查看</span>
+            </p>
+          </div>
+          <div class="list_item_text">
+            <p>预警内容：</p>
+            <div>
+              <el-popover
+                placement="bottom-start"
+                title="预警详情"
+                width="200"
+                trigger="click"
+                content=""
+              >
+                <div>
+                  {{ item.message }}
+                </div>
+                <span slot="reference" class="textbox">{{ item.message }}</span>
+              </el-popover>
+            </div>
+          </div>
+          <div class="list_item_time">
+            <p>{{ item.create_time }}</p>
+            <img
+              :src="'../../../static/images/warning/0' + item.is_read + '.png'"
+              alt=""
+            />
+          </div>
+        </div>
+      </el-card>
+    </div>
+    <el-pagination
+      background
+      layout="prev, pager, next,jumper"
+      :total="total"
+      :key="pagekey"
+      :page-size="12"
+      @current-change="handleCurrentChange"
+    >
+    </el-pagination>
+    <el-dialog
+      title="地图分布"
+      :visible.sync="dialogVisible"
+      width="580px"
+      :close-on-click-modal="false"
+    >
+      <div class="mapboxdialog">
+        <div class="mapbox" id="mapbox"></div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      options: [
+        {
+          value: "害虫总数预警",
+          label: "害虫总数预警",
+        },
+        {
+          value: "目标种类数量预警",
+          label: "目标种类数量预警",
+        },
+        {
+          value: "外来入侵物种预警",
+          label: "外来入侵物种预警",
+        },
+        {
+          value: "指定害虫数量预警",
+          label: "指定害虫数量预警",
+        },
+      ],
+      alert_type: "",
+      timevalue: [],
+      start_time: "",
+      end_time: "",
+      tablelist: [],
+      total: 10,
+      pagekey: 1,
+      page: 1,
+      dialogVisible: false,
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    getwarnlist() {
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=alert_manage.alert.alert_record_list",
+        data: this.qs.stringify({
+          page: this.page, //
+          page_item: "12", //
+          start_time: this.start_time, //
+          end_time: this.end_time, //
+          alert_type: this.alert_type, //
+        }),
+      })
+        .then((res) => {
+          console.log(res.data.data.page_list);
+          this.tablelist = res.data.data.page_list;
+          this.total = res.data.data.total_item;
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+    //搜索
+    search() {
+      console.log(this.timevalue);
+      if (this.timevalue) {
+        this.start_time = this.time_transition(this.timevalue[0]);
+        this.end_time = this.time_transition(this.timevalue[1]);
+      } else {
+        this.start_time = "";
+        this.end_time = "";
+      }
+
+      this.page = 1;
+      this.pagekey = Math.random() * 10 + 1;
+      this.getwarnlist();
+    },
+    //分页搜索
+    handleCurrentChange(e) {
+      console.log(e);
+      this.page = e;
+      this.getwarnlist();
+    },
+    //已读
+    onlyread(data) {
+      console.log(data.record_id, data.is_read);
+      if (data.is_read == 0) {
+        this.$axios({
+          method: "POST",
+          url: "/api/api_gateway?method=alert_manage.alert.alert_read",
+          data: this.qs.stringify({
+            record_id: data.record_id,
+          }),
+        })
+          .then((res) => {
+            console.log(res);
+            if (res.data.message == "") {
+              this.$message({
+                message: "该条预警记录已读",
+                type: "success",
+              });
+              this.getwarnlist();
+            } else {
+              this.$message({
+                message: res.data.message,
+                type: "warning",
+              });
+            }
+          })
+          .catch((err) => {
+            console.log(err);
+          });
+      }
+    },
+    //一键已读
+    allread() {
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=alert_manage.alert.alert_one_click_read",
+        data: this.qs.stringify({}),
+      })
+        .then((res) => {
+          console.log(res);
+          if (res.data.message == "") {
+            this.getwarnlist();
+          } else {
+            this.$message({
+              message: res.data.message,
+              type: "warning",
+            });
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+    // 时间转换
+    time_transition(time) {
+      var times = new Date(time);
+      var years = times.getFullYear();
+      var month = times.getMonth() + 1;
+      var day = times.getDate();
+      var hours = times.getHours();
+      var minutes = times.getMinutes();
+      var seconds = times.getSeconds();
+      console.log(
+        years +
+          "-" +
+          month +
+          "-" +
+          day +
+          " " +
+          hours +
+          ":" +
+          minutes +
+          ":" +
+          seconds
+      );
+      return (
+        years +
+        "-" +
+        month +
+        "-" +
+        day +
+        " " +
+        hours +
+        ":" +
+        minutes +
+        ":" +
+        seconds
+      );
+    },
+    initmap(lng, lat) {
+      this.dialogVisible = true;
+      this.$nextTick(() => {
+        var center = [lng, lat];
+        var map = new AMap.Map(document.getElementById("mapbox"), {
+          center: center,
+          resizeEnable: true,
+          zoom: 10,
+          lang: "en",
+          mapStyle: "amap://styles/fresh",
+        });
+        var marker = new AMap.Marker();
+        marker.setPosition([lng, lat]);
+        map.add(marker);
+      });
+    },
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.getwarnlist();
+  },
+  beforeMount() {}, //生命周期 - 挂载之前
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style scoped lang="less">
+.recordbox {
+  height: 100%;
+  .recordbox_search {
+    display: flex;
+    justify-content: flex-start;
+    // height: 40px;
+    .el-select {
+      width: 250px;
+      margin-right: 15px;
+    }
+    .el-date-editor {
+      width: 250px;
+      margin-right: 15px;
+    }
+    .el-button--info {
+      margin-right: 15px;
+      margin-left: 0;
+    }
+  }
+  .recordbox_list {
+    width: 100%;
+    margin-top: 20px;
+    display: flex;
+    flex-wrap: wrap;
+    /deep/.el-card {
+      margin-right: 10px;
+      margin-bottom: 10px;
+      width: 24%;
+      border-radius: 10px;
+    }
+    .recordbox_list_item {
+      .list_item_fir {
+        display: flex;
+        .dian {
+          width: 10px;
+          height: 10px;
+          border-radius: 10px;
+          margin-top: 7px;
+          margin-right: 5px;
+          background-color: #999999;
+        }
+        .dian_none {
+          background-color: #f72408;
+        }
+      }
+      .list_item_text {
+        display: flex;
+        font-size: 14px;
+        color: #454545;
+        margin-top: 10px;
+        p:first-child {
+          width: 70px;
+        }
+        p:nth-child(2) {
+          width: calc(100% - 70px);
+        }
+        div:nth-child(2) {
+          width: calc(100% - 70px);
+        }
+        .textbox {
+          height: 40px;
+          display: -webkit-box; //谷歌
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2; //显示几行
+          overflow: hidden;
+        }
+      }
+      .list_item_time {
+        display: flex;
+        font-size: 12px;
+        color: #999999;
+        margin-top: 10px;
+        justify-content: flex-end;
+        line-height: 20px;
+        img {
+          width: 16px;
+          height: 20px;
+          margin-left: 10px;
+        }
+      }
+    }
+  }
+}
+.mapboxdialog {
+  width: 100%;
+  .mapbox {
+    width: 100%;
+    height: 300px;
+  }
+}
+/deep/.el-button--info {
+  background-color: #409eff;
+  border-color: #409eff;
+}
+</style>

minggao/src/page/warning/warningset.vue

@@ -0,0 +1,391 @@
+<!--  -->
+<template>
+  <div class="setwainbox">
+    <div class="setinfo">
+      <div class="setinfo_off">
+        <p class="setinfo_off_index">1</p>
+        <p class="setinfo_off_title">目标种类预警</p>
+        <el-switch
+          v-model="warninfo.species_status"
+          active-color="#409eff"
+          inactive-color="#ff4949"
+        >
+        </el-switch>
+      </div>
+      <div class="setinfo_text">
+        <el-input
+          v-model="warninfo.species_num"
+          placeholder="请输入内容"
+          size="mini"
+          oninput="value=value.replace(/[^\d]+/g,'')"
+        ></el-input>
+        <p class="setinfo_text_describe">
+          每天害虫
+          <span style="color: #1b76ff">种类数量</span>达到此值时，触发预警
+        </p>
+      </div>
+    </div>
+    <div class="setinfo">
+      <div class="setinfo_off">
+        <p class="setinfo_off_index">2</p>
+        <p class="setinfo_off_title">数量预警</p>
+        <el-switch
+          v-model="warninfo.pest_name_status"
+          active-color="#409eff"
+          inactive-color="#ff4949"
+        >
+        </el-switch>
+      </div>
+      <div class="setinfo_text2">
+        <div
+          class="setinfo_text_ser"
+          v-for="(items, index) in wormlist"
+          :key="index"
+        >
+          <el-select v-model="items.pest_name" size="mini" filterable placeholder="请选择">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+          <el-input
+            v-model="items.pest_num"
+            placeholder="请输入内容"
+            size="mini"
+            oninput="value=value.replace(/[^\d]+/g,'')"
+          ></el-input>
+          <p
+            class="setinfo_text_addordel"
+            v-if="index == 0"
+            @click="addworm(index)"
+          >
+            <i class="el-icon-circle-plus-outline" style="color: #409eff"></i>
+          </p>
+          <p class="setinfo_text_addordel" v-else @click="delworm(index)">
+            <i class="el-icon-delete" style="color: #ff4949"></i>
+          </p>
+          <p class="setinfo_text_describe" v-if="index == 0">
+            每天害虫
+            <span style="color: #1b76ff">指定害虫数</span>达到此值时，触发预警
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="setinfo">
+      <div class="setinfo_off">
+        <p class="setinfo_off_index">3</p>
+        <p class="setinfo_off_title">总量预警</p>
+        <el-switch
+          v-model="warninfo.pest_total_status"
+          active-color="#409eff"
+          inactive-color="#ff4949"
+        >
+        </el-switch>
+      </div>
+      <div class="setinfo_text">
+        <el-input
+          v-model="warninfo.pest_total_num"
+          placeholder="请输入内容"
+          size="mini"
+          oninput="value=value.replace(/[^\d]+/g,'')"
+        ></el-input>
+        <p class="setinfo_text_describe">
+          每天害虫
+          <span style="color: #1b76ff">总量预警</span>达到此值时，触发预警
+        </p>
+      </div>
+    </div>
+    <div class="setinfo">
+      <div class="setinfo_off">
+        <p class="setinfo_off_index">4</p>
+        <p class="setinfo_off_title">外来入侵物种预警</p>
+        <el-switch
+          v-model="warninfo.alien_species_status"
+          active-color="#409eff"
+          inactive-color="#ff4949"
+        >
+        </el-switch>
+      </div>
+    </div>
+    <el-button type="info" @click="saveinfo" size="mini">保 存</el-button>
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      warninfo: {},
+      wormlist: [],
+      options: [],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    addworm(index) {
+      console.log(this.wormlist);
+      var tf = this.wormlist.every((item, index, arr) => {
+        return item.pest_name != "" && item.pest_num != "";
+      });
+      console.log(tf);
+      if (tf) {
+        var obj = {
+          pest_name: "",
+          pest_num: "",
+        };
+        this.wormlist.push(obj);
+      } else {
+        this.$message({
+          showClose: true,
+          message: "请将信息填写完整后增加",
+          type: "warning",
+        });
+      }
+    },
+    delworm(index) {
+      this.wormlist.splice(index, 1);
+    },
+    //获取害虫列表
+    getwarnlist() {
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=sysmenage.maintain.pest_list",
+        data: this.qs.stringify({
+          page: "1",
+          page_item: "99999999",
+        }),
+      })
+        .then((res) => {
+          console.log(res.data.data.page_list);
+          this.options = [];
+          var data = res.data.data.page_list;
+          for (var i = 0; i < data.length; i++) {
+            var obj = {
+              value: data[i].pest_name,
+              label: data[i].pest_name,
+            };
+            this.options.push(obj);
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+    //获取预警信息
+    getwarninfo() {
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=alert_manage.alert.get_alert_config",
+        data: this.qs.stringify({}),
+      })
+        .then((res) => {
+          console.log(res.data.data);
+          this.warninfo = JSON.parse(JSON.stringify(res.data.data));
+
+          this.warninfo.alien_species_status =
+            this.warninfo.alien_species_status == 0 ? false : true; //外侵开关
+          this.warninfo.pest_name_status =
+            this.warninfo.pest_name_status == 0 ? false : true; //指定开关
+          this.warninfo.pest_total_status =
+            this.warninfo.pest_total_status == 0 ? false : true; //总数开关
+          this.warninfo.species_status =
+            this.warninfo.species_status == 0 ? false : true; //种类开关
+
+          console.log(this.warninfo);
+          if (this.warninfo.pest_name_list.length) {
+            this.wormlist = this.warninfo.pest_name_list;
+          } else {
+            this.wormlist = [
+              {
+                pest_name: "",
+                pest_num: "",
+              },
+            ];
+          }
+          console.log(this.wormlist);
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+    //设置预警
+    saveinfo() {
+      if (this.yanzheng() == "") {
+        var infoobj = JSON.parse(JSON.stringify(this.warninfo));
+        infoobj.alien_species_status =
+          infoobj.alien_species_status == true ? 1 : 0; //外侵开关
+        infoobj.pest_name_status = infoobj.pest_name_status == true ? 1 : 0; //指定开关
+        infoobj.pest_total_status = infoobj.pest_total_status == true ? 1 : 0; //总数开关
+        infoobj.species_status = infoobj.species_status == true ? 1 : 0; //种类开关
+
+        infoobj["pest_list"] = this.wormlist;
+        console.log(infoobj);
+        this.$axios({
+          method: "POST",
+          url: "/api/api_gateway?method=alert_manage.alert.modify_alert_config",
+          data: this.qs.stringify({
+            species_num: infoobj.species_num, //            是       目标种类数量
+            species_status: infoobj.species_status, //         是       目标种类预期状态
+            pest_list: JSON.stringify(infoobj.pest_list), //               是
+            pest_name_status: infoobj.pest_name_status, //        是       指定害虫名称预警状态
+            pest_total_num: infoobj.pest_total_num, //          是       害虫总类预警数量
+            pest_total_status: infoobj.pest_total_status, //       是       害虫总数预警状态
+            alien_species_status: infoobj.alien_species_status, //    是       外来入侵物种预警状态
+          }),
+        })
+          .then((res) => {
+            console.log(res);
+            if (res.data.message == "") {
+              this.$message({
+                message: "预警设置成功",
+                type: "success",
+              });
+              this.getwarninfo();
+            } else {
+              this.$message({
+                message: res.data.message,
+                type: "error",
+              });
+            }
+          })
+          .catch((err) => {
+            console.log(err);
+          });
+      } else {
+        this.$message({
+          message: this.yanzheng(),
+          type: "warning",
+          duration: 1500,
+        });
+      }
+    },
+    //验证信息
+    yanzheng() {
+      var tf = this.wormlist.every((item, index, arr) => {
+        return item.pest_name != "" && item.pest_num != "";
+      });
+      console.log(tf);
+      if (
+        this.warninfo.alien_species_status == false &&
+        this.warninfo.pest_name_status == false &&
+        this.warninfo.pest_total_status == false &&
+        this.warninfo.species_status == false
+      ) {
+        return "请至少开启一项预警信息";
+      } else if (
+        this.warninfo.species_status &&
+        this.warninfo.species_num == ""
+      ) {
+        return "请将目标种类预警信息填写完整";
+      } else if (this.warninfo.pest_name_status && tf == false) {
+        return "请将数量预警信息填写完整";
+      } else if (
+        this.warninfo.pest_total_status &&
+        this.warninfo.pest_total_num == ""
+      ) {
+        return "请将总量预警信息填写完整";
+      } else {
+        return "";
+      }
+    },
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  beforeMount() {}, //生命周期 - 挂载之前
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    this.getwarnlist();
+    this.getwarninfo();
+  },
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style scoped lang="less">
+.setwainbox {
+  width: 100%;
+  //   height: 100%;
+  background-color: #fff;
+  padding: 20px;
+  box-sizing: border-box;
+  .setinfo {
+    width: 100%;
+    margin-bottom: 25px;
+    .setinfo_off {
+      width: 100%;
+      display: flex;
+      .setinfo_off_index {
+        width: 24px;
+        height: 24px;
+        background-color: #409eff;
+        color: #fff;
+        text-align: center;
+        line-height: 24px;
+        border-radius: 50%;
+      }
+      .setinfo_off_title {
+        color: #1b76ff;
+        margin: 0 15px;
+      }
+      /deep/.el-switch {
+        margin-top: 3px;
+      }
+    }
+    .setinfo_text {
+      margin-top: 20px;
+      display: flex;
+      /deep/.el-input {
+        width: 250px;
+      }
+      .setinfo_text_describe {
+        line-height: 28px;
+        font-size: 12px;
+        margin-left: 15px;
+      }
+    }
+    .setinfo_text2 {
+      margin-top: 20px;
+      /deep/.el-select {
+        margin-right: 15px;
+      }
+      /deep/.el-input {
+        width: 250px;
+      }
+      .setinfo_text_describe {
+        line-height: 28px;
+        font-size: 12px;
+        margin-left: 15px;
+      }
+      .setinfo_text_ser {
+        display: flex;
+        margin-bottom: 10px;
+        .setinfo_text_addordel {
+          line-height: 28px;
+          font-size: 20px;
+          margin-left: 10px;
+        }
+      }
+    }
+  }
+  /deep/.el-button--info {
+    background-color: #409eff;
+    border-color: #409eff;
+  }
+}
+</style>

minggao/src/router/index.js

@@ -23,6 +23,8 @@ const motif = () => import('@/Page/systemmanger/motif') // 主题定制
 const harmfulBiology = () => import('@/Page/systemmanger/harmfulBiology') // 有害生物维护
 const userManger = () => import('@/Page/systemmanger/userManger') // 用户管理
 const dayRecord = () => import('@/Page/systemmanger/dayRecord') // 用户管理
+const equipmentOPS = () => import('@/Page/systemmanger/equipmentOPS') // 用户管理
+const coefficientset = () => import('@/Page/systemmanger/coefficientset') // 用户管理
 
 //---------------------------------------指挥中心----------------------------------------------------
 const realTime = () => import('@/Page/commandCenter/realTime') //实时通信
@@ -39,6 +41,10 @@ const superviseLogDetails = () => import('@/Page/commandCenter/superviseLogDetai
 //---------------------------------------监督记录----------------------------------------------------
 const superviseModule = () => import('@/Page/superviseModule/superviseModule') //监督记录 
 
+//---------------------------------------预警管理----------------------------------------------------
+const warningrecord = () => import('@/Page/warning/warningrecord') //预警记录 
+const warningset = () => import('@/Page/warning/warningset') //预警记录
+
 // *****************测报系统**********************
 import cbd from '@/page/forecasting/cbd/Cbd' //首页
 import DataDetails from '@/page/forecasting/cbd/DataDetails' //数据详情
@@ -142,6 +148,20 @@ export default new Router({
             title: '日志管理'
           }
         },
+        {
+          path: 'equipmentOPS',
+          component: equipmentOPS,
+          meta: {
+            title: '设备运行维护'
+          }
+        },
+        {
+          path: 'coefficientset',
+          component: coefficientset,
+          meta: {
+            title: '系数设置'
+          }
+        },
         //------------------系统管理--------------------------
         //------------------指挥中心--------------------------
         {
@@ -224,6 +244,22 @@ export default new Router({
           }
         },
         //------------------监督记录--------------------------
+        //------------------预警管理--------------------------
+        {
+          path: 'warningrecord',
+          component: warningrecord,
+          meta: {
+            title: '预警记录'
+          }
+        },
+        {
+          path: 'warningset',
+          component: warningset,
+          meta: {
+            title: '预警设置'
+          }
+        },
+        //------------------预警管理--------------------------
         {
           path: 'cbd',
           component: cbd