害虫录入更改 2/28

minggao/config/index.js

@@ -13,8 +13,8 @@ module.exports = {
     proxyTable: {
       '/api': {
         // target: 'http://192.168.1.17:12345', //翟毅飞
-        target: 'http://192.168.1.77:12345', //曹世祥
-        // target:"http://114.115.147.140:12345",
+        // target: 'http://192.168.1.77:12345', //曹世祥
+        target:"http://114.115.147.140:12345",
         changeOrigin: true,
         pathRewrite: {
           '^/api': '/api' //重写接口

minggao/src/assets/icon/demo_index.html

@@ -55,6 +55,42 @@
           <ul class="icon_lists dib-box">
           
             <li class="dib">
+              <span class="icon iconfont">&#xe67e;</span>
+                <div class="name">地点</div>
+                <div class="code-name">&amp;#xe67e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe750;</span>
+                <div class="name">首页-fill</div>
+                <div class="code-name">&amp;#xe750;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe63b;</span>
+                <div class="name">设置</div>
+                <div class="code-name">&amp;#xe63b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe63c;</span>
+                <div class="name">协同指挥大屏</div>
+                <div class="code-name">&amp;#xe63c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe940;</span>
+                <div class="name">数据库,数据</div>
+                <div class="code-name">&amp;#xe940;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe632;</span>
+                <div class="name">工作管理-订单管理</div>
+                <div class="code-name">&amp;#xe632;</div>
+              </li>
+          
+            <li class="dib">
               <span class="icon iconfont">&#xe63e;</span>
                 <div class="name">205用户_用户6</div>
                 <div class="code-name">&amp;#xe63e;</div>
@@ -774,9 +810,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1644976836266') format('woff2'),
-       url('iconfont.woff?t=1644976836266') format('woff'),
-       url('iconfont.ttf?t=1644976836266') format('truetype');
+  src: url('iconfont.woff2?t=1645854729946') format('woff2'),
+       url('iconfont.woff?t=1645854729946') format('woff'),
+       url('iconfont.ttf?t=1645854729946') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -803,6 +839,60 @@
         <ul class="icon_lists dib-box">
           
           <li class="dib">
+            <span class="icon iconfont icon-didian"></span>
+            <div class="name">
+              地点
+            </div>
+            <div class="code-name">.icon-didian
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-minggaoshouye"></span>
+            <div class="name">
+              首页-fill
+            </div>
+            <div class="code-name">.icon-minggaoshouye
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shezhi1"></span>
+            <div class="name">
+              设置
+            </div>
+            <div class="code-name">.icon-shezhi1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-xietongzhihuidaping"></span>
+            <div class="name">
+              协同指挥大屏
+            </div>
+            <div class="code-name">.icon-xietongzhihuidaping
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-database-full"></span>
+            <div class="name">
+              数据库,数据
+            </div>
+            <div class="code-name">.icon-database-full
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-gongzuoguanli-dingdanguanli"></span>
+            <div class="name">
+              工作管理-订单管理
+            </div>
+            <div class="code-name">.icon-gongzuoguanli-dingdanguanli
+            </div>
+          </li>
+          
+          <li class="dib">
             <span class="icon iconfont icon-205yonghu_yonghu6"></span>
             <div class="name">
               205用户_用户6
@@ -1884,6 +1974,54 @@
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-didian"></use>
+                </svg>
+                <div class="name">地点</div>
+                <div class="code-name">#icon-didian</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-minggaoshouye"></use>
+                </svg>
+                <div class="name">首页-fill</div>
+                <div class="code-name">#icon-minggaoshouye</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shezhi1"></use>
+                </svg>
+                <div class="name">设置</div>
+                <div class="code-name">#icon-shezhi1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xietongzhihuidaping"></use>
+                </svg>
+                <div class="name">协同指挥大屏</div>
+                <div class="code-name">#icon-xietongzhihuidaping</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-database-full"></use>
+                </svg>
+                <div class="name">数据库,数据</div>
+                <div class="code-name">#icon-database-full</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-gongzuoguanli-dingdanguanli"></use>
+                </svg>
+                <div class="name">工作管理-订单管理</div>
+                <div class="code-name">#icon-gongzuoguanli-dingdanguanli</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-205yonghu_yonghu6"></use>
                 </svg>
                 <div class="name">205用户_用户6</div>

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_u6z3ppm6nm.woff2?t=1644976660546') format('woff2'),
-       url('//at.alicdn.com/t/font_1738837_u6z3ppm6nm.woff?t=1644976660546') format('woff'),
-       url('//at.alicdn.com/t/font_1738837_u6z3ppm6nm.ttf?t=1644976660546') format('truetype');
+  src: url('//at.alicdn.com/t/font_1738837_llu41pt10a.woff2?t=1645854725746') format('woff2'),
+       url('//at.alicdn.com/t/font_1738837_llu41pt10a.woff?t=1645854725746') format('woff'),
+       url('//at.alicdn.com/t/font_1738837_llu41pt10a.ttf?t=1645854725746') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,30 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-didian:before {
+  content: "\e67e";
+}
+
+.icon-minggaoshouye:before {
+  content: "\e750";
+}
+
+.icon-shezhi1:before {
+  content: "\e63b";
+}
+
+.icon-xietongzhihuidaping:before {
+  content: "\e63c";
+}
+
+.icon-database-full:before {
+  content: "\e940";
+}
+
+.icon-gongzuoguanli-dingdanguanli:before {
+  content: "\e632";
+}
+
 .icon-205yonghu_yonghu6:before {
   content: "\e63e";
 }

minggao/src/assets/icon/iconfont.json

@@ -6,6 +6,48 @@
   "description": "",
   "glyphs": [
     {
+      "icon_id": "10268565",
+      "name": "地点",
+      "font_class": "didian",
+      "unicode": "e67e",
+      "unicode_decimal": 59006
+    },
+    {
+      "icon_id": "577363",
+      "name": "首页-fill",
+      "font_class": "minggaoshouye",
+      "unicode": "e750",
+      "unicode_decimal": 59216
+    },
+    {
+      "icon_id": "6865347",
+      "name": "设置",
+      "font_class": "shezhi1",
+      "unicode": "e63b",
+      "unicode_decimal": 58939
+    },
+    {
+      "icon_id": "9059914",
+      "name": "协同指挥大屏",
+      "font_class": "xietongzhihuidaping",
+      "unicode": "e63c",
+      "unicode_decimal": 58940
+    },
+    {
+      "icon_id": "18169760",
+      "name": "数据库,数据",
+      "font_class": "database-full",
+      "unicode": "e940",
+      "unicode_decimal": 59712
+    },
+    {
+      "icon_id": "24161256",
+      "name": "工作管理-订单管理",
+      "font_class": "gongzuoguanli-dingdanguanli",
+      "unicode": "e632",
+      "unicode_decimal": 58930
+    },
+    {
       "icon_id": "1308387",
       "name": "205用户_用户6",
       "font_class": "205yonghu_yonghu6",

minggao/src/page/commandCenter/laboratory.vue

@@ -266,6 +266,7 @@
               :key="item1.value"
               :label="item1.label"
               :value="item1.value"
+              :disabled="item1.disabled"
             >
             </el-option>
           </el-select>
@@ -558,6 +559,7 @@ export default {
             obj["label"] = item.pest_name;
             obj["num"] = item.pest_number;
             obj["ind"] = index;
+            obj["disabled"] = false;
             list.push(obj);
             arr.push(item.id);
           });
@@ -592,9 +594,20 @@ export default {
               obj["id"] = data.page_list[i].pest_id;
               obj["value"] = data.page_list[i].pest_name;
               obj["label"] = data.page_list[i].pest_name;
+              obj["disabled"] = false;
               list.push(obj);
             }
             this.options2 = list;
+            console.log(this.fillList, this.options2);
+            for (var i = 0; i < this.fillList.length; i++) {
+              for (var j = 0; j < this.options2.length; j++) {
+                if (this.fillList[i].label == this.options2[j].label) {
+                  this.options2[j].disabled = true;
+                } else {
+                  this.options2[j].disabled = false;
+                }
+              }
+            }
           }
         })
         .catch((err) => {
@@ -625,6 +638,15 @@ export default {
           item.ind = index;
           this.fillList.push(item);
         });
+        for (var i = 0; i < this.fillList.length; i++) {
+          for (var j = 0; j < this.options2.length; j++) {
+            if (this.fillList[i].label == this.options2[j].label) {
+              this.options2[j].disabled = true;
+            } else {
+              this.options2[j].disabled = false;
+            }
+          }
+        }
       } else {
         if (document.getElementsByClassName("el-message").length == 0) {
           this.$message({
@@ -647,6 +669,15 @@ export default {
       });
       this.fillList = [];
       this.fillList = list;
+      for (var i = 0; i < this.fillList.length; i++) {
+        for (var j = 0; j < this.options2.length; j++) {
+          if (this.fillList[i].label == this.options2[j].label) {
+            this.options2[j].disabled = true;
+          } else {
+            this.options2[j].disabled = false;
+          }
+        }
+      }
     },
 
     // 添加、删除确定事件

minggao/src/page/commandCenter/supervise.vue

@@ -298,6 +298,12 @@ export default {
         method: "POST",
         url: "/api/api_gateway?method=control_center.task.supervisor_export",
         responseType: "blob",
+        data: this.qs.stringify({
+          supervisor_user_id: this.input, // 非必填                   监督人id
+          start_time: this.startTime, // 非必填                     开始时间
+          end_time: this.endTime, // 非必填                     结束时间
+          supervisor_type: this.input2, //非必填                     监督形式
+        }),
       })
         .then((res) => {
           this.downloadFile(res, "监督记录.xls");

minggao/src/page/commandCenter/superviseLog.vue

@@ -88,19 +88,15 @@
         </el-table-column> -->
 
         <el-table-column prop="ind" label="序号"> </el-table-column>
-        <el-table-column prop="owner_user" label="监测人员">
+        <el-table-column prop="owner_user" label="监测人员"> </el-table-column>
+        <el-table-column prop="monitor_time" label="监测时间">
         </el-table-column>
-        <el-table-column prop="monitor_time" label="监测时间" >
+        <el-table-column prop="weather" label="天气"> </el-table-column>
+        <el-table-column prop="temperature" label="温度"> </el-table-column>
+        <el-table-column prop="address" label="地点"> </el-table-column>
+        <el-table-column prop="monitor_time" label="提交时间">
         </el-table-column>
-        <el-table-column prop="weather" label="天气" >
-        </el-table-column>
-        <el-table-column prop="temperature" label="温度">
-        </el-table-column>
-        <el-table-column prop="address" label="地点" >
-        </el-table-column>
-        <el-table-column prop="monitor_time" label="提交时间" >
-        </el-table-column>
-        <el-table-column label="操作"  fixed="right">
+        <el-table-column label="操作" fixed="right">
           <template slot-scope="scope">
             <a
               href="javascript:;"
@@ -259,7 +255,7 @@ export default {
       }
       this.loading = true;
       this.tableData = [];
-      this.page = 1
+      this.page = 1;
       this.tableList();
     },
 
@@ -299,6 +295,11 @@ export default {
       this.$axios({
         method: "POST",
         url: "/api/api_gateway?method=control_center.task.monitor_log_export",
+        data: this.qs.stringify({
+          monitor_user_id: this.input, //     非必填                   监测人id
+          start_time: this.startTime, //          非必填                     开始时间
+          end_time: this.endTime, //            非必填                     结束时间
+        }),
         responseType: "blob",
       })
         .then((res) => {

minggao/src/page/commandCenter/taskRegulator.vue

@@ -706,7 +706,7 @@ export default {
       }
     },
     checkList(val) {
-      console.log(val)
+      console.log(val);
       this.ybqCheckList = [];
       this.ruleForm.checkList = [];
       for (let i = 0; i < val.length; i++) {
@@ -718,7 +718,7 @@ export default {
           }
         }
       }
-      console.log(this.ruleForm.checkList)
+      console.log(this.ruleForm.checkList);
     },
   },
   //方法集合
@@ -919,7 +919,7 @@ export default {
               this.options = list;
             } else if (type == "owner") {
               // 任务发布人
-              this.loading3 = false
+              this.loading3 = false;
               this.options = list;
             }
           }
@@ -1000,17 +1000,16 @@ export default {
           }
 
           // 判断当前是否有修改诱捕器，如果没有修改需要将诱捕器列表格式更改
-          var arr = []
+          var arr = [];
           for (var i = 0; i < this.ruleForm.checkList.length; i++) {
             if (typeof this.ruleForm.checkList[i] == "object") {
-              arr.push(this.ruleForm.checkList[i].id)
+              arr.push(this.ruleForm.checkList[i].id);
             }
           }
 
           if (arr.length == 0) {
-            arr = this.ruleForm.checkList
-          } 
-
+            arr = this.ruleForm.checkList;
+          }
 
           // 判断当前任务类型是否为有害生物
           if (this.ruleForm.type !== "有害生物监测") {
@@ -1249,12 +1248,24 @@ export default {
 
     // 导出数据
     exportData() {
+      console.log(this.input)
+      console.log(this.input2)
+      console.log(this.startTime)
+      console.log(this.endTime)
+      console.log(this.value)
       var that = this;
       this.loadingShow = true;
       this.btnShow = true;
       this.$axios({
         method: "POST",
         url: "/api/api_gateway?method=control_center.task.task_export",
+        data: this.qs.stringify({
+          operator_user_id: this.input, //                       非必填                   任务处理人id
+          owner_user_id: this.input2, //                           非必填                   任务发布人id
+          start_time: this.startTime, //                              非必填                     开始时间
+          end_time: this.endTime, //                                非必填                     结束时间
+          task_status: this.value, //
+        }),
         responseType: "blob",
       })
         .then((res) => {

minggao/src/page/forecasting/cbd/PestsStats.vue

@@ -143,7 +143,7 @@
                   @click="handleEditA(scope.$index, scope.row)"
                   >害虫来源</el-button
                 >
-                <el-button
+                <!-- <el-button
                   style="background: #f7aa05"
                   type="warning"
                   size="mini"
@@ -152,7 +152,7 @@
                   v-viewer
                   @click="insectData(scope.$index, scope.row)"
                   >害虫资料</el-button
-                >
+                > -->
               </template>
             </el-table-column>
           </el-table>
@@ -195,7 +195,7 @@
                   @click="handleEdit(scope.$index, scope.row)"
                   >害虫来源</el-button
                 >
-                <el-button
+                <!-- <el-button
                   style="background: #f7aa05"
                   type="warning"
                   size="mini"
@@ -203,7 +203,7 @@
                   v-viewer
                   @click="insectData(scope.$index, scope.row)"
                   >害虫资料</el-button
-                >
+                > -->
               </template>
             </el-table-column>
           </el-table>
@@ -299,13 +299,13 @@
                     @click="handleEdit(scope.$index, scope.row)"
                     >害虫来源</el-button
                   >
-                  <el-button
+                  <!-- <el-button
                     style="background: #f7aa05"
                     type="warning"
                     size="mini"
                     @click="insectData(scope.$index, scope.row)"
                     >害虫资料</el-button
-                  >
+                  > -->
                 </template>
               </el-table-column>
             </el-table>
@@ -471,7 +471,7 @@
                   @click="handleEditA(scope.$index, scope.row)"
                   >害虫来源</el-button
                 >
-                <el-button
+                <!-- <el-button
                   style="background: #f7aa05"
                   type="warning"
                   size="mini"
@@ -479,7 +479,7 @@
                   v-viewer
                   @click="insectData(scope.$index, scope.row)"
                   >害虫资料</el-button
-                >
+                > -->
               </template>
             </el-table-column>
           </el-table>
@@ -2162,7 +2162,7 @@ export default {
       that
         .$axios({
           method: "post",
-          url: "/api/api_gateway?method=forecast.worm_lamp.photo_result",
+          url: "/api/api_gateway?method=monitor_manage.cbd_manage.photo_result",
           data: postData
         })
         .then(res => {

minggao/src/page/forecasting/maintain/maintain.vue

@@ -81,7 +81,7 @@
             <el-input v-model="ruleForm.point_name"></el-input>
           </el-form-item>
           <div class="addtrapbox">
-            <el-form-item label="所在纬度" prop="lng">
+            <el-form-item label="所在经度" prop="lng">
               <el-input v-model="ruleForm.lng"></el-input>
               <p style="height: 24px; padding-left: 16px">
                 {{ ToDegrees(ruleForm.lng, "lng") }}
@@ -621,7 +621,7 @@ export default {
     handle(ev) {
       this.downloadinput = ev.name;
       var datas = new FormData();
-      datas.append("username", localStorage.getItem("usernme"));
+      datas.append("username", localStorage.getItem("username"));
       datas.append("file", ev.raw);
       this.$axios({
         method: "POST",

minggao/src/page/forecasting/trap/trap.vue

@@ -753,8 +753,8 @@ export default {
     handle(ev) {
       this.downloadinput = ev.name;
       var datas = new FormData();
-      var username = localStorage.getItem("usernme")
-      datas.append("username", localStorage.getItem("usernme"));
+      var username = localStorage.getItem("username")
+      datas.append("username", username);
       datas.append("file", ev.raw);
       this.$axios({
         method: "POST",

minggao/src/page/home/index.vue

@@ -51,7 +51,7 @@
             :index="item.pur_id.toString()"
           >
             <template slot="title">
-              <i class="el-icon-collection-tag"></i>
+              <i :class="icon[item.pur_id]" style="color:#fff;"></i>
               <span>{{ item.purview_name }}</span>
             </template>
             <template v-for="items in item.children">
@@ -206,6 +206,14 @@ export default {
       },
       indexloading: false,
       pur_id: "",
+      icon:{
+        1:"iconfont icon-minggaoshouye",
+        4:"iconfont icon-xietongzhihuidaping",
+        10:"iconfont icon-didian",
+        20:"iconfont icon-gongzuoguanli-dingdanguanli",
+        22:"iconfont icon-database-full",
+        25:"iconfont icon-shezhi1",
+      }
     };
   },
   //监听属性 类似于data概念
@@ -241,7 +249,7 @@ export default {
         // this.infodata.shift();
         localStorage.setItem("userID", res.data.data.im_user_id); // 存储当前登录账号的ID
         this.username = res.data.data.username;
-        localStorage.setItem("usernme", this.username);
+        localStorage.setItem("username", this.username);
         this.routemap(this.routerdata);
       });
     },
@@ -261,7 +269,7 @@ export default {
       }).then((res) => {
         if (res.data.data) {
           localStorage.removeItem("session");
-          localStorage.removeItem("username");
+          // localStorage.removeItem("username");
           this.$router.push("/Login");
         }
       });

minggao/src/page/homepage/facilitydistribute.vue

@@ -131,7 +131,12 @@
               <span>{{ item.pest_name }}</span
               ><span>{{ item.sum }}</span>
             </p>
-            <p style="color: #fff; width: 100%; text-align: center" v-if="baseinfo[0].pest_list.length==0">暂无数据</p>
+            <p
+              style="color: #fff; width: 100%; text-align: center"
+              v-if="baseinfo[0].pest_list.length == 0"
+            >
+              暂无数据
+            </p>
           </div>
         </div>
         <div class="cbdinfobox" v-if="device_type_id == 3">
@@ -239,7 +244,7 @@ export default {
       // console.log(this.width)
     },
     device_type_id: function (val) {
-      console.log(val);
+      // console.log(val);
       if (val != 6) {
         if (this.myVideo2[`myPlayer`]) {
           this.myVideo2[`myPlayer`].stop();
@@ -249,66 +254,82 @@ export default {
   },
   //方法集合
   methods: {
-    init(data1, data2) {
+    init(data1) {
       var that = this;
       let myChart = echarts.init(document.getElementById("mychart"));
       var arr = [];
       const mapData = require("./json/shenzhen.json");
-      //   const name = "深圳";
-      arr.push(mapData.features);
-      //   echarts.registerMap(name, mapData);
+      const name = "深圳";
+      // arr.push(mapData.features);
+      echarts.registerMap(name, mapData);
       const mapData2 = require("./json/shanwei.json");
-      console.log(mapData2);
-      arr.push(mapData2.features);
-      //   const name2 = "汕尾";
-      //   echarts.registerMap(name2, mapData2);
+      // console.log(mapData2);
+      // arr.push(mapData2.features);
+      const name2 = "汕尾";
+      echarts.registerMap(name2, mapData2);
       const mapData3 = require("./json/huizhou.json");
       arr.push(mapData3.features);
-      //   const name3 = "惠州";
-      //   echarts.registerMap(name3, mapData3);
-
-      var arr2 = arr.reduce(function (a, b) {
-        return a.concat(b);
-      });
-      // console.log(arr2);
-      var xbMap = {
-        type: "FeatureCollection",
-        features: arr2,
-      };
+      const name3 = "惠州";
+      echarts.registerMap(name3, mapData3);
+      // var arr2 = arr.reduce(function (a, b) {
+      //   return a.concat(b);
+      // });
+      // var xbMap = {
+      //   type: "FeatureCollection",
+      //   features: arr2,
+      // };
 
-      echarts.registerMap("深圳", xbMap);
-      // let myChart = echarts.init(document.getElementById("mychart"));
+      // echarts.registerMap("深圳", xbMap);
       window.addEventListener("resize", function () {
         // undefined;
         myChart.resize();
       });
 
-      var data = data1;
-      var geoCoordMap = data2;
+      // var data = data1;
+      // var geoCoordMap = data2;
       myChart.on("click", (params) => {
-        if (params.componentType == "series") {
-          console.log(params.value[2]);
+        if (params.seriesType == "effectScatter") {
+          // console.log(params);
           this.device_type_id = params.value[2];
           this.pietf = true;
           // if(this.device_type_id == 6){
-          this.getbaseinfo(params.name);
+          this.getbaseinfo(params.value[3]);
           // }
         }
       });
-      var convertData = function (data) {
-        var res = [];
-        for (var i = 0; i < data.length; i++) {
-          var geoCoord = geoCoordMap[data[i].name];
-          if (geoCoord) {
-            res.push({
-              name: data[i].name,
-              value: geoCoord.concat(data[i].value),
-            });
-          }
+      // var data = data1.huizhou;
+      // var geoCoordMap = data2;
+      // var convertData = function (data) {
+      //   var res = [];
+      //   for (var i = 0; i < data.length; i++) {
+      //     var geoCoord = geoCoordMap[data[i].name];
+      //     if (geoCoord) {
+      //       res.push({
+      //         name: data[i].name,
+      //         value: geoCoord.concat(data[i].value),
+      //       });
+      //     }
+      //   }
+      //   return res;
+      // };
+      function format(city) {
+        var arr = [];
+        for (var i = 0; i < city.length; i++) {
+          var obj = {};
+          obj["value"] = [
+            Number(city[i].lat),
+            Number(city[i].lng),
+            Number(city[i].device_type_id),
+            Number(city[i].d_id),
+          ];
+          arr.push(obj);
         }
-        return res;
-      };
-
+        return arr;
+      }
+      var huizhou = format(data1.huizhou);
+      var shanwei = format(data1.shanwei_data);
+      var shenzhen = format(data1.shenzhen);
+      // console.log(huizhou);
       var option = {
         backgroundColor: "#252b45",
         title: {
@@ -332,45 +353,270 @@ export default {
             color: "#fff",
           },
         },
-        geo: {
-          map: "深圳",
-          label: {
-            normal: {
-              show: true,
-              color: "#fff",
+        geo: [
+          {
+            map: "深圳",
+            label: {
+              normal: {
+                show: true,
+                color: "#fff",
+              },
+              emphasis: {
+                show: true,
+              },
+            },
+            roam: true, //是否允许缩放
+            layoutCenter: ["25%", "60%"], //地图位置
+            layoutSize: "100%",
+            itemStyle: {
+              normal: {
+                color: "#031525", //地图背景色
+                borderColor: "rgba(100,149,237,1)", //省市边界线
+              },
+              emphasis: {
+                color: "rgba(37, 43, 61, .5)", //悬浮背景
+              },
             },
-            emphasis: {
-              show: true,
+            scaleLimit: {
+              //所属组件的z分层，z值小的图形会被z值大的图形覆盖
+              min: 0.5, //最小的缩放值
+              max: 50,
             },
           },
-          roam: true, //是否允许缩放
-          layoutCenter: ["50%", "105%"], //地图位置
-          layoutSize: "200%",
-          itemStyle: {
-            normal: {
-              color: "#031525", //地图背景色
-              borderColor: "rgba(100,149,237,1)", //省市边界线
+          {
+            map: "惠州",
+            label: {
+              normal: {
+                show: true,
+                color: "#fff",
+              },
+              emphasis: {
+                show: true,
+              },
             },
-            emphasis: {
-              color: "rgba(37, 43, 61, .5)", //悬浮背景
+            roam: true, //是否允许缩放
+            layoutCenter: ["80%", "50%"], //地图位置
+            layoutSize: "90%",
+            itemStyle: {
+              normal: {
+                color: "#031525", //地图背景色
+                borderColor: "rgba(100,149,237,1)", //省市边界线
+              },
+              emphasis: {
+                color: "rgba(37, 43, 61, .5)", //悬浮背景
+              },
+            },
+            scaleLimit: {
+              //所属组件的z分层，z值小的图形会被z值大的图形覆盖
+              min: 0.5, //最小的缩放值
+              max: 50,
             },
           },
-          scaleLimit: {
-            //所属组件的z分层，z值小的图形会被z值大的图形覆盖
-            min: 0.5, //最小的缩放值
-            max: 50,
+          {
+            map: "汕尾",
+            label: {
+              normal: {
+                show: true,
+                color: "#fff",
+              },
+              emphasis: {
+                show: true,
+              },
+            },
+            roam: true, //是否允许缩放
+            layoutCenter: ["55%", "60%"], //地图位置
+            layoutSize: "100%",
+            itemStyle: {
+              normal: {
+                color: "#031525", //地图背景色
+                borderColor: "rgba(100,149,237,1)", //省市边界线
+              },
+              emphasis: {
+                color: "rgba(37, 43, 61, .5)", //悬浮背景
+              },
+            },
+            scaleLimit: {
+              //所属组件的z分层，z值小的图形会被z值大的图形覆盖
+              min: 0.5, //最小的缩放值
+              max: 50,
+            },
           },
-        },
+        ],
         series: [
           {
+            type: "map",
+            map: "深圳",
+            geoIndex: 0,
+            aspectScale: 0.75, //长宽比
+            showLegendSymbol: false, // 存在legend时显示
+            label: {
+              normal: {
+                show: false,
+              },
+              emphasis: {
+                show: false,
+                textStyle: {
+                  color: "#fff",
+                },
+              },
+            },
+            roam: true,
+            itemStyle: {
+              normal: {
+                areaColor: "#031525",
+                borderColor: "#3B5077",
+              },
+              emphasis: {
+                areaColor: "#2B91B7",
+              },
+            },
+            animation: false,
+            data: [],
+          },
+          {
+            type: "map",
+            map: "惠州",
+            geoIndex: 0,
+            aspectScale: 0.75, //长宽比
+            showLegendSymbol: false, // 存在legend时显示
+            label: {
+              normal: {
+                show: false,
+              },
+              emphasis: {
+                show: false,
+                textStyle: {
+                  color: "#fff",
+                },
+              },
+            },
+            roam: true,
+            itemStyle: {
+              normal: {
+                areaColor: "#031525",
+                borderColor: "#3B5077",
+              },
+              emphasis: {
+                areaColor: "#2B91B7",
+              },
+            },
+            animation: false,
+            data: [],
+          },
+          {
+            type: "map",
+            map: "汕尾",
+            geoIndex: 0,
+            aspectScale: 0.75, //长宽比
+            showLegendSymbol: false, // 存在legend时显示
+            label: {
+              normal: {
+                show: false,
+              },
+              emphasis: {
+                show: false,
+                textStyle: {
+                  color: "#fff",
+                },
+              },
+            },
+            roam: true,
+            itemStyle: {
+              normal: {
+                areaColor: "#031525",
+                borderColor: "#3B5077",
+              },
+              emphasis: {
+                areaColor: "#2B91B7",
+              },
+            },
+            animation: false,
+            data: [],
+          },
+          {
+            name: "Top 5",
+            type: "effectScatter",
+            coordinateSystem: "geo",
+            geoIndex: 0,
+            data: shenzhen,
+            symbolSize: 12,
+            showEffectOn: "render",
+            rippleEffect: {
+              brushType: "stroke",
+            },
+            hoverAnimation: true,
+            label: {
+              normal: {
+                formatter: "{b}",
+                position: "right",
+                show: false,
+              },
+            },
+            itemStyle: {
+              normal: {
+                // color: "red",
+                color: function (e) {
+                  // console.log(e);
+                  var color = "";
+                  for (var i = 0; i < that.typeoptions.length; i++) {
+                    if (e.data.value[2] == that.typeoptions[i].type_id) {
+                      color = that.typeoptions[i].colour;
+                    }
+                  }
+                  // console.log(color)
+                  return color;
+                },
+                shadowBlur: 10,
+                shadowColor: "#333",
+              },
+            },
+            zlevel: 1,
+          },
+          {
+            name: "Top 5",
+            type: "effectScatter",
+            coordinateSystem: "geo",
+            geoIndex: 1,
+            data: huizhou,
+            symbolSize: 12,
+            showEffectOn: "render",
+            rippleEffect: {
+              brushType: "stroke",
+            },
+            hoverAnimation: true,
+            label: {
+              normal: {
+                formatter: "{b}",
+                position: "right",
+                show: false,
+              },
+            },
+            itemStyle: {
+              normal: {
+                // color: "red",
+                color: function (e) {
+                  // console.log(e);
+                  var color = "";
+                  for (var i = 0; i < that.typeoptions.length; i++) {
+                    if (e.data.value[2] == that.typeoptions[i].type_id) {
+                      color = that.typeoptions[i].colour;
+                    }
+                  }
+                  // console.log(color)
+                  return color;
+                },
+                shadowBlur: 10,
+                shadowColor: "#333",
+              },
+            },
+            zlevel: 1,
+          },
+          {
             name: "Top 5",
             type: "effectScatter",
             coordinateSystem: "geo",
-            data: convertData(
-              data.sort(function (a, b) {
-                return b.value - a.value;
-              })
-            ),
+            geoIndex: 2,
+            data: shanwei,
             symbolSize: 12,
             showEffectOn: "render",
             rippleEffect: {
@@ -386,8 +632,9 @@ export default {
             },
             itemStyle: {
               normal: {
+                // color: "red",
                 color: function (e) {
-                  // console.log(e.data.value[2]);
+                  // console.log(e);
                   var color = "";
                   for (var i = 0; i < that.typeoptions.length; i++) {
                     if (e.data.value[2] == that.typeoptions[i].type_id) {
@@ -412,7 +659,7 @@ export default {
       // this.pestboxloading = true
       this.$axios({
         method: "POST",
-        url: "/api/api_gateway?method=monitor_manage.home_map.device_distribute",
+        url: "/api/api_gateway?method=monitor_manage.home_map.device_distribute_new",
         data: this.qs.stringify({
           trap_number: this.idinput, //              非必传(string)               设备编号 搜索项
           point_id: this.inoffvalue, //                  非必传(string)               设备所属监测点id 搜索项
@@ -422,20 +669,27 @@ export default {
         }),
       }).then((res) => {
         // console.log(res.data.data);
-        var data = res.data.data;
-        var arr1 = [];
-        var obj2 = {};
-        for (var i = 0; i < data.length; i++) {
-          var obj = {
-            name: data[i].d_id,
-            value: data[i].device_type_id,
-          };
-          arr1.push(obj);
-          obj2[data[i].d_id] = [Number(data[i].lat), Number(data[i].lng)];
-          // console.log(obj2)
-        }
+        // var data = res.data.data;
+        // var arr1 = [];
+        // var obj2 = {};
+        // for (var i = 0; i < data.length; i++) {
+        //   var obj = {
+        //     name: data[i].d_id,
+        //     value: data[i].device_type_id,
+        //   };
+        //   arr1.push(obj);
+        //   obj2[data[i].d_id] = [Number(data[i].lat), Number(data[i].lng)];
+        //   // console.log(obj2)
+        // }
         // console.log(arr1,obj2)
-        this.init(arr1, obj2);
+        if (document.getElementsByClassName("el-message").length == 0) {
+          this.$message({
+            showClose: true,
+            message: "数据获取成功!",
+            type: "success",
+          });
+        }
+        this.init(res.data.data);
         // this.inoffoptions = res.data.data.point_data;
       });
     },
@@ -468,7 +722,7 @@ export default {
           page_item: "1000000",
         }),
       }).then((res) => {
-        console.log(res.data.data);
+        // console.log(res.data.data);
         this.versionsoptions2 = res.data.data.org_data;
         this.inoffoptions = res.data.data.point_data;
       });
@@ -478,7 +732,7 @@ export default {
         method: "POST",
         url: "/api/api_gateway?method=monitor_manage.home_map.home_map_device_type",
       }).then((res) => {
-        console.log(res.data.data);
+        // console.log(res.data.data);
         this.typeoptions = res.data.data;
         this.getbaselist();
       });
@@ -492,7 +746,7 @@ export default {
           d_id: d_id,
         }),
       }).then((res) => {
-        console.log(res.data.data);
+        // console.log(res.data.data);
         this.loading = false;
         this.baseinfo = res.data.data;
         if (this.baseinfo[0].device_info) {
@@ -509,7 +763,9 @@ export default {
           });
         } else {
           var dom = document.getElementById("myPlayer");
-          dom.style.display = "none";
+          if (dom) {
+            dom.style.display = "none";
+          }
         }
       });
     },
@@ -521,6 +777,7 @@ export default {
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
     // this.getmon();
+    // this.init()
     this.getmon2();
     this.gettype();
   },

minggao/src/page/homepage/facilitydistributeold.vue

@@ -0,0 +1,714 @@
+<!--  -->
+<template>
+  <div
+    class="pestbox"
+    v-loading="pestboxloading"
+    element-loading-text="拼命加载中"
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(0, 0, 0, 0.8)"
+  >
+    <div
+      :style="{ height: '100%', width: '100%' }"
+      id="mychart"
+      ref="mychart"
+    ></div>
+    <div class="searchbox">
+      <el-select
+        v-model="inoffvalue"
+        placeholder="请选择所在监测点"
+        size="mini"
+      >
+        <el-option
+          v-for="item in inoffoptions"
+          :key="item.point_id"
+          :label="item.point_name"
+          :value="item.point_id"
+        >
+        </el-option>
+      </el-select>
+      <el-select
+        v-model="versionsvalue2"
+        placeholder="请选择隶属海关"
+        size="mini"
+      >
+        <el-option
+          v-for="item in versionsoptions2"
+          :key="item.org_name"
+          :label="item.org_name"
+          :value="item.org_id"
+        >
+        </el-option>
+      </el-select>
+      <el-select v-model="statevalue" placeholder="请选择设备状态" size="mini">
+        <el-option
+          v-for="item in stateoptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+      <el-select v-model="typevalue" placeholder="请选择设备类型" size="mini">
+        <el-option
+          v-for="item in typeoptions"
+          :key="item.type_id"
+          :label="item.type_name"
+          :value="item.type_id"
+        >
+        </el-option>
+      </el-select>
+      <div class="inputbox">
+        <el-input
+          v-model="idinput"
+          placeholder="请输入设备编号"
+          size="mini"
+        ></el-input>
+      </div>
+      <el-button type="info" @click="search" size="mini">搜索</el-button>
+      <el-button @click="reset" size="mini">重置</el-button>
+    </div>
+    <div class="tallybox">
+      <p
+        class="tallybox_item"
+        v-for="(item, index) in typeoptions"
+        :key="index"
+      >
+        <span
+          class="tallybox_dian"
+          :style="{ backgroundColor: item.colour }"
+        ></span>
+        <span class="tallybox_text">{{ item.type_name }}</span>
+      </p>
+    </div>
+    <div class="piebox">
+      <p
+        :class="
+          pietf ? 'iconbox el-icon-arrow-right' : 'iconbox el-icon-arrow-left'
+        "
+        @click="pietf = !pietf"
+        style="cursor: pointer"
+      ></p>
+      <div class="tishi" :style="{ width: width }" v-if="baseinfo.length == 0">
+        <p>请点击设备标点，查看设备详情</p>
+      </div>
+      <div
+        v-else
+        :style="{ width: width }"
+        id="mychartpie"
+        ref="mychartpie"
+        v-loading="loading"
+        element-loading-text="拼命加载中"
+        element-loading-spinner="el-icon-loading"
+        element-loading-background="rgba(0, 0, 0, 0.8)"
+      >
+        <div class="infobox">
+          <h3>设备信息</h3>
+          <p>
+            <span>设备名称：</span
+            ><span>{{
+              baseinfo[0].device_name == "" ? "诱捕器" : baseinfo[0].device_name
+            }}</span>
+          </p>
+          <p>
+            <span>设备编号：</span><span>{{ baseinfo[0].device_id }}</span>
+          </p>
+          <p>
+            <span>所属监测点：</span><span>{{ baseinfo[0].poin_name }}</span>
+          </p>
+          <p>
+            <span>隶属海关：</span
+            ><span
+              v-for="item in baseinfo[0].temp_org_list"
+              :key="item.org_id"
+              >{{ item.org_name + "、" }}</span
+            >
+          </p>
+        </div>
+        <div class="wornbox" v-if="device_type_id == 4">
+          <h3>有害生物监测信息（统计）</h3>
+          <div class="wornbox_item">
+            <p v-for="(item, index) in baseinfo[0].pest_list" :key="index">
+              <span>{{ item.pest_name }}</span
+              ><span>{{ item.sum }}</span>
+            </p>
+            <p style="color: #fff; width: 100%; text-align: center" v-if="baseinfo[0].pest_list.length==0">暂无数据</p>
+          </div>
+        </div>
+        <div class="cbdinfobox" v-if="device_type_id == 3">
+          <h3>设备状态</h3>
+          <div class="cbdinfobox_item">
+            <p>
+              环境温度：<span>{{ baseinfo[0].device_data.at }} ℃</span>
+            </p>
+            <p>
+              环境湿度：<span>{{ baseinfo[0].device_data.ah }} %RH</span>
+            </p>
+          </div>
+          <div class="cbdinfobox_item">
+            <p>
+              设备开关：<span>{{
+                baseinfo[0].device_data.ds == 0 ? "关机" : "开机"
+              }}</span>
+            </p>
+            <p>
+              工作状态：<span>{{
+                baseinfo[0].device_data.ws == 0 ? "待机" : "工作"
+              }}</span>
+            </p>
+          </div>
+          <div class="cbdinfobox_item">
+            <p>
+              信号强度：<span>{{ baseinfo[0].device_data.csq }}</span>
+            </p>
+            <p>
+              最新上报时间：<span>{{ baseinfo[0].uptime }}</span>
+            </p>
+          </div>
+        </div>
+        <div class="cbdimg" v-if="device_type_id == 3">
+          <h3 class="title">最新虫情图片</h3>
+          <el-carousel :interval="5000" arrow="always">
+            <el-carousel-item
+              v-for="(item, index) in baseinfo[0].photo_data"
+              :key="index"
+            >
+              <img :src="item.addr" alt="" />
+            </el-carousel-item>
+          </el-carousel>
+        </div>
+        <div class="videoBonbox" v-if="device_type_id == 6">
+          <h3 class="title">实时监控</h3>
+          <div id="videoBon"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+import * as echarts from "echarts";
+import "../../../node_modules/echarts/map/js/china";
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      pietf: false,
+      width: "0px",
+      inoffvalue: "", //监测点 选择
+      inoffoptions: [], //监测点列表
+      versionsvalue2: "", //隶属海关 选择
+      versionsoptions2: [], //隶属海关列表
+      statevalue: "", //设备状态
+      stateoptions: [
+        {
+          value: "0",
+          label: "停用(离线)",
+        },
+        {
+          value: "1",
+          label: "正常(在线)",
+        },
+      ], //设备状态列表
+      typevalue: "", //设备类型
+      typeoptions: [], //设备类型 列表
+      idinput: "", //设备编号
+      baseinfo: [], //设备详情
+      loading: false,
+      device_type_id: 0,
+      myVideo2: {},
+      pestboxloading: true,
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {
+    pietf: function (val) {
+      // console.log(this.width)
+      if (val) {
+        this.width = "500px";
+      } else {
+        this.width = "0";
+        if (this.myVideo2[`myPlayer`]) {
+          this.myVideo2[`myPlayer`].stop();
+        }
+      }
+      // console.log(this.width)
+    },
+    device_type_id: function (val) {
+      console.log(val);
+      if (val != 6) {
+        if (this.myVideo2[`myPlayer`]) {
+          this.myVideo2[`myPlayer`].stop();
+        }
+      }
+    },
+  },
+  //方法集合
+  methods: {
+    init(data1, data2) {
+      var that = this;
+      let myChart = echarts.init(document.getElementById("mychart"));
+      var arr = [];
+      const mapData = require("./json/shenzhen.json");
+      //   const name = "深圳";
+      arr.push(mapData.features);
+      //   echarts.registerMap(name, mapData);
+      const mapData2 = require("./json/shanwei.json");
+      console.log(mapData2);
+      arr.push(mapData2.features);
+      //   const name2 = "汕尾";
+      //   echarts.registerMap(name2, mapData2);
+      const mapData3 = require("./json/huizhou.json");
+      arr.push(mapData3.features);
+      //   const name3 = "惠州";
+      //   echarts.registerMap(name3, mapData3);
+
+      var arr2 = arr.reduce(function (a, b) {
+        return a.concat(b);
+      });
+      // console.log(arr2);
+      var xbMap = {
+        type: "FeatureCollection",
+        features: arr2,
+      };
+
+      echarts.registerMap("深圳", xbMap);
+      // let myChart = echarts.init(document.getElementById("mychart"));
+      window.addEventListener("resize", function () {
+        // undefined;
+        myChart.resize();
+      });
+
+      var data = data1;
+      var geoCoordMap = data2;
+      myChart.on("click", (params) => {
+        if (params.componentType == "series") {
+          console.log(params.value[2]);
+          this.device_type_id = params.value[2];
+          this.pietf = true;
+          // if(this.device_type_id == 6){
+          this.getbaseinfo(params.name);
+          // }
+        }
+      });
+      var convertData = function (data) {
+        var res = [];
+        for (var i = 0; i < data.length; i++) {
+          var geoCoord = geoCoordMap[data[i].name];
+          if (geoCoord) {
+            res.push({
+              name: data[i].name,
+              value: geoCoord.concat(data[i].value),
+            });
+          }
+        }
+        return res;
+      };
+
+      var option = {
+        backgroundColor: "#252b45",
+        title: {
+          text: "",
+          subtext: "",
+          sublink: "",
+          left: "center",
+          textStyle: {
+            color: "#fff",
+          },
+        },
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        legend: {
+          orient: "vertical",
+          y: "bottom",
+          x: "right",
+          data: ["haidilao"],
+          textStyle: {
+            color: "#fff",
+          },
+        },
+        geo: {
+          map: "深圳",
+          label: {
+            normal: {
+              show: true,
+              color: "#fff",
+            },
+            emphasis: {
+              show: true,
+            },
+          },
+          roam: true, //是否允许缩放
+          layoutCenter: ["50%", "105%"], //地图位置
+          layoutSize: "200%",
+          itemStyle: {
+            normal: {
+              color: "#031525", //地图背景色
+              borderColor: "rgba(100,149,237,1)", //省市边界线
+            },
+            emphasis: {
+              color: "rgba(37, 43, 61, .5)", //悬浮背景
+            },
+          },
+          scaleLimit: {
+            //所属组件的z分层，z值小的图形会被z值大的图形覆盖
+            min: 0.5, //最小的缩放值
+            max: 50,
+          },
+        },
+        series: [
+          {
+            name: "Top 5",
+            type: "effectScatter",
+            coordinateSystem: "geo",
+            data: convertData(
+              data.sort(function (a, b) {
+                return b.value - a.value;
+              })
+            ),
+            symbolSize: 12,
+            showEffectOn: "render",
+            rippleEffect: {
+              brushType: "stroke",
+            },
+            hoverAnimation: true,
+            label: {
+              normal: {
+                formatter: "{b}",
+                position: "right",
+                show: false,
+              },
+            },
+            itemStyle: {
+              normal: {
+                color: function (e) {
+                  // console.log(e.data.value[2]);
+                  var color = "";
+                  for (var i = 0; i < that.typeoptions.length; i++) {
+                    if (e.data.value[2] == that.typeoptions[i].type_id) {
+                      color = that.typeoptions[i].colour;
+                    }
+                  }
+                  // console.log(color)
+                  return color;
+                },
+                shadowBlur: 10,
+                shadowColor: "#333",
+              },
+            },
+            zlevel: 1,
+          },
+        ],
+      };
+      echarts.init(document.getElementById("mychart")).setOption(option);
+      this.pestboxloading = false;
+    },
+    getbaselist() {
+      // this.pestboxloading = true
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=monitor_manage.home_map.device_distribute",
+        data: this.qs.stringify({
+          trap_number: this.idinput, //              非必传(string)               设备编号 搜索项
+          point_id: this.inoffvalue, //                  非必传(string)               设备所属监测点id 搜索项
+          org_id: this.versionsvalue2, //                    非必传(string)               设备所属组织id   搜索项
+          trap_status: this.statevalue, //               非必传(num)                  诱捕器状态  0停用 1正常 搜索项
+          type_id: this.typevalue, //                   非必传(num)                  3测报灯  4诱捕器  6监控 搜索项
+        }),
+      }).then((res) => {
+        // console.log(res.data.data);
+        var data = res.data.data;
+        var arr1 = [];
+        var obj2 = {};
+        for (var i = 0; i < data.length; i++) {
+          var obj = {
+            name: data[i].d_id,
+            value: data[i].device_type_id,
+          };
+          arr1.push(obj);
+          obj2[data[i].d_id] = [Number(data[i].lat), Number(data[i].lng)];
+          // console.log(obj2)
+        }
+        // console.log(arr1,obj2)
+        this.init(arr1, obj2);
+        // this.inoffoptions = res.data.data.point_data;
+      });
+    },
+    search() {
+      this.getbaselist();
+    },
+    reset() {
+      this.inoffvalue = "";
+      this.versionsvalue2 = "";
+      this.statevalue = "";
+      this.typevalue = "";
+      this.idinput = "";
+      this.getbaselist();
+    },
+    // getmon() {
+    //   //获取监测点列表 组织列表
+    //   this.$axios({
+    //     method: "POST",
+    //     url: "/api/api_gateway?method=sysmenage.usermanager.org_list",
+    //   }).then((res) => {
+    //     console.log(res.data.data);
+    //     this.inoffoptions = res.data.data.point_data;
+    //   });
+    // },
+    getmon2() {
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=monitor_manage.trap_manage.trap_org",
+        data: this.qs.stringify({
+          page_item: "1000000",
+        }),
+      }).then((res) => {
+        console.log(res.data.data);
+        this.versionsoptions2 = res.data.data.org_data;
+        this.inoffoptions = res.data.data.point_data;
+      });
+    },
+    gettype() {
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=monitor_manage.home_map.home_map_device_type",
+      }).then((res) => {
+        console.log(res.data.data);
+        this.typeoptions = res.data.data;
+        this.getbaselist();
+      });
+    },
+    getbaseinfo(d_id) {
+      this.loading = true;
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=monitor_manage.home_map.device_distribute_details",
+        data: this.qs.stringify({
+          d_id: d_id,
+        }),
+      }).then((res) => {
+        console.log(res.data.data);
+        this.loading = false;
+        this.baseinfo = res.data.data;
+        if (this.baseinfo[0].device_info) {
+          // console.log(this.baseinfo[0].device_info.hlsHd)
+          let hlsHd = this.baseinfo[0].device_info.hlsHd;
+          let playHtml = `<video id="myPlayer"  muted autoplay  poster='' controls playsInline  webkit-playsinline src="${hlsHd}"  style="width:100%; height:100%;"></video>`;
+          // console.log(hlsHd);
+          this.$nextTick(() => {
+            document.getElementById("videoBon").innerHTML = playHtml;
+            this.myVideo2[`myPlayer`] = new EZUIKit.EZUIPlayer(`myPlayer`);
+            setTimeout(() => {
+              this.myVideo2[`myPlayer`].play();
+            }, 150);
+          });
+        } else {
+          var dom = document.getElementById("myPlayer");
+          dom.style.display = "none";
+        }
+      });
+    },
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  beforeMount() {}, //生命周期 - 挂载之前
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    // this.getmon();
+    this.getmon2();
+    this.gettype();
+  },
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {
+    if (this.myVideo2[`myPlayer`]) {
+      this.myVideo2[`myPlayer`].stop();
+    }
+  }, //生命周期 - 销毁之前
+  destroyed() {
+    if (this.myVideo2[`myPlayer`]) {
+      this.myVideo2[`myPlayer`].stop();
+    }
+  }, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang="less" scoped>
+.pestbox {
+  width: 100%;
+  height: 97%;
+  position: relative;
+  overflow: hidden;
+  background-color: #252b45;
+  .tishi {
+    // width: 500px;
+    height: 50px;
+    color: #fff;
+    line-height: 50px;
+    background-color: #04243e;
+    text-align: center;
+    transition: width 1s ease;
+    overflow: hidden;
+  }
+  .searchbox {
+    position: absolute;
+    top: 10px;
+    left: 15px;
+    display: flex;
+    /deep/.el-select {
+      margin-right: 10px;
+    }
+    /deep/.el-date-editor {
+      margin-right: 10px;
+    }
+    /deep/.el-button--info {
+      background-color: #409eff;
+      border-color: #409eff;
+    }
+    .inputbox {
+      margin-right: 10px;
+      /deep/.el-input {
+        width: 200px;
+      }
+    }
+  }
+  .tallybox {
+    position: absolute;
+    top: 50px;
+    left: 15px;
+    .tallybox_item {
+      margin-bottom: 5px;
+      .tallybox_dian {
+        display: inline-block;
+        width: 6px;
+        height: 6px;
+        // background-color: #fff;
+        border-radius: 50%;
+      }
+      .tallybox_text {
+        // background-color: #fff;
+        // display: inline-block;
+        font-size: 14px;
+        color: #fff;
+      }
+    }
+  }
+  .piebox {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+    // height: 100%;
+    transition: width 1s ease;
+    overflow: hidden;
+    .iconbox {
+      width: 30px;
+      height: 50px;
+      background-color: chocolate;
+      color: #fff;
+      line-height: 50px;
+      text-align: center;
+      font-size: 25px;
+    }
+    #mychartpie {
+      transition: all 1s ease;
+      background-color: #04243e;
+      // padding: 20px;
+      box-sizing: border-box;
+      overflow: hidden;
+      border-radius: 10px;
+      .infobox {
+        padding: 20px 20px 0 20px;
+        h3 {
+          margin-top: 0;
+          color: #fff;
+        }
+        p {
+          margin-bottom: 15px;
+          color: #fff;
+          font-size: 14px;
+          span {
+            color: #04d5e8;
+          }
+          span:first-child {
+            display: inline-block;
+            width: 85px;
+            color: #fff;
+          }
+        }
+      }
+      .wornbox {
+        padding: 0 20px 20px;
+        h3 {
+          margin-top: 0;
+          color: #fff;
+        }
+        .wornbox_item {
+          display: flex;
+          flex-wrap: wrap;
+
+          p {
+            width: 40%;
+            margin-bottom: 15px;
+            color: #fff;
+            display: flex;
+            justify-content: space-between;
+            font-size: 14px;
+            margin-right: 20px;
+            span:nth-child(2) {
+              color: #04d5e8;
+            }
+          }
+        }
+      }
+      .cbdinfobox {
+        padding: 0 20px 20px;
+        h3 {
+          margin-top: 0;
+          color: #fff;
+        }
+        .cbdinfobox_item {
+          display: flex;
+          width: 100%;
+          margin: 0 15px 10px 0;
+          p {
+            color: #fff;
+            font-size: 14px;
+            margin-right: 20px;
+            span {
+              color: #04d5e8;
+            }
+          }
+          p:first-child {
+            width: 150px;
+          }
+        }
+      }
+      .cbdimg {
+        padding: 0px 20px 0 20px;
+        .title {
+          margin-top: 0;
+          color: #fff;
+        }
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+      .videoBonbox {
+        padding: 0 20px 20px;
+        h3 {
+          margin-top: 0;
+          color: #fff;
+        }
+      }
+    }
+  }
+}
+</style>

minggao/src/page/homepage/pestdistribute.vue

@@ -71,7 +71,7 @@
           pietf ? 'iconbox el-icon-arrow-right' : 'iconbox el-icon-arrow-left'
         "
         @click="pietf = !pietf"
-        style="cursor: pointer;"
+        style="cursor: pointer"
       ></p>
       <div
         :style="{
@@ -88,7 +88,12 @@
         element-loading-background="rgba(0, 0, 0, 0.8)"
       ></div>
     </div>
-    <el-dialog title="设置" :visible.sync="dialogVisible" width="500px" :close-on-click-modal="false">
+    <el-dialog
+      title="设置"
+      :visible.sync="dialogVisible"
+      width="500px"
+      :close-on-click-modal="false"
+    >
       <div class="shezhibox">
         <el-form
           :model="ruleForm"
@@ -169,40 +174,61 @@ export default {
   },
   //方法集合
   methods: {
-    init(trap_data_arr) {
-      console.log(trap_data_arr);
+    init(traparr) {
+    //   console.log(trap_data_arr);
       var that = this;
       let myChart = echarts.init(document.getElementById("mychart"));
       var arr = [];
       const mapData = require("./json/shenzhen.json");
-      //   const name = "深圳";
-      arr.push(mapData.features);
-      //   echarts.registerMap(name, mapData);
+      const name = "深圳";
+      // arr.push(mapData.features);
+      echarts.registerMap(name, mapData);
       const mapData2 = require("./json/shanwei.json");
-      console.log(mapData2);
-      arr.push(mapData2.features);
-      //   const name2 = "汕尾";
-      //   echarts.registerMap(name2, mapData2);
+      // console.log(mapData2);
+      // arr.push(mapData2.features);
+      const name2 = "汕尾";
+      echarts.registerMap(name2, mapData2);
       const mapData3 = require("./json/huizhou.json");
-      arr.push(mapData3.features);
-      //   const name3 = "惠州";
-      //   echarts.registerMap(name3, mapData3);
+      // arr.push(mapData3.features);
+      const name3 = "惠州";
+      echarts.registerMap(name3, mapData3);
 
-      var arr2 = arr.reduce(function (a, b) {
-        return a.concat(b);
-      });
-      // console.log(arr2);
-      var xbMap = {
-        type: "FeatureCollection",
-        features: arr2,
-      };
+      // var arr2 = arr.reduce(function (a, b) {
+      //   return a.concat(b);
+      // });
+      // // console.log(arr2);
+      // var xbMap = {
+      //   type: "FeatureCollection",
+      //   features: arr2,
+      // };
 
-      echarts.registerMap("深圳", xbMap);
+      // echarts.registerMap("深圳", xbMap);
       // let myChart = echarts.init(document.getElementById("mychart"));
       window.addEventListener("resize", function () {
         // undefined;
         myChart.resize();
       });
+
+      function citt(trap_data) {
+          // console.log(trap_data)
+        var trap_data_arr = [];
+        for (var i = 0; i < trap_data.length; i++) {
+          var obj = {
+            value: [
+              trap_data[i].lng,
+              trap_data[i].lat,
+              trap_data[i].pest_total,
+            ],
+            device_id: trap_data[i].device_id,
+            pest_data: trap_data[i].pest_data,
+          };
+          trap_data_arr.push(obj);
+        }
+        return trap_data_arr;
+      }
+    var huizhou = citt(traparr[0])
+    var shenzhen = citt(traparr[1])
+    var shanwei = citt(traparr[2])
       myChart.setOption({
         backgroundColor: "#252b45",
         title: {
@@ -222,8 +248,7 @@ export default {
             color: "#fff",
           },
         },
-        geo:
-          // [
+        geo: [
           {
             map: "深圳",
             label: {
@@ -236,8 +261,66 @@ export default {
               },
             },
             roam: true, //是否允许缩放
-            layoutCenter: ["50%", "110%"], //地图位置
-            layoutSize: "200%",
+            layoutCenter: ["25%", "60%"], //地图位置
+            layoutSize: "100%",
+            itemStyle: {
+              normal: {
+                color: "#031525", //地图背景色
+                borderColor: "rgba(100,149,237,1)", //省市边界线
+              },
+              emphasis: {
+                color: "rgba(37, 43, 61, .5)", //悬浮背景
+              },
+            },
+            scaleLimit: {
+              //所属组件的z分层，z值小的图形会被z值大的图形覆盖
+              min: 0.5, //最小的缩放值
+              max: 50,
+            },
+          },
+          {
+            map: "惠州",
+            label: {
+              normal: {
+                show: true,
+                color: "#fff",
+              },
+              emphasis: {
+                show: true,
+              },
+            },
+            roam: true, //是否允许缩放
+            layoutCenter: ["80%", "50%"], //地图位置
+            layoutSize: "90%",
+            itemStyle: {
+              normal: {
+                color: "#031525", //地图背景色
+                borderColor: "rgba(100,149,237,1)", //省市边界线
+              },
+              emphasis: {
+                color: "rgba(37, 43, 61, .5)", //悬浮背景
+              },
+            },
+            scaleLimit: {
+              //所属组件的z分层，z值小的图形会被z值大的图形覆盖
+              min: 0.5, //最小的缩放值
+              max: 50,
+            },
+          },
+          {
+            map: "汕尾",
+            label: {
+              normal: {
+                show: true,
+                color: "#fff",
+              },
+              emphasis: {
+                show: true,
+              },
+            },
+            roam: true, //是否允许缩放
+            layoutCenter: ["55%", "60%"], //地图位置
+            layoutSize: "100%",
             itemStyle: {
               normal: {
                 color: "#031525", //地图背景色
@@ -253,6 +336,7 @@ export default {
               max: 50,
             },
           },
+        ],
         tooltip: {
           show: true,
           // formatter: "{a}{b}{c}{d}",
@@ -308,12 +392,111 @@ export default {
             animation: false,
             data: [],
           },
+          {
+            type: "map",
+            map: "惠州",
+            geoIndex: 0,
+            aspectScale: 0.75, //长宽比
+            showLegendSymbol: false, // 存在legend时显示
+            label: {
+              normal: {
+                show: false,
+              },
+              emphasis: {
+                show: false,
+                textStyle: {
+                  color: "#fff",
+                },
+              },
+            },
+            roam: true,
+            itemStyle: {
+              normal: {
+                areaColor: "#031525",
+                borderColor: "#3B5077",
+              },
+              emphasis: {
+                areaColor: "#2B91B7",
+              },
+            },
+            animation: false,
+            data: [],
+          },
+          {
+            type: "map",
+            map: "汕尾",
+            geoIndex: 0,
+            aspectScale: 0.75, //长宽比
+            showLegendSymbol: false, // 存在legend时显示
+            label: {
+              normal: {
+                show: false,
+              },
+              emphasis: {
+                show: false,
+                textStyle: {
+                  color: "#fff",
+                },
+              },
+            },
+            roam: true,
+            itemStyle: {
+              normal: {
+                areaColor: "#031525",
+                borderColor: "#3B5077",
+              },
+              emphasis: {
+                areaColor: "#2B91B7",
+              },
+            },
+            animation: false,
+            data: [],
+          },
           // ["scatter","effectScatter"]
           {
             name: "害虫",
             type: "scatter",
             coordinateSystem: "geo",
-            // geoIndex: 2,
+            geoIndex: 0,
+            symbolSize: function (val) {
+              // var num = Number(that.ruleForm.threshold)
+              // if(val<Math.floor(num*0.2)){
+              //   return 12
+              // }else if(val<Math.floor(num*0.4)){
+              //   return 14
+              // }else if(val<Math.floor(num*0.6)){
+              //   return 16
+              // }else if(val<Math.floor(num*0.8)){
+              //   return 18
+              // }else if(val<num){
+              //   return 20
+              // }else{
+              //   return 22
+              // }
+              return 12;
+            },
+            data: shenzhen,
+            label: {
+              normal: {
+                formatter: "{b}",
+                position: "right",
+                show: true,
+              },
+              emphasis: {
+                show: true,
+              },
+            },
+            itemStyle: {
+              normal: {
+                color: "#05C3F9",
+              },
+            },
+          },
+          {
+            name: "害虫",
+            type: "scatter",
+            coordinateSystem: "geo",
+            geoIndex: 1,
             symbolSize: function (val) {
               // var num = Number(that.ruleForm.threshold)
               // if(val<Math.floor(num*0.2)){
@@ -331,7 +514,46 @@ export default {
               // }
               return 12;
             },
-            data: trap_data_arr,
+            data: huizhou,
+            label: {
+              normal: {
+                formatter: "{b}",
+                position: "right",
+                show: true,
+              },
+              emphasis: {
+                show: true,
+              },
+            },
+            itemStyle: {
+              normal: {
+                color: "#05C3F9",
+              },
+            },
+          },
+          {
+            name: "害虫",
+            type: "scatter",
+            coordinateSystem: "geo",
+            geoIndex: 2,
+            symbolSize: function (val) {
+              // var num = Number(that.ruleForm.threshold)
+              // if(val<Math.floor(num*0.2)){
+              //   return 12
+              // }else if(val<Math.floor(num*0.4)){
+              //   return 14
+              // }else if(val<Math.floor(num*0.6)){
+              //   return 16
+              // }else if(val<Math.floor(num*0.8)){
+              //   return 18
+              // }else if(val<num){
+              //   return 20
+              // }else{
+              //   return 22
+              // }
+              return 12;
+            },
+            data: shanwei,
             label: {
               normal: {
                 formatter: "{b}",
@@ -544,7 +766,7 @@ export default {
       this.loading = true;
       this.$axios({
         method: "POST",
-        url: "/api/api_gateway?method=monitor_manage.home_map.pest_distribute",
+        url: "/api/api_gateway?method=monitor_manage.home_map.pest_distribute_new",
         data: this.qs.stringify({
           pest_name: this.wornvalue, //                非必传(string)               有害生物名称 搜索项
           point_name: this.inoffvalue, //               非必传(string)               设备所属监测点 搜索项
@@ -554,31 +776,9 @@ export default {
         }),
       }).then((res) => {
         this.loading = false;
-        console.log(res.data.data.pest_count);
-        var trap_data = res.data.data.trap_data;
-        var num = 0;
-        var trap_data_arr = [];
-        for (var i = 0; i < trap_data.length; i++) {
-          if (trap_data[i].pest_total > num) {
-            num = trap_data[i].pest_total;
-          }
-          var obj = {
-            value: [
-              trap_data[i].lng,
-              trap_data[i].lat,
-              trap_data[i].pest_total,
-            ],
-            device_id: trap_data[i].device_id,
-            pest_data: trap_data[i].pest_data,
-          };
-          trap_data_arr.push(obj);
-        }
-        if (res.data.data.threshold == 0) {
-          this.ruleForm.threshold = num;
-        } else {
-          this.ruleForm.threshold = res.data.data.threshold;
-        }
-        
+        // console.log(res.data.data.pest_count);
+        // var trap_data = res.data.data.trap_data;
+        this.ruleForm.threshold = res.data.data.threshold || 100;
         var pest_count = res.data.data.pest_count;
         var arr = [];
         for (var i = 0; i < pest_count.length; i++) {
@@ -588,20 +788,25 @@ export default {
           };
           arr.push(obj);
         }
-        this.$nextTick(()=>{
+        var trap_data_arr = [
+          res.data.data.huizhou,
+          res.data.data.shenzhen,
+          res.data.data.shanwei,
+        ];
+        this.$nextTick(() => {
           this.init(trap_data_arr);
-        })
+        });
         this.initpie(arr);
       });
     },
-    getwornlistflex(){
+    getwornlistflex() {
       this.$axios({
         method: "POST",
         url: "/api/api_gateway?method=monitor_manage.home_map.pest_name_list",
       }).then((res) => {
-        console.log(res.data.data)
+        // console.log(res.data.data);
         this.wornoptions = [];
-        var pest_list = res.data.data
+        var pest_list = res.data.data;
         for (var i = 0; i < pest_list.length; i++) {
           var obj2 = {
             point_id: pest_list[i].pest_name,
@@ -609,7 +814,7 @@ export default {
           };
           this.wornoptions.push(obj2);
         }
-      })
+      });
     },
     tabtime(times) {
       //时间转换
@@ -630,14 +835,14 @@ export default {
       this.inoffvalue = "";
       this.versionsvalue2 = "";
       this.timevalue = "";
-      this.getwornlist()
+      this.getwornlist();
     },
     getmon2() {
       this.$axios({
         method: "POST",
         url: "/api/api_gateway?method=monitor_manage.trap_manage.pest_trap_org",
       }).then((res) => {
-        console.log(res.data.data);
+        // console.log(res.data.data);
         this.versionsoptions2 = res.data.data.org_list;
         this.inoffoptions = res.data.data.point_data;
       });
@@ -655,30 +860,30 @@ export default {
             if (res.data.data) {
               this.dialogVisible = false;
               if (document.getElementsByClassName("el-message").length == 0) {
-              this.$message({
-                showClose: true,
-                message: "设置成功",
-                type: "success",
-              });
+                this.$message({
+                  showClose: true,
+                  message: "设置成功",
+                  type: "success",
+                });
               }
-              this.getwornlist()
+              this.getwornlist();
             } else {
               if (document.getElementsByClassName("el-message").length == 0) {
-              this.$message({
-                showClose: true,
-                message: "设置失败",
-                type: "success",
-              });
+                this.$message({
+                  showClose: true,
+                  message: "设置失败",
+                  type: "success",
+                });
               }
             }
           });
         } else {
           if (document.getElementsByClassName("el-message").length == 0) {
-          this.$message({
-            showClose: true,
-            message: "设置失败" + res.data.message,
-            type: "warning",
-          });
+            this.$message({
+              showClose: true,
+              message: "设置失败" + res.data.message,
+              type: "warning",
+            });
           }
           // return false;
         }
@@ -696,7 +901,7 @@ export default {
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
     this.getwornlist();
-    this.getwornlistflex()
+    this.getwornlistflex();
     // this.getmon();
     this.getmon2();
   },
@@ -761,9 +966,9 @@ export default {
     width: 50%;
   }
 }
-/deep/.el-date-editor{
+/deep/.el-date-editor {
   cursor: pointer;
-  .el-range-input{
+  .el-range-input {
     cursor: pointer;
   }
 }

minggao/src/page/homepage/pestdistributeold.vue

@@ -0,0 +1,833 @@
+<!--  -->
+<template>
+  <div
+    class="pestbox"
+    v-loading="pestboxloading"
+    element-loading-text="拼命加载中"
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(0, 0, 0, 0.8)"
+  >
+    <div
+      :style="{ height: '100%', width: '100%' }"
+      id="mychart"
+      ref="mychart"
+    ></div>
+    <div class="searchbox">
+      <el-select v-model="wornvalue" placeholder="请选择害虫名称" size="mini">
+        <el-option
+          v-for="item in wornoptions"
+          :key="item.point_id"
+          :label="item.point_name"
+          :value="item.point_id"
+        >
+        </el-option>
+      </el-select>
+      <el-select
+        v-model="inoffvalue"
+        placeholder="请选择所在监测点"
+        size="mini"
+      >
+        <el-option
+          v-for="item in inoffoptions"
+          :key="item.point_name"
+          :label="item.point_name"
+          :value="item.point_name"
+        >
+        </el-option>
+      </el-select>
+      <el-select
+        v-model="versionsvalue2"
+        placeholder="请选择隶属海关"
+        size="mini"
+      >
+        <el-option
+          v-for="item in versionsoptions2"
+          :key="item.org_name"
+          :label="item.org_name"
+          :value="item.org_name"
+        >
+        </el-option>
+      </el-select>
+      <el-date-picker
+        v-model="timevalue"
+        type="daterange"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        @change="oickchange"
+        size="mini"
+        :editable="false"
+      >
+      </el-date-picker>
+      <el-button type="info" @click="search" size="mini">搜索</el-button>
+      <el-button @click="reset" size="mini">重置</el-button>
+      <el-button type="warning" @click="dialogVisible = true" size="mini"
+        >设置</el-button
+      >
+    </div>
+    <div class="piebox">
+      <p
+        :class="
+          pietf ? 'iconbox el-icon-arrow-right' : 'iconbox el-icon-arrow-left'
+        "
+        @click="pietf = !pietf"
+        style="cursor: pointer"
+      ></p>
+      <div
+        :style="{
+          height: '500px',
+          width: width,
+          transition: 'all 1s ease',
+          borderRadius: '10px',
+        }"
+        id="mychartpie"
+        ref="mychartpie"
+        v-loading="loading"
+        element-loading-text="拼命加载中"
+        element-loading-spinner="el-icon-loading"
+        element-loading-background="rgba(0, 0, 0, 0.8)"
+      ></div>
+    </div>
+    <el-dialog
+      title="设置"
+      :visible.sync="dialogVisible"
+      width="500px"
+      :close-on-click-modal="false"
+    >
+      <div class="shezhibox">
+        <el-form
+          :model="ruleForm"
+          :rules="rules"
+          ref="ruleForm"
+          class="demo-ruleForm"
+        >
+          <el-form-item label="最大害虫数量设置可标红" prop="threshold">
+            <el-input v-model="ruleForm.threshold" size="mini"></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('ruleForm')" size="mini">取 消</el-button>
+        <el-button type="primary" @click="submitForm('ruleForm')" size="mini"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+import * as echarts from "echarts";
+import { map, time } from "highcharts";
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: {},
+  data() {
+    //这里存放数据
+    var checklnglat = (rule, value, callback) => {
+      if (isNaN(value)) {
+        callback(new Error("请输入数字"));
+      } else {
+        callback();
+      }
+    };
+    return {
+      pietf: true,
+      width: "500px",
+      wornvalue: "", //有害生物名称 选择
+      wornoptions: [], //有害生物列表
+      inoffvalue: "", //监测点 选择
+      inoffoptions: [], //监测点列表
+      versionsvalue2: "", //隶属海关选择
+      versionsoptions2: [], //隶属海关列表
+      timevalue: "",
+      start_time: "",
+      end_time: "",
+      loading: false,
+      dialogVisible: false,
+      ruleForm: {
+        threshold: "100", //阈值
+      },
+      rules: {
+        name: [
+          { required: true, message: "请输入值", trigger: "blur" },
+          { validator: checklnglat, trigger: "blur" },
+        ],
+      },
+      pestboxloading: true,
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {
+    pietf: function (val) {
+      // console.log(this.width)
+      if (val) {
+        this.width = "500px";
+      } else {
+        this.width = "0";
+      }
+      // console.log(this.width)
+    },
+  },
+  //方法集合
+  methods: {
+    init(trap_data_arr) {
+      console.log(trap_data_arr);
+      var that = this;
+      let myChart = echarts.init(document.getElementById("mychart"));
+      var arr = [];
+      const mapData = require("./json/shenzhen.json");
+      const name = "深圳";
+      // arr.push(mapData.features);
+      echarts.registerMap(name, mapData);
+      const mapData2 = require("./json/shanwei.json");
+      // console.log(mapData2);
+      // arr.push(mapData2.features);
+      const name2 = "汕尾";
+      echarts.registerMap(name2, mapData2);
+      const mapData3 = require("./json/huizhou.json");
+      // arr.push(mapData3.features);
+      const name3 = "惠州";
+      echarts.registerMap(name3, mapData3);
+
+      // var arr2 = arr.reduce(function (a, b) {
+      //   return a.concat(b);
+      // });
+      // // console.log(arr2);
+      // var xbMap = {
+      //   type: "FeatureCollection",
+      //   features: arr2,
+      // };
+
+      // echarts.registerMap("深圳", xbMap);
+      // let myChart = echarts.init(document.getElementById("mychart"));
+      window.addEventListener("resize", function () {
+        // undefined;
+        myChart.resize();
+      });
+      myChart.setOption({
+        backgroundColor: "#252b45",
+        title: {
+          left: "center",
+          textStyle: {
+            color: "#000",
+          },
+        },
+        visualMap: {
+          min: 0,
+          max: Number(that.ruleForm.threshold),
+          calculable: true,
+          inRange: {
+            color: ["#50a3ba", "#eac736", "#d94e5d"],
+          },
+          textStyle: {
+            color: "#fff",
+          },
+        },
+        geo: [
+          {
+            map: "深圳",
+            label: {
+              normal: {
+                show: true,
+                color: "#fff",
+              },
+              emphasis: {
+                show: true,
+              },
+            },
+            roam: true, //是否允许缩放
+            layoutCenter: ["25%", "60%"], //地图位置
+            layoutSize: "100%",
+            itemStyle: {
+              normal: {
+                color: "#031525", //地图背景色
+                borderColor: "rgba(100,149,237,1)", //省市边界线
+              },
+              emphasis: {
+                color: "rgba(37, 43, 61, .5)", //悬浮背景
+              },
+            },
+            scaleLimit: {
+              //所属组件的z分层，z值小的图形会被z值大的图形覆盖
+              min: 0.5, //最小的缩放值
+              max: 50,
+            },
+          },
+          {
+            map: "惠州",
+            label: {
+              normal: {
+                show: true,
+                color: "#fff",
+              },
+              emphasis: {
+                show: true,
+              },
+            },
+            roam: true, //是否允许缩放
+            layoutCenter: ["80%", "50%"], //地图位置
+            layoutSize: "90%",
+            itemStyle: {
+              normal: {
+                color: "#031525", //地图背景色
+                borderColor: "rgba(100,149,237,1)", //省市边界线
+              },
+              emphasis: {
+                color: "rgba(37, 43, 61, .5)", //悬浮背景
+              },
+            },
+            scaleLimit: {
+              //所属组件的z分层，z值小的图形会被z值大的图形覆盖
+              min: 0.5, //最小的缩放值
+              max: 50,
+            },
+          },
+          {
+            map: "汕尾",
+            label: {
+              normal: {
+                show: true,
+                color: "#fff",
+              },
+              emphasis: {
+                show: true,
+              },
+            },
+            roam: true, //是否允许缩放
+            layoutCenter: ["55%", "60%"], //地图位置
+            layoutSize: "100%",
+            itemStyle: {
+              normal: {
+                color: "#031525", //地图背景色
+                borderColor: "rgba(100,149,237,1)", //省市边界线
+              },
+              emphasis: {
+                color: "rgba(37, 43, 61, .5)", //悬浮背景
+              },
+            },
+            scaleLimit: {
+              //所属组件的z分层，z值小的图形会被z值大的图形覆盖
+              min: 0.5, //最小的缩放值
+              max: 50,
+            },
+          },
+        ],
+        tooltip: {
+          show: true,
+          // formatter: "{a}{b}{c}{d}",
+          formatter: function (e) {
+            // console.log(e);
+            if (e.seriesType == "scatter") {
+              var str = ``;
+              for (var i = 0; i < e.data.pest_data.length; i++) {
+                str +=
+                  `<p>` +
+                  e.data.pest_data[i].pest_name +
+                  ` ：` +
+                  e.data.pest_data[i].sum +
+                  ` 只</p>`;
+              }
+              return (
+                `<div><p>设备id ：` + e.data.device_id + `</p>` + str + `</div>`
+              );
+            } else {
+              return e.name;
+            }
+            // var name = e.seriesName
+          },
+        },
+        series: [
+          {
+            type: "map",
+            map: "深圳",
+            geoIndex: 0,
+            aspectScale: 0.75, //长宽比
+            showLegendSymbol: false, // 存在legend时显示
+            label: {
+              normal: {
+                show: false,
+              },
+              emphasis: {
+                show: false,
+                textStyle: {
+                  color: "#fff",
+                },
+              },
+            },
+            roam: true,
+            itemStyle: {
+              normal: {
+                areaColor: "#031525",
+                borderColor: "#3B5077",
+              },
+              emphasis: {
+                areaColor: "#2B91B7",
+              },
+            },
+            animation: false,
+            data: [],
+          },
+          // ["scatter","effectScatter"]
+          {
+            name: "害虫",
+            type: "scatter",
+            coordinateSystem: "geo",
+            // geoIndex: 2,
+            symbolSize: function (val) {
+              // var num = Number(that.ruleForm.threshold)
+              // if(val<Math.floor(num*0.2)){
+              //   return 12
+              // }else if(val<Math.floor(num*0.4)){
+              //   return 14
+              // }else if(val<Math.floor(num*0.6)){
+              //   return 16
+              // }else if(val<Math.floor(num*0.8)){
+              //   return 18
+              // }else if(val<num){
+              //   return 20
+              // }else{
+              //   return 22
+              // }
+              return 12;
+            },
+            data: trap_data_arr,
+            label: {
+              normal: {
+                formatter: "{b}",
+                position: "right",
+                show: true,
+              },
+              emphasis: {
+                show: true,
+              },
+            },
+            itemStyle: {
+              normal: {
+                color: "#05C3F9",
+              },
+            },
+          },
+        ],
+      });
+      this.pestboxloading = false;
+      // var time  = setTimeout(() => {
+      //   this.search(); // 搜索
+      // }, 500)
+      // clearTimeout(time)
+    },
+    initpie(data) {
+      var data = data;
+      var placeHolderStyle = {
+        normal: {
+          label: {
+            show: false,
+          },
+          labelLine: {
+            show: false,
+          },
+          color: "rgba(0, 0, 0, 0)",
+          borderColor: "rgba(0, 0, 0, 0)",
+          borderWidth: 0,
+        },
+      };
+      var data1 = [];
+      var data2 = [];
+      var colorIn = [
+        "rgb(33, 166, 161)",
+        "rgb(102,113,209)",
+        "rgb(230,144,78)",
+        "rgb(38,185,211)",
+        "rgb(82,125,12)",
+        "rgb(35,70,209)",
+      ];
+      var colorOut = [
+        "rgba(33, 166, 161, 0.5)",
+        "rgba(102,113,209, 0.5)",
+        "rgba(230,144,78, 0.5)",
+        "rgba(38,185,211, 0.5)",
+        "rgb(82,125,12,0.5)",
+        "rgb(35,70,209,0.5)",
+      ];
+      for (var i = 0; i < data.length; i++) {
+        data1.push({
+          data: data[i].value,
+          value: data[i].value,
+          name: data[i].name,
+          itemStyle: {
+            normal: {
+              color: colorOut[i],
+            },
+          },
+        });
+        data2.push({
+          data: data[i].value,
+          value: data[i].value,
+          name: data[i].name,
+          itemStyle: {
+            normal: {
+              color: colorIn[i],
+            },
+          },
+        });
+      }
+      var dataArr = [];
+      for (var i = 0; i < 100; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 25,
+            itemStyle: {
+              normal: {
+                color: "#2ac9e1",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 20,
+            itemStyle: {
+              normal: {
+                color: "rgba(0,0,0,0)",
+                borderWidth: 0,
+                borderColor: "rgba(0,0,0,0)",
+              },
+            },
+          });
+        }
+      }
+      var option = {
+        title: {
+          text: "有害生物占比",
+          subtext: "",
+          sublink: "",
+          left: "center",
+          textStyle: {
+            color: "#fff",
+          },
+          top: "5%",
+        },
+        backgroundColor: "#04243E",
+        tooltip: {
+          title: "详情",
+          trigger: "item",
+          formatter: "{a} <br/>{b}: {c} ({d}%)",
+        },
+        legend: {
+          orient: "horizontal",
+          bottom: "5%",
+          itemWidth: 10,
+          itemHeight: 10,
+          x: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+          show: true,
+          data: data,
+        },
+        series: [
+          {
+            type: "pie",
+            zlevel: 3,
+            silent: true,
+            // center: ['50%', '40%'],
+            radius: ["43%", "45%"],
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: dataArr,
+          },
+          {
+            name: "详情",
+            type: "pie",
+            selectedMode: "single",
+            radius: [0, "40%"],
+            label: {
+              formatter: "{d}%",
+              position: "inner",
+            },
+            data: data2,
+          },
+          {
+            name: "详情",
+            type: "pie",
+            radius: ["48%", "50%"],
+            labelLine: {
+              normal: {
+                length: 10,
+                length2: 14,
+              },
+            },
+            label: {
+              show: true,
+              position: "outer",
+              alignTo: "labelLine",
+              // ·圆点
+              backgroundColor: "auto",
+              height: 0,
+              width: 0,
+              lineHeight: 0,
+              distanceToLabelLine: 0,
+              borderRadius: 2.5,
+              padding: [2.5, -2.5, 2.5, -2.5],
+              formatter: "{a|{b} }",
+              rich: {
+                a: {
+                  padding: [0, 0, 0, 10],
+                  color: "#aebfe8",
+                  fontSize: 14,
+                },
+                b: {
+                  padding: [0, 10, 0, 0],
+                  fontSize: 14,
+                },
+              },
+            },
+            data: data1,
+          },
+        ],
+      };
+      echarts.init(document.getElementById("mychartpie")).setOption(option);
+    },
+    getwornlist() {
+      this.loading = true;
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=monitor_manage.home_map.pest_distribute",
+        data: this.qs.stringify({
+          pest_name: this.wornvalue, //                非必传(string)               有害生物名称 搜索项
+          point_name: this.inoffvalue, //               非必传(string)               设备所属监测点 搜索项
+          org_name: this.versionsvalue2, //                 非必传(string)               设备所属组织   搜索项
+          start_time: this.start_time, //               非必传(string)               开始时间  搜索项 2022-01-20
+          end_time: this.end_time, //                 非必传(string)               结束时间  搜索项 2022-01-23
+        }),
+      }).then((res) => {
+        this.loading = false;
+        console.log(res.data.data.pest_count);
+        var trap_data = res.data.data.trap_data;
+        var num = 0;
+        var trap_data_arr = [];
+        for (var i = 0; i < trap_data.length; i++) {
+          if (trap_data[i].pest_total > num) {
+            num = trap_data[i].pest_total;
+          }
+          var obj = {
+            value: [
+              trap_data[i].lng,
+              trap_data[i].lat,
+              trap_data[i].pest_total,
+            ],
+            device_id: trap_data[i].device_id,
+            pest_data: trap_data[i].pest_data,
+          };
+          trap_data_arr.push(obj);
+        }
+        if (res.data.data.threshold == 0) {
+          this.ruleForm.threshold = num;
+        } else {
+          this.ruleForm.threshold = res.data.data.threshold;
+        }
+
+        var pest_count = res.data.data.pest_count;
+        var arr = [];
+        for (var i = 0; i < pest_count.length; i++) {
+          var obj = {
+            value: pest_count[i].sum,
+            name: pest_count[i].pest_name,
+          };
+          arr.push(obj);
+        }
+        this.$nextTick(() => {
+          this.init(trap_data_arr);
+        });
+        this.initpie(arr);
+      });
+    },
+    getwornlistflex() {
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=monitor_manage.home_map.pest_name_list",
+      }).then((res) => {
+        console.log(res.data.data);
+        this.wornoptions = [];
+        var pest_list = res.data.data;
+        for (var i = 0; i < pest_list.length; i++) {
+          var obj2 = {
+            point_id: pest_list[i].pest_name,
+            point_name: pest_list[i].pest_name,
+          };
+          this.wornoptions.push(obj2);
+        }
+      });
+    },
+    tabtime(times) {
+      //时间转换
+      var years = times.getFullYear();
+      var month = times.getMonth() + 1;
+      var date = times.getDate();
+      return years + "-" + month + "-" + date;
+    },
+    oickchange(e) {
+      this.start_time = this.tabtime(e[0]);
+      this.end_time = this.tabtime(e[1]);
+    },
+    search() {
+      this.getwornlist();
+    },
+    reset() {
+      this.wornvalue = "";
+      this.inoffvalue = "";
+      this.versionsvalue2 = "";
+      this.timevalue = "";
+      this.getwornlist();
+    },
+    getmon2() {
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=monitor_manage.trap_manage.pest_trap_org",
+      }).then((res) => {
+        console.log(res.data.data);
+        this.versionsoptions2 = res.data.data.org_list;
+        this.inoffoptions = res.data.data.point_data;
+      });
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.$axios({
+            method: "POST",
+            url: "/api/api_gateway?method=monitor_manage.home_map.pest_distribute_threshold",
+            data: this.qs.stringify({
+              threshold: this.ruleForm.threshold,
+            }),
+          }).then((res) => {
+            if (res.data.data) {
+              this.dialogVisible = false;
+              if (document.getElementsByClassName("el-message").length == 0) {
+                this.$message({
+                  showClose: true,
+                  message: "设置成功",
+                  type: "success",
+                });
+              }
+              this.getwornlist();
+            } else {
+              if (document.getElementsByClassName("el-message").length == 0) {
+                this.$message({
+                  showClose: true,
+                  message: "设置失败",
+                  type: "success",
+                });
+              }
+            }
+          });
+        } else {
+          if (document.getElementsByClassName("el-message").length == 0) {
+            this.$message({
+              showClose: true,
+              message: "设置失败" + res.data.message,
+              type: "warning",
+            });
+          }
+          // return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.dialogVisible = false;
+      this.$refs[formName].resetFields();
+    },
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  beforeMount() {}, //生命周期 - 挂载之前
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    this.getwornlist();
+    this.getwornlistflex();
+    // this.getmon();
+    this.getmon2();
+  },
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang="less" scoped>
+.pestbox {
+  width: 100%;
+  height: 97%;
+  position: relative;
+  overflow: hidden;
+  .searchbox {
+    position: absolute;
+    top: 10px;
+    left: 15px;
+    /deep/.el-select {
+      margin-right: 10px;
+    }
+    /deep/.el-date-editor {
+      margin-right: 10px;
+    }
+    /deep/.el-button--info {
+      background-color: #409eff;
+      border-color: #409eff;
+    }
+  }
+  .piebox {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+    height: 100%;
+    transition: width 1s ease;
+    .iconbox {
+      width: 30px;
+      height: 50px;
+      background-color: chocolate;
+      color: #fff;
+      line-height: 50px;
+      text-align: center;
+      font-size: 25px;
+    }
+    /deep/canvas {
+      border-radius: 10px;
+    }
+    #mychartpie {
+      background-color: #04243e;
+      border-radius: 10px;
+    }
+  }
+}
+/deep/.el-dialog__body {
+  padding-bottom: 0;
+}
+.shezhibox {
+  /deep/.el-input {
+    width: 50%;
+  }
+}
+/deep/.el-date-editor {
+  cursor: pointer;
+  .el-range-input {
+    cursor: pointer;
+  }
+}
+</style>

minggao/src/page/login/login.vue

@@ -3,8 +3,8 @@
   <div class="loginback">
     <div class="loginbox">
       <div class="loginbox_title">
-        <p class="top">深圳海关外来入侵物种</p>
-        <p class="bottom">监测指挥中心</p>
+        <p class="top">{{title}}</p>
+        <!-- <p class="bottom">监测指挥中心</p> -->
       </div>
       <el-form
         :model="ruleForm"
@@ -62,6 +62,7 @@ export default {
         ],
         password: [{ required: true, message: "请输入密码", trigger: "blur" }],
       },
+      title:""
     };
   },
   //监听属性 类似于data概念
@@ -101,6 +102,15 @@ export default {
         }
       });
     },
+    gettitle() {
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=monitor_manage.home_map.home_theme",
+      }).then((res) => {
+        console.log(res.data.data[0].sys_name)
+        this.title = res.data.data[0].sys_name
+      });
+    },
   },
   beforeCreate() {}, //生命周期 - 创建之前
   //生命周期 - 创建完成（可以访问当前this实例）
@@ -108,6 +118,7 @@ export default {
   beforeMount() {}, //生命周期 - 挂载之前
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
+    this.gettitle()
     this.ruleForm.type = Boolean(Number(localStorage.getItem("type")));
     // console.log(this.ruleForm.type)
     if (this.ruleForm.type) {
@@ -128,7 +139,7 @@ export default {
   height: 100vh;
   background: url("../../assets/loginbg.png");
   background-color: #fff;
-  background-size:100%;
+  background-size: 100%;
 }
 .loginbox {
   width: 20%;

minggao/src/page/monitor/Monitor.vue

@@ -1087,12 +1087,12 @@ export default {
         this.ruleForm[key] = e[key];
       }
       this.ruleForm.org_id = [];
-      this.getmon3(e.d_id);
+      this.getmon3(e);
     },
     getmon3(e) {
       this.$axios({
         method: "POST",
-        url: "/api/api_gateway?method=sysmenage.usermanager.get_parent_org_list;",
+        url: "/api/api_gateway?method=sysmenage.usermanager.get_parent_org_list",
         data: this.qs.stringify({
           device_id: e.d_id,
         }),

minggao/src/page/systemmanger/harmfulBiology.vue

@@ -313,7 +313,7 @@ export default {
         url: "/api/api_gateway?method=sysmenage.maintain.pest_list",
         data: this.qs.stringify({
           page: this.page,
-          page_item: "10",
+          page_item: "20",
           pest_name: this.input
         })
       })

minggao/src/util/http.js

@@ -41,7 +41,7 @@ axios.interceptors.request.use(req => {
   //   }
   // }
   url = req.url.split('=')[1]
-  if (url !== 'sysmenage.usermanager.user_login' && url !== 'monitor_manage.cbd_manage.add_img' && req.url.indexOf('trap_export') == -1) {
+  if (url !== 'sysmenage.usermanager.user_login' && url !== 'monitor_manage.cbd_manage.add_img' && req.url.indexOf('trap_export') == -1 && url !== "monitor_manage.home_map.home_theme") {
     req.data = req.data ? req.data + '&token=' + session : 'token=' + session;
   }
   return req