地图改版 5/17

minggao/config/index.js

@@ -12,8 +12,8 @@ module.exports = {
     assetsPublicPath: '/',
     proxyTable: {
       '/api': {
-        //  target: 'http://192.168.1.17:12345', //翟毅飞
-         target: 'https://www.yhswjc.com', //线上
+         target: 'http://192.168.1.17:12345', //翟毅飞
+        //  target: 'https://www.yhswjc.com', //线上
         // target: 'http://192.168.1.77:12345', //曹世祥
         // target:"http://114.115.147.140:12345",
         changeOrigin: true,

minggao/index.html

@@ -11,5 +11,6 @@
     <!-- built files will be auto injected -->
   </body>
   <script src="https://webstaticimg.oss-cn-hangzhou.aliyuncs.com/bigdata_app/js/ezuikit.js"></script>
-  <script src="https://webapi.amap.com/maps?v=2.0&key=bd1582190896ab05afb30aa8161d14c2&plugin=AMap.PolygonEditor"></script>
+  <!-- <script src="https://webapi.amap.com/maps?v=1.4.15&key=bd1582190896ab05afb30aa8161d14c2"></script> -->
+  <script src="https://webapi.amap.com/maps?v=2.0&key=9ffaf42e87ed317af4e775939a95081b&plugin=AMap.PolygonEditor,AMap.MarkerCluster,AMap.InfoWindow"></script>
 </html>

minggao/src/page/commandCenter/superviseAdminDetails.vue

@@ -64,8 +64,11 @@
             <ul class="list_ul">
               <li class="list_sing_li">
                 <div class="list_sing_div">
-                  <p class="list_div_tlt" style="width:12%">签到图片：</p>
-                  <p v-if="taskObj.img_list.length !== 0" style="display: flex;width:88%;flex-wrap:wrap;">
+                  <p class="list_div_tlt" style="width: 12%">签到图片：</p>
+                  <p
+                    v-if="taskObj.img_list.length !== 0"
+                    style="display: flex; width: 88%; flex-wrap: wrap"
+                  >
                     <span
                       class="list_div_img"
                       v-for="(item, index) in taskObj.img_list"
@@ -145,6 +148,7 @@
       :close-on-click-modal="false"
       :close-on-press-escape="false"
       width="500px"
+      @close="infoclose"
     >
       <ul class="insect_ul">
         <li
@@ -186,6 +190,31 @@
         <el-form-item label="监督情况" prop="desc">
           <el-input type="textarea" v-model="ruleForm2.desc"></el-input>
         </el-form-item>
+        <el-form-item label="监督图片" prop="img">
+          <el-upload
+            class="avatar-uploader"
+            ref="upload"
+            :http-request="ImgUploadSectionFile"
+            :with-credentials="true"
+            :auto-upload="true"
+            accept=".png, .jpg, .gif, .svg"
+            action
+            :on-change="handleChange"
+            list-type="list"
+            :file-list="fileList"
+            multiple
+            :show-file-list="false"
+          >
+            <i class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+          <!--  -->
+          <img
+              v-for="(item, index) in ruleForm2.img"
+              :key="index"
+              :src="$deriveData + item"
+              class="avatar"
+            />
+        </el-form-item>
         <el-form-item>
           <el-button @click="superviseSubmitForm('ruleForm2')">取 消</el-button>
           <el-button
@@ -228,6 +257,7 @@ export default {
         resource: "", // 监督形式
         region: "", // 监督单位
         desc: "", // 监督情况
+        img: [],
       },
       rules2: {
         region: [
@@ -241,6 +271,8 @@ export default {
       loading2: false, //加载
       isClick: true, // 防止重复弹框
       submitBtn: false, // 防止弹框确定按钮重复请求
+      //监督图片
+      fileList: [],
     };
   },
   //监听属性 类似于data概念
@@ -312,6 +344,7 @@ export default {
     // 监督
     superviseAxiso(formName) {
       this.loading2 = true;
+      console.log(this.ruleForm2.img)
       this.$refs[formName].validate((valid) => {
         if (valid) {
           this.submitBtn = true;
@@ -323,6 +356,7 @@ export default {
               supervisor_type: this.ruleForm2.resource, // 监督类型
               supervisor_depa: this.ruleForm2.region, // 监督部门
               supervisor_msg: this.ruleForm2.desc, // 监督内容
+              supervisor_imglist:JSON.stringify(this.ruleForm2.img)
             }),
           })
             .then((res) => {
@@ -365,8 +399,61 @@ export default {
     overseer() {
       this.superviseVisible = true;
     },
+
+    ImgUploadSectionFile(param) {
+      let that = this;
+      let formData = new FormData();
+      formData.append("img_file", param.file); //首页图片
+      that
+        .$axios({
+          method: "post",
+          url: "api/api_gateway?method=monitor_manage.cbd_manage.add_img",
+          data: formData,
+        })
+        .then((res) => {
+          if (res.data.data.src !== "0") {
+            // that.imageSrc = res.data.data.src;
+            that.ruleForm2.img.push(res.data.data.src);
+          } else {
+            if (document.getElementsByClassName("el-message").length == 0) {
+              that.$message.error({
+                message: "上传图片失败，请重试",
+                duration: 1500,
+              });
+            }
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+      //   that.clearUploadBox();
+    },
+    handleChange(file, fileList) {
+      if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(file.raw.name)) {
+        alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");
+        return false;
+      }
+      let reader = new FileReader();
+      reader.onload = (e) => {
+        let data;
+        if (typeof e.target.result === "object") {
+          // 把Array Buffer转化为blob 如果是base64不需要
+          data = window.URL.createObjectURL(new Blob([e.target.result]));
+        } else {
+          data = e.target.result;
+        }
+      };
+      reader.readAsArrayBuffer(file.raw);
+      this.fileList = fileList;
+    },
+    infoclose() {
+      this.ruleForm2.resource = ""; // 监督形式
+      this.ruleForm2.region = ""; // 监督单位
+      this.ruleForm2.desc = ""; // 监督情况
+      this.ruleForm2.img = [];
+    },
   },
-  //生命周期 - 创建完成（可以访问当前this实例）
+  //生命周期 - 创建完成（可以访问当前this实例）z
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
@@ -478,7 +565,7 @@ export default {
       display: flex;
       // margin: 0 0 20px 0;
       margin-bottom: 20px;
-      p{
+      p {
         font-size: 16px;
         width: 30%;
         text-align: left;
@@ -497,4 +584,18 @@ export default {
   background-color: #409eff;
   border-color: #409eff;
 }
+/deep/.el-form-item__content{
+  display: flex;
+  flex-wrap: wrap;
+  .avatar{
+    margin:0 10px 10px 0;
+    height: 102px;
+    width: 102px;
+  }
+  .el-upload{
+    height: 100px;
+    margin-right: 10px;
+    box-sizing: border-box;
+  }
+}
 </style>

minggao/src/page/commandCenter/superviseDetails.vue

@@ -51,6 +51,13 @@
                   <span class="list_div_tlt">监督情况：</span>
                   <span class="list_div_val">{{ taskObj.supervisor_msg }}</span>
                 </div>
+
+                <div class="list_div">
+                  <span class="list_div_tlt">监督图片：</span>
+                  <div class="imgbox">
+                    <img v-for="item,index in taskObj.supervisor_imglist" :key="index" :src="$deriveData+item" alt="">
+                  </div>
+                </div>
               </li>
             </ul>
           </div>
@@ -291,6 +298,7 @@ export default {
             var data = res.data.data;
             data.img_list = JSON.parse(data.img_list);
             this.taskObj = data;
+            this.taskObj.supervisor_imglist = JSON.parse(this.taskObj.supervisor_imglist)
             this.tableData = data.trap_record_list;
           }
           this.loading = false;
@@ -350,6 +358,16 @@ export default {
           width: 33%;
           font-size: 14px;
           color: #333333;
+          display: flex;
+          .imgbox{
+            display: flex;
+            flex-wrap: wrap;
+            img{
+              width: 100px;
+              height: 100px;
+              margin-left: 10px;
+            }
+          }
         }
       }
 

minggao/src/page/commandCenter/taskRegulator.vue

@@ -236,6 +236,7 @@
       width="800px"
       :close-on-click-modal="false"
       :close-on-press-escape="false"
+      @close="ybqclose"
     >
       <el-form
         :model="ruleForm"
@@ -244,7 +245,7 @@
         label-width="100px"
         class="demo-ruleForm"
       >
-        <div style="display: flex; flex-wrap: wrap">
+        <div style="display: flex; flex-wrap: wrap" >
           <!-- 任务处理人 -->
           <el-form-item label="任务处理人" prop="region">
             <el-select
@@ -749,6 +750,7 @@ export default {
     },
     checkListcopy(val) {
       console.log(val);
+      console.log("发生了变化")
       this.ybqCheckList = [];
       this.ruleForm.checkList = [];
       for (let i = 0; i < val.length; i++) {
@@ -1283,6 +1285,8 @@ export default {
       this.page2 = 1;
       this.checkall = false;
       this.checkList = [];
+      // console.log(this.checkListcopy,"--------------------")
+      // this.checkListcopy = []
       this.ybqList();
       // this.ybqList2()
     },
@@ -1321,7 +1325,6 @@ export default {
       this.checkall = false;
       this.checkList = [];
       this.ybqList();
-      this.ybqList2();
     },
 
     // 新建任务 - 诱捕器  - 取消
@@ -1342,7 +1345,9 @@ export default {
 
     // 新建任务 - 选中后的诱捕器删除
     deviceDelData(index) {
+      // console.log(this.checkListcopy,"--------------------")
       this.$delete(this.ybqCheckList, index);
+      this.$delete(this.checkListcopy, index);
     },
     deviceDelDataall() {
       this.ybqCheckList = [];
@@ -1363,7 +1368,6 @@ export default {
       }
       // console.log(this.checkList);
       this.ybqList(); // 设备列表
-      this.ybqList2();
       this.ybqScreenList(); // 设备筛选列表
       this.deviceVisible = true;
     },
@@ -1385,7 +1389,7 @@ export default {
           operator_user_id: this.input, //                       非必填                   任务处理人id
           owner_user_id: this.input2, //                           非必填                   任务发布人id
           start_time: this.startTime, //                              非必填                     开始时间
-          end_time: this.endTime, //                                非必填                     结束时间
+          end_time: this.endTime, //                                 非必填                     结束时间
           task_status: this.value, //
         }),
         responseType: "blob",
@@ -1416,12 +1420,16 @@ export default {
       link.click();
       document.body.removeChild(link);
     },
+    ybqclose(){
+      this.checkListcopy = []
+    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
     this.loading = true;
+    this.ybqList2()
     this.tableList(); // 表格数据
     // this.conductorAxios(); // 筛选列表 - 任务处理人
   },

minggao/src/page/home/index.vue

@@ -39,59 +39,81 @@
       </div>
     </div>
     <div class="contentbox">
-      <div class="menubox_item">
-        <el-menu
-          default-active="2"
-          class="el-menu-vertical-demo"
-          @open="handleOpen"
-          background-color="#0D3756"
-          text-color="#fff"
-          :default-active="menuActiveId"
-          active-text-color="#409EFF"
-          :unique-opened="true"
-        >
-          <el-submenu
-            v-for="item in infodata"
-            :key="item.pur_id"
-            :index="item.pur_id.toString()"
+      <div
+        class="menubox_item"
+        :style="{ width: menunoneele ? '226px' : '0px' }"
+      >
+        <div class="elmenubox">
+          <el-menu
+            default-active="2"
+            class="el-menu-vertical-demo"
+            @open="handleOpen"
+            background-color="#0D3756"
+            text-color="#fff"
+            :default-active="menuActiveId"
+            active-text-color="#409EFF"
+            :unique-opened="true"
           >
-            <template slot="title">
-              <i :class="icon[item.pur_id]" style="color: #fff"></i>
-              <span>{{ item.purview_name }}</span>
-            </template>
-            <template v-for="items in item.children">
-              <el-submenu
-                :index="items.pur_id.toString()"
-                v-if="items.children"
-                :key="items.pur_id"
-                @click="skip('/index/' + items.menu)"
-              >
-                <span slot="title">{{ items.purview_name }}</span>
-                <el-menu-item-group>
-                  <el-menu-item
-                    v-for="item2 in items.children"
-                    :index="item2.pur_id.toString()"
-                    :key="item2.pur_id"
-                    @click="skip('/index/' + item2.menu)"
-                  >
-                    <span slot="title">{{ item2.purview_name }}</span>
-                  </el-menu-item>
-                </el-menu-item-group>
-              </el-submenu>
-              <el-menu-item
-                :index="items.pur_id.toString()"
-                v-else
-                :key="items.pur_id"
-                @click="skip('/index/' + items.menu)"
-                class="el-menu-item2"
-              >
-                <span slot="title"> {{ items.purview_name }}</span>
-              </el-menu-item>
-            </template>
-          </el-submenu>
-        </el-menu>
+            <el-submenu
+              v-for="item in infodata"
+              :key="item.pur_id"
+              :index="item.pur_id.toString()"
+            >
+              <template slot="title">
+                <i :class="icon[item.pur_id]" style="color: #fff"></i>
+                <span>{{ item.purview_name }}</span>
+              </template>
+              <template v-for="items in item.children">
+                <el-submenu
+                  :index="items.pur_id.toString()"
+                  v-if="items.children"
+                  :key="items.pur_id"
+                  @click="skip('/index/' + items.menu)"
+                >
+                  <span slot="title">{{ items.purview_name }}</span>
+                  <el-menu-item-group>
+                    <el-menu-item
+                      v-for="item2 in items.children"
+                      :index="item2.pur_id.toString()"
+                      :key="item2.pur_id"
+                      @click="skip('/index/' + item2.menu)"
+                    >
+                      <span slot="title">{{ item2.purview_name }}</span>
+                    </el-menu-item>
+                  </el-menu-item-group>
+                </el-submenu>
+                <el-menu-item
+                  :index="items.pur_id.toString()"
+                  v-else
+                  :key="items.pur_id"
+                  @click="skip('/index/' + items.menu)"
+                  class="el-menu-item2"
+                >
+                  <span slot="title"> {{ items.purview_name }}</span>
+                </el-menu-item>
+              </template>
+            </el-submenu>
+          </el-menu>
+        </div>
+        <div
+          class="operationbox"
+          :style="{ left: menunoneele ? '226px' : '0px' }"
+        >
+          <img
+            :src="
+              menunoneele
+                ? '../../../static/images/homepage/shou.png'
+                : '../../../static/images/homepage/chu.png'
+            "
+            alt=""
+            @click="menunone"
+          />
+        </div>
       </div>
-      <div class="contentbox_right">
+      <div
+        class="contentbox_right"
+        :style="{ width: menunoneele ? 'calc(100% - 226px)' : '100%' }"
+      >
         <div class="contentbox_crumbs">
           <el-breadcrumb separator="/">
             <el-breadcrumb-item
@@ -227,7 +249,8 @@ export default {
         25: "iconfont icon-shezhi1",
       },
       QRtf: false,
-      app_url:""
+      app_url: "",
+      menunoneele: true,
     };
   },
   //监听属性 类似于data概念
@@ -236,6 +259,13 @@ export default {
   watch: {
     "$route.path": function (newVal) {
       console.log(newVal);
+      if (
+        newVal == "/index/facilitydistribute" ||
+        newVal == "/index/pestdistribute"
+      ) {
+        console.log("触发");
+        this.menunone();
+      }
       this.routemap(this.routerdata);
       // this.menuActiveId = this.$route.path;
     },
@@ -255,7 +285,7 @@ export default {
         url: "/api/api_gateway?method=sysmenage.usermanager.user_info",
       }).then((res) => {
         this.indexloading = false;
-        this.app_url = res.data.data.app_url
+        this.app_url = res.data.data.app_url;
         this.imgurl = res.data.data.theme_info.logo_url;
         this.headline = res.data.data.theme_info.sys_name;
         this.routerdata = JSON.parse(JSON.stringify(res.data.data.children));
@@ -350,10 +380,10 @@ export default {
     QRcode() {
       this.QRtf = true;
       this.$nextTick(() => {
-        console.log(this.$deriveData+this.app_url);
+        console.log(this.$deriveData + this.app_url);
         if (!this.$refs.qrCodeUrl.firstChild) {
           new QRCode(this.$refs.qrCodeUrl, {
-            text: this.$deriveData+this.app_url, // 需要转换为二维码的内容
+            text: this.$deriveData + this.app_url, // 需要转换为二维码的内容
             // text: "http://114.115.147.140:12345"+this.app_url,
             width: 100,
             height: 100,
@@ -461,6 +491,9 @@ export default {
         }
       }
     },
+    menunone() {
+      this.menunoneele = !this.menunoneele;
+    },
   },
   beforeCreate() {}, //生命周期 - 创建之前
   //生命周期 - 创建完成（可以访问当前this实例）
@@ -470,6 +503,16 @@ export default {
   mounted() {
     // this.menuActiveId = localStorage.getItem("menuActiveId");
     this.getuserinfo();
+
+    // console.log(this.$route.path)
+    if (
+      this.$route.path == "/Index/facilitydistribute" ||
+      this.$route.path == "/Index/pestdistribute"
+    ) {
+      // console.log("触发")
+      this.menunone();
+    }
+    // this.menunone()
   },
   beforeUpdate() {}, //生命周期 - 更新之前
   updated() {}, //生命周期 - 更新之后
@@ -512,10 +555,26 @@ p {
   // width: calc(100% - 240px);
   display: flex;
   .menubox_item {
-    height: calc(100vh - 62px);
     background-color: #0d3756;
-    overflow-y: auto;
-    width: 226px;
+    // overflow-x: visible;
+    // width: 226px;
+    // display: none;
+    position: relative;
+    transition: width 1s ease;
+    .elmenubox {
+      width: 100%;
+      overflow-y: auto;
+      height: calc(100vh - 62px);
+    }
+    .operationbox {
+      width: 16px;
+      height: 128px;
+      position: absolute;
+      top: 50%;
+      margin-top: -64px;
+      z-index: 9999999;
+      transition: all 1s ease;
+    }
     /deep/.el-menu {
       border: 0;
     }
@@ -587,8 +646,10 @@ p {
     background: rgba(0, 0, 0, 0.1);
   }
   .contentbox_right {
-    width: calc(100% - 226px);
+    // width: calc(100% - 226px);
+    // width: 100%;
     margin: 10px auto 0;
+    transition: width 1s ease;
     .contentbox_crumbs {
       width: 98%;
       margin: 0;

minggao/src/page/homepage/facilitydistribute.vue

@@ -7,16 +7,18 @@
     element-loading-spinner="el-icon-loading"
     element-loading-background="rgba(0, 0, 0, 0.8)"
   >
-    <div
+    <!-- <div
       :style="{ height: '100%', width: '100%' }"
       id="mychart"
       ref="mychart"
-    ></div>
+    ></div> -->
+    <div class="amap-demo" id="mapContainer2"></div>
     <div class="searchbox">
       <el-select
         v-model="inoffvalue"
         placeholder="请选择所在监测点"
         size="mini"
+        @change="search"
       >
         <el-option
           v-for="item in inoffoptions"
@@ -30,6 +32,7 @@
         v-model="versionsvalue2"
         placeholder="请选择隶属海关"
         size="mini"
+        @change="search"
       >
         <el-option
           v-for="item in versionsoptions2"
@@ -39,7 +42,12 @@
         >
         </el-option>
       </el-select>
-      <el-select v-model="statevalue" placeholder="请选择设备状态" size="mini">
+      <el-select
+        v-model="statevalue"
+        placeholder="请选择设备状态"
+        size="mini"
+        @change="search"
+      >
         <el-option
           v-for="item in stateoptions"
           :key="item.value"
@@ -48,7 +56,12 @@
         >
         </el-option>
       </el-select>
-      <el-select v-model="typevalue" placeholder="请选择设备类型" size="mini">
+      <el-select
+        v-model="typevalue"
+        placeholder="请选择设备类型"
+        size="mini"
+        @change="search"
+      >
         <el-option
           v-for="item in typeoptions"
           :key="item.type_id"
@@ -68,17 +81,18 @@
       <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 class="tallybox_item">
+        <img src="../../../static/images/homepage/cbd.png" alt="" />
+        <p>测报灯:<span style="color: #27c2ff">{{cbdnum}}台</span></p>
+      </div>
+      <div class="tallybox_item">
+        <img src="../../../static/images/homepage/ybq.png" alt="" />
+        <p>诱捕器:<span style="color: #ff00ff">{{ybqnum}}台</span></p>
+      </div>
+      <div class="tallybox_item">
+        <img src="../../../static/images/homepage/jk.png" alt="" />
+        <p>监控设备:<span style="color: #e94c3e">{{jknum}}台</span></p>
+      </div>
     </div>
     <div class="piebox">
       <p
@@ -132,7 +146,7 @@
               ><span>{{ item.sum }}</span>
             </p>
             <p
-              style="color: #fff; width: 100%; text-align: center"
+              style="color: #ccc; width: 100%; text-align: center"
               v-if="baseinfo[0].pest_list.length == 0"
             >
               暂无数据
@@ -220,11 +234,27 @@ export default {
       typevalue: "", //设备类型
       typeoptions: [], //设备类型 列表
       idinput: "", //设备编号
-      baseinfo: [], //设备详情
+      baseinfo: [
+        {
+          device_data:{
+            at:"",
+            ah:"",
+            ds:"",
+            ws:"",
+            csq:"",
+          },
+          uptime:"",
+          pest_list:[]
+        }
+      ], //设备详情
       loading: false,
       device_type_id: 0,
       myVideo2: {},
       pestboxloading: true,
+      center: [114.052758, 22.545817],
+      cbdnum:0,
+      jknum:0,
+      ybqnum:0,
     };
   },
   //监听属性 类似于data概念
@@ -285,410 +315,25 @@ export default {
         return digital.toFixed(6);
       }
     },
-    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 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);
-      // });
-      // var xbMap = {
-      //   type: "FeatureCollection",
-      //   features: arr2,
-      // };
-
-      // echarts.registerMap("深圳", xbMap);
-      window.addEventListener("resize", function () {
-        // undefined;
-        myChart.resize();
+    initmap() {
+      // console.log();
+      var map = new AMap.Map(document.getElementById("mapContainer2"), {
+        center: this.center,
+        resizeEnable: true,
+        zoom: 10,
+        lang: "en",
+        mapStyle: "amap://styles/fresh",
+        layers: [],
       });
-
-      // var data = data1;
-      // var geoCoordMap = data2;
-      myChart.on("click", (params) => {
-        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.value[3]);
-          // }
-        }
+      //new AMap.TileLayer.Satellite(),new AMap.TileLayer.RoadNet()
+      AMap.plugin(["AMap.ToolBar", "AMap.Geocoder"], () => {
+        map.addControl(new AMap.ToolBar());
+        this.geocoder = new AMap.Geocoder({
+          city: "全国",
+          radius: 1000,
+        });
       });
-      // 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;
-      // };
-      var that = this
-      function format(city) {
-        if (city) {
-          var arr = [];
-          for (var i = 0; i < city.length; i++) {
-            var obj = {};
-            obj["value"] = [
-              Number(that.ToDigital(city[i].lng)),
-              Number(that.ToDigital(city[i].lat)),
-              Number(city[i].device_type_id),
-              Number(city[i].d_id),
-            ];
-            arr.push(obj);
-          }
-          return arr;
-        } else {
-          return [];
-        }
-      }
-      var huizhou = format(data1.huizhou);
-      var shanwei = format(data1.shanwei);
-      var shenzhen = format(data1.shenzhen);
-      console.log(huizhou);
-      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: ["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,
-            },
-          },
-        ],
-        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",
-            geoIndex: 2,
-            data: shanwei,
-            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,
-          },
-        ],
-      };
-      echarts.init(document.getElementById("mychart")).setOption(option);
+      this.map = map;
       this.pestboxloading = false;
     },
     getbaselist() {
@@ -704,8 +349,66 @@ export default {
           type_id: this.typevalue, //                   非必传(num)                  3测报灯  4诱捕器  6监控 搜索项
         }),
       }).then((res) => {
-        this.init(res.data.data);
+        // this.init(res.data.data);
+        console.log(res.data.data);
+        var resdata = res.data.data;
+        // var data = [];
+        this.cbdnum = 0
+        this.jknum = 0
+        this.ybqnum = 0
+        this.map.clearMap();
+        if (resdata.huizhou) {
+          for (var i = 0; i < resdata.huizhou.length; i++) {
+            this.setmak(resdata.huizhou[i]);
+          }
+        }
+        if (resdata.shenzhen) {
+          for (var i = 0; i < resdata.shenzhen.length; i++) {
+            this.setmak(resdata.shenzhen[i]);
+          }
+        }
+        if (resdata.shanwei) {
+          for (var i = 0; i < resdata.shanwei.length; i++) {
+            this.setmak(resdata.shanwei[i]);
+          }
+        }
+        // this.map.add(marker);
+      });
+    },
+    setmak(data) {
+      var icon = "";
+      if (data.device_type_id == 3) {
+        //测报灯
+        icon = "../../../static/images/homepage/cbd.png";
+        this.cbdnum++
+      } else if (data.device_type_id == 4) {
+        //诱捕器
+        icon = "../../../static/images/homepage/ybq.png";
+        this.ybqnum++
+      } else if (data.device_type_id == 6) {
+        //监控
+        icon = "../../../static/images/homepage/jk.png";
+        this.jknum++
+      }
+      var marker = new AMap.Marker({
+        position: new AMap.LngLat(
+          this.ToDigital(data.lng),
+          this.ToDigital(data.lat)
+        ),
+        offset: new AMap.Pixel(-10, -10),
+        icon: icon, // 添加 Icon 图标 URL
+        title: "设备标点",
+        d_id:data.d_id,
+        type_id:data.device_type_id,
+      });
+      marker.on("click", (e) => {
+        console.log(e.target._originOpts.title);
+        this.device_type_id = e.target._originOpts.type_id;
+        this.pietf = true;
+        // if(this.device_type_id == 6){
+        this.getbaseinfo(e.target._originOpts.d_id);
       });
+      this.map.add(marker);
     },
     search() {
       this.getbaselist();
@@ -717,7 +420,6 @@ export default {
       this.typevalue = "";
       this.idinput = "";
       this.getbaselist();
-      
     },
     // getmon() {
     //   //获取监测点列表 组织列表
@@ -749,6 +451,7 @@ export default {
       }).then((res) => {
         // console.log(res.data.data);
         this.typeoptions = res.data.data;
+        this.initmap();
         this.getbaselist();
       });
     },
@@ -768,7 +471,7 @@ export default {
           // console.log(this.baseinfo[0].device_info.hlsHd)
           let hlsHd = this.baseinfo[0].device_info.hlsHd;
           hlsHd = "https" + hlsHd.toString().slice(4);
-          console.log(hlsHd)
+          console.log(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(() => {
@@ -795,8 +498,8 @@ export default {
   mounted() {
     // this.getmon();
     // this.init()
-    this.getmon2();
     this.gettype();
+    this.getmon2();
   },
   beforeUpdate() {}, //生命周期 - 更新之前
   updated() {}, //生命周期 - 更新之后
@@ -820,6 +523,16 @@ export default {
   position: relative;
   overflow: hidden;
   background-color: #252b45;
+  #mapContainer2 {
+    width: 100%;
+    height: 100%;
+    /deep/.amap-logo{
+      display: none !important;
+    }
+    /deep/.amap-copyright{
+      display: none !important;
+    }
+  }
   .tishi {
     // width: 500px;
     height: 50px;
@@ -856,20 +569,14 @@ export default {
     position: absolute;
     top: 50px;
     left: 15px;
+    background-color: rgba(255,255,255,0.8);
+    padding: 10px;
     .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;
+      margin-bottom: 10px;
+      display: flex;
+      color: #333;
+      img {
+        margin-right: 10px;
       }
     }
   }
@@ -892,20 +599,21 @@ export default {
     }
     #mychartpie {
       transition: all 1s ease;
-      background-color: #04243e;
+      background-color: rgba(255,255,255,1);
       // padding: 20px;
       box-sizing: border-box;
       overflow: hidden;
       border-radius: 10px;
       .infobox {
+        width: 450px;
         padding: 20px 20px 0 20px;
         h3 {
           margin-top: 0;
-          color: #fff;
+          color: #333;
         }
         p {
           margin-bottom: 15px;
-          color: #fff;
+          color: #333;
           font-size: 14px;
           span {
             color: #04d5e8;
@@ -913,15 +621,16 @@ export default {
           span:first-child {
             display: inline-block;
             width: 85px;
-            color: #fff;
+            color: #333;
           }
         }
       }
       .wornbox {
+        width: 450px;
         padding: 0 20px 20px;
         h3 {
           margin-top: 0;
-          color: #fff;
+          color: #333;
         }
         .wornbox_item {
           display: flex;
@@ -930,7 +639,7 @@ export default {
           p {
             width: 40%;
             margin-bottom: 15px;
-            color: #fff;
+            color: #333;
             display: flex;
             justify-content: space-between;
             font-size: 14px;
@@ -942,17 +651,18 @@ export default {
         }
       }
       .cbdinfobox {
+        width: 450px;
         padding: 0 20px 20px;
         h3 {
           margin-top: 0;
-          color: #fff;
+          color: #333;
         }
         .cbdinfobox_item {
           display: flex;
           width: 100%;
           margin: 0 15px 10px 0;
           p {
-            color: #fff;
+            color: #333;
             font-size: 14px;
             margin-right: 20px;
             span {
@@ -965,10 +675,11 @@ export default {
         }
       }
       .cbdimg {
-        padding: 0px 20px 0 20px;
+        width: 450px;
+        padding: 0px 20px 10px 20px;
         .title {
           margin-top: 0;
-          color: #fff;
+          color: #333;
         }
         img {
           width: 100%;
@@ -976,10 +687,11 @@ export default {
         }
       }
       .videoBonbox {
+        width: 450px;
         padding: 0 20px 20px;
         h3 {
           margin-top: 0;
-          color: #fff;
+          color: #333;
         }
       }
     }

minggao/src/page/homepage/facilitydistributeold.vue

@@ -1,714 +0,0 @@
-<!--  -->
-<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/home.vue

@@ -1,567 +0,0 @@
-<!--  -->
-<template>
-  <div class="pestbox">
-    <div
-      :style="{ height: '100%', width: '100%' }"
-      id="mychart"
-      ref="mychart"
-    ></div>
-    <div class="piebox">
-      <p class="iconbox el-icon-arrow-left" @click="pietf = !pietf"></p>
-      <div class="piedatabox" v-show="pietf">
-        <div
-          :style="{ height: '100%', width: '100%' }"
-          id="mychartpie"
-          ref="mychartpie"
-        ></div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-import * as echarts from "echarts";
-export default {
-  //import引入的组件需要注入到对象中才能使用
-  components: {},
-  data() {
-    //这里存放数据
-    return {
-      pietf: false,
-    };
-  },
-  //监听属性 类似于data概念
-  computed: {},
-  //监控data中的数据变化
-  watch: {},
-  //方法集合
-  methods: {
-    init() {
-      let myChart = echarts.init(document.getElementById("mychart"));
-      const mapData = require("./json/shenzhen.json");
-      const name = "深圳";
-      echarts.registerMap(name, mapData);
-      const mapData2 = require("./json/shanwei.json");
-      const name2 = "汕尾";
-      echarts.registerMap(name2, mapData2);
-      const mapData3 = require("./json/huizhou.json");
-      const name3 = "惠州";
-      echarts.registerMap(name3, mapData3);
-
-      // let myChart = echarts.init(document.getElementById("mychart"));
-      window.addEventListener("resize", function () {
-        undefined;
-        myChart.resize();
-      });
-      myChart.setOption({
-        title: {
-          text: "有害生物占比",
-          subtext: "data from https://www.haidilao.com/",
-          sublink: "https://www.haidilao.com/",
-          left: "center",
-          textStyle: {
-            color: "#fff",
-          },
-        },
-        backgroundColor: "#252b45",
-        title: {
-          left: "center",
-          textStyle: {
-            color: "#000",
-          },
-        },
-        visualMap: {
-          min: 0,
-          max: 100,
-          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: "95%",
-            itemStyle: {
-              normal: {
-                color: "#031525", //地图背景色
-                borderColor: "rgba(100,149,237,1)", //省市边界线
-              },
-              emphasis: {
-                color: "rgba(37, 43, 61, .5)", //悬浮背景
-              },
-            },
-          },
-          {
-            map: "惠州",
-            label: {
-              normal: {
-                show: true,
-                color: "#fff",
-              },
-              emphasis: {
-                show: true,
-              },
-            },
-            roam: true, //是否允许缩放
-            layoutCenter: ["65%", "48%"], //地图位置
-            layoutSize: "90%",
-            itemStyle: {
-              normal: {
-                color: "#031525", //地图背景色
-                borderColor: "rgba(100,149,237,1)", //省市边界线
-              },
-              emphasis: {
-                color: "rgba(37, 43, 61, .5)", //悬浮背景
-              },
-            },
-          },
-          {
-            map: "汕尾",
-            label: {
-              normal: {
-                show: true,
-                color: "#fff",
-              },
-              emphasis: {
-                show: true,
-              },
-            },
-            roam: true, //是否允许缩放
-            layoutCenter: ["90%", "50%"], //地图位置
-            layoutSize: "95%",
-            itemStyle: {
-              normal: {
-                color: "#031525", //地图背景色
-                borderColor: "rgba(100,149,237,1)", //省市边界线
-              },
-              emphasis: {
-                color: "rgba(37, 43, 61, .5)", //悬浮背景
-              },
-            },
-          },
-        ],
-        tooltip: {
-          show: true,
-          // formatter: "{a}{b}{c}{d}",
-          formatter: function (e) {
-            console.log(e);
-            if (e.seriesType == "scatter") {
-              return "1";
-            } 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: [],
-          },
-          {
-            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: "害虫",
-            type: "scatter",
-            coordinateSystem: "geo",
-            geoIndex: 0,
-            data: [
-              {
-                value: [114.06369, 22.543649, 3],
-              },
-              {
-                value: [114.017696, 22.583165, 3],
-              },
-            ],
-            label: {
-              normal: {
-                formatter: "{b}",
-                position: "right",
-                show: true,
-              },
-              emphasis: {
-                show: true,
-              },
-            },
-            itemStyle: {
-              normal: {
-                color: "#05C3F9",
-              },
-            },
-          },
-          {
-            name: "害虫",
-            type: "scatter",
-            coordinateSystem: "geo",
-            geoIndex: 1,
-            data: [
-              {
-                value: [114.424449, 23.118954, 30],
-              },
-              {
-                value: [114.420425, 23.160959, 3],
-              },
-            ],
-            label: {
-              normal: {
-                formatter: "{b}",
-                position: "right",
-                show: true,
-              },
-              emphasis: {
-                show: true,
-              },
-            },
-            itemStyle: {
-              normal: {
-                color: "#05C3F9",
-              },
-            },
-          },
-          {
-            name: "害虫",
-            type: "scatter",
-            coordinateSystem: "geo",
-            geoIndex: 2,
-            data: [
-              {
-                value: [115.368326, 22.792062, 3],
-              },
-              {
-                value: [115.352228, 22.866141, 3],
-              },
-            ],
-            label: {
-              normal: {
-                formatter: "{b}",
-                position: "right",
-                show: true,
-              },
-              emphasis: {
-                show: true,
-              },
-            },
-            itemStyle: {
-              normal: {
-                color: "#05C3F9",
-              },
-            },
-          },
-        ],
-      });
-    },
-    initpie() {
-      var data = [
-        { value: 8, name: "类型1" },
-        { value: 5, name: "类型2" },
-        { value: 6, name: "类型3" },
-        { value: 2, name: "类型4" },
-        { value: 4, name: "类型5" },
-        { value: 5, name: "类型6" },
-      ];
-      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 = {
-        backgroundColor: "#04243E",
-        tooltip: {
-          title: "详情",
-          trigger: "item",
-          formatter: "{a} <br/>{b}: {c} ({d}%)",
-        },
-
-        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}：}{b|{c}}",
-              rich: {
-                a: {
-                  padding: [0, 0, 0, 10],
-                  color: "#aebfe8",
-                },
-                b: {
-                  padding: [0, 10, 0, 0],
-                },
-              },
-            },
-
-            data: data1,
-          },
-        ],
-      };
-      echarts.init(document.getElementById("mychartpie")).setOption(option);
-    },
-  },
-  beforeCreate() {}, //生命周期 - 创建之前
-  //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
-  beforeMount() {}, //生命周期 - 挂载之前
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
-    setTimeout(() => {
-      this.init();
-    }, 500);
-    this.initpie();
-  },
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {}, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-};
-</script>
-<style lang="less" scoped>
-.pestbox {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  .piebox {
-    position: absolute;
-    top: 0;
-    right: 0;
-    display: flex;
-    height: 100%;
-    .iconbox {
-      width: 30px;
-      height: 50px;
-      background-color: chocolate;
-      color: #fff;
-      line-height: 50px;
-      text-align: center;
-      font-size: 25px;
-    }
-    .piedatabox {
-      width: 500px;
-      height: 100%;
-      background-color: darkblue;
-    }
-  }
-}
-</style>

minggao/src/page/homepage/pestdistribute.vue

@@ -7,13 +7,14 @@
     element-loading-spinner="el-icon-loading"
     element-loading-background="rgba(0, 0, 0, 0.8)"
   >
-    <div
+    <!-- <div
       :style="{ height: '100%', width: '100%' }"
       id="mychart"
       ref="mychart"
-    ></div>
+    ></div> -->
+    <div class="amap-demo" id="mapContainer2"></div>
     <div class="searchbox">
-      <el-select v-model="wornvalue" placeholder="请选择害虫名称" size="mini">
+      <el-select v-model="wornvalue" placeholder="请选择害虫名称" size="mini" @change="search">
         <el-option
           v-for="item in wornoptions"
           :key="item.point_id"
@@ -26,6 +27,7 @@
         v-model="inoffvalue"
         placeholder="请选择所在监测点"
         size="mini"
+        @change="search"
       >
         <el-option
           v-for="item in inoffoptions"
@@ -39,6 +41,7 @@
         v-model="versionsvalue2"
         placeholder="请选择隶属海关"
         size="mini"
+        @change="search"
       >
         <el-option
           v-for="item in versionsoptions2"
@@ -156,6 +159,7 @@ export default {
         ],
       },
       pestboxloading: true,
+      center: [114.052758, 22.545817],
     };
   },
   //监听属性 类似于data概念
@@ -205,413 +209,25 @@ export default {
         return digital.toFixed(6);
       }
     },
-    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 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();
+    initmap() {
+      var map = new AMap.Map(document.getElementById("mapContainer2"), {
+        center: this.center,
+        resizeEnable: true,
+        zoom: 10,
+        lang: "en",
+        mapStyle: "amap://styles/fresh",
+        layers: [],
       });
-      var that = this
-      function citt(trap_data) {
-        // console.log(trap_data)
-        if (trap_data) {
-          var trap_data_arr = [];
-          for (var i = 0; i < trap_data.length; i++) {
-            var obj = {
-              value: [
-                that.ToDigital(trap_data[i].lng),
-                that.ToDigital(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;
-        } else {
-          return [];
-        }
-      }
-      var huizhou = citt(traparr[0]);
-      var shenzhen = citt(traparr[1]);
-      var shanwei = citt(traparr[2]);
-      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: [],
-          },
-          {
-            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: 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)){
-              //   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: 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}",
-                position: "right",
-                show: true,
-              },
-              emphasis: {
-                show: true,
-              },
-            },
-            itemStyle: {
-              normal: {
-                color: "#05C3F9",
-              },
-            },
-          },
-        ],
+      //new AMap.TileLayer.Satellite(),new AMap.TileLayer.RoadNet()
+      AMap.plugin(["AMap.ToolBar", "AMap.Geocoder"], () => {
+        map.addControl(new AMap.ToolBar());
+        this.geocoder = new AMap.Geocoder({
+          city: "全国",
+          radius: 1000,
+        });
       });
-      this.pestboxloading = false;
-      // var time  = setTimeout(() => {
-      //   this.search(); // 搜索
-      // }, 500)
-      // clearTimeout(time)
+      this.map = map;
+      this.getwornlist();
     },
     initpie(data) {
       var data = data;
@@ -703,11 +319,11 @@ export default {
           sublink: "",
           left: "center",
           textStyle: {
-            color: "#fff",
+            color: "#222222",
           },
           top: "5%",
         },
-        backgroundColor: "#04243E",
+        backgroundColor: "#ffffff",
         tooltip: {
           title: "详情",
           trigger: "item",
@@ -720,7 +336,7 @@ export default {
           itemHeight: 10,
           x: "center",
           textStyle: {
-            color: "#fff",
+            color: "#222222",
             fontSize: 12,
           },
           show: true,
@@ -766,7 +382,7 @@ export default {
             selectedMode: "single",
             radius: [0, "40%"],
             label: {
-              formatter: "{d}%",
+              formatter: "",
               position: "inner",
             },
             data: data2,
@@ -797,7 +413,7 @@ export default {
               rich: {
                 a: {
                   padding: [0, 0, 0, 10],
-                  color: "#aebfe8",
+                  color: "#151515",
                   fontSize: 14,
                 },
                 b: {
@@ -825,10 +441,10 @@ export default {
           end_time: this.end_time, //                 非必传(string)               结束时间  搜索项 2022-01-23
         }),
       }).then((res) => {
+        // console.log(res.data.data);
+        this.map.clearMap();
+        var resdata = res.data.data;
         this.loading = false;
-        // 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++) {
@@ -838,17 +454,114 @@ export default {
           };
           arr.push(obj);
         }
-        var trap_data_arr = [
-          res.data.data.huizhou,
-          res.data.data.shenzhen,
-          res.data.data.shanwei,
-        ];
-        this.$nextTick(() => {
-          this.init(trap_data_arr);
-        });
+        var capitals = [];
+        if (resdata.huizhou) {
+          for (var i = 0; i < resdata.huizhou.length; i++) {
+            var obj = {
+              device_id: resdata.huizhou[i].device_id,
+              pest_data: resdata.huizhou[i].pest_data,
+              pest_total: resdata.huizhou[i].pest_total,
+              name: "北京",
+              center: [
+                this.ToDigital(resdata.huizhou[i].lng),
+                this.ToDigital(resdata.huizhou[i].lat),
+              ],
+            };
+            capitals.push(obj);
+          }
+        }
+        if (resdata.shenzhen) {
+          for (var i = 0; i < resdata.shenzhen.length; i++) {
+            var obj = {
+              device_id: resdata.shenzhen[i].device_id,
+              pest_data: resdata.shenzhen[i].pest_data,
+              pest_total: resdata.shenzhen[i].pest_total,
+              center: [
+                this.ToDigital(resdata.shenzhen[i].lng),
+                this.ToDigital(resdata.shenzhen[i].lat),
+              ],
+            };
+            capitals.push(obj);
+          }
+        }
+        if (resdata.shanwei) {
+          for (var i = 0; i < resdata.shanwei.length; i++) {
+            var obj = {
+              device_id: resdata.shanwei[i].device_id,
+              pest_data: resdata.shanwei[i].pest_data,
+              pest_total: resdata.shanwei[i].pest_total,
+              center: [
+                this.ToDigital(resdata.shanwei[i].lng),
+                this.ToDigital(resdata.shanwei[i].lat),
+              ],
+            };
+            capitals.push(obj);
+          }
+        }
+        var maxnum = 0
+        for (var i = 0; i < capitals.length; i += 1) {
+          if(capitals[i].pest_total>maxnum){
+            maxnum = capitals[i].pest_total
+          }
+          var color = ''
+          if(capitals[i].pest_total > Math.floor(maxnum*0.8)){
+              color = '#ff0202'
+          }else if(capitals[i].pest_total > Math.floor(maxnum*0.6)){
+              color = '#ff4902'
+          }else if(capitals[i].pest_total > Math.floor(maxnum*0.4)){
+              color = '#ffe402'
+          }else if(capitals[i].pest_total > Math.floor(maxnum*0.2)){
+              color = '#ff00ba'
+          }else{
+              color = '#0cff00'
+          }
+          var center = capitals[i].center;
+          var device_id = capitals[i].device_id;
+          var pest_data = capitals[i].pest_data;
+          var pest_total = capitals[i].pest_total;
+          var circleMarker = new AMap.CircleMarker({
+            center: center,
+            device_id: device_id,
+            pest_data: pest_data,
+            pest_total: pest_total,
+            radius: 8, //3D视图下，CircleMarker半径不要超过64px
+            strokeColor: "white",
+            strokeWeight: 2,
+            strokeOpacity: 0.5,
+            fillColor: color,
+            fillOpacity: 0.8,
+            zIndex: 10,
+            bubble: true,
+            cursor: "pointer",
+            clickable: true,
+          });
+          circleMarker.setMap(this.map);
+          circleMarker.on("click", (e) => {
+            // console.log(e.target);
+            this.openInfo(e.target._opts);
+          });
+        }
         this.initpie(arr);
+        this.pestboxloading = false;
       });
     },
+    openInfo(info) {
+      //构建信息窗体中显示的内容
+      var str = ``;
+      for (var i = 0; i < info.pest_data.length; i++) {
+        str +=
+          `<p>` +
+          info.pest_data[i].pest_name +
+          ` ：` +
+          info.pest_data[i].sum +
+          ` 只</p>`;
+      }
+      var infoWindow = new AMap.InfoWindow({
+        content: `<div style="height:100px;overflow-y: auto;"><p>设备id ：` + info.device_id + `</p>` + str + `</div>`, //使用默认信息窗体框样式，显示信息内容
+      });
+
+      infoWindow.open(this.map, [info.center.lng,info.center.lat]);
+    },
     getwornlistflex() {
       this.$axios({
         method: "POST",
@@ -898,8 +611,16 @@ export default {
         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.versionsoptions2 = []
+        var org_list = res.data.data.org_list;
+        for(var i = 0;i<org_list.length;i++){
+          if(org_list[i].org_name != ""){
+            this.versionsoptions2.push(org_list[i])
+          }
+        }
+        // this.versionsoptions2 = res.data.data.org_list;
         this.inoffoptions = res.data.data.point_data;
+        this.initmap();
       });
     },
     submitForm(formName) {
@@ -955,10 +676,9 @@ export default {
   beforeMount() {}, //生命周期 - 挂载之前
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
-    this.getwornlist();
+    this.getmon2();
     this.getwornlistflex();
     // this.getmon();
-    this.getmon2();
   },
   beforeUpdate() {}, //生命周期 - 更新之前
   updated() {}, //生命周期 - 更新之后
@@ -973,6 +693,16 @@ export default {
   height: 97%;
   position: relative;
   overflow: hidden;
+  #mapContainer2 {
+    width: 100%;
+    height: 100%;
+    /deep/.amap-logo {
+      display: none !important;
+    }
+    /deep/.amap-copyright {
+      display: none !important;
+    }
+  }
   .searchbox {
     position: absolute;
     top: 10px;
@@ -1008,7 +738,8 @@ export default {
       border-radius: 10px;
     }
     #mychartpie {
-      background-color: #04243e;
+      // background-color: #04243e;
+      background-color: #fff;
       border-radius: 10px;
     }
   }

minggao/src/page/homepage/pestdistributeold.vue

@@ -1,838 +0,0 @@
-<!--  -->
-<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) {
-      if (e) {
-        this.start_time = this.tabtime(e[0]);
-        this.end_time = this.tabtime(e[1]);
-      } else {
-        this.start_time = '';
-        this.end_time = '';
-      }
-    },
-    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>