zhangyun před 4 roky
rodič
revize
8b92776ed0

+ 10 - 3
minggao/build/webpack.base.conf.js

@@ -3,8 +3,8 @@ const path = require('path')
 const utils = require('./utils')
 const config = require('../config')
 const vueLoaderConfig = require('./vue-loader.conf')
-
-function resolve (dir) {
+var webpack = require('webpack')
+function resolve(dir) {
   return path.join(__dirname, '..', dir)
 }
 
@@ -78,5 +78,12 @@ module.exports = {
     net: 'empty',
     tls: 'empty',
     child_process: 'empty'
-  }
+  },
+  plugins: [
+    new webpack.optimize.CommonsChunkPlugin('common.js'),
+    new webpack.ProvidePlugin({
+      jQuery: "jquery",
+      $: "jquery"
+    })
+  ]
 }

+ 3 - 3
minggao/config/index.js

@@ -12,8 +12,8 @@ module.exports = {
     assetsPublicPath: '/',
     proxyTable: {
       '/api': {
-        target: 'http://192.168.1.17:12345', //翟毅飞
-        // target: 'http://192.168.1.77:12345', //曹世祥
+        // target: 'http://192.168.1.17:12345', //翟毅飞
+        target: 'http://192.168.1.77:12345', //曹世祥
         changeOrigin: true,
         pathRewrite: { 
           '^/api': '/api' //重写接口
@@ -22,7 +22,7 @@ module.exports = {
     },
 
     // Various Dev Server settings
-    host: '192.168.1.4', // can be overwritten by process.env.HOST
+    host: '192.168.1.29', // can be overwritten by process.env.HOST
     port: 8888, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: false,
     errorOverlay: true,

+ 1 - 0
minggao/index.html

@@ -10,4 +10,5 @@
     <!-- 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>
 </html>

+ 2 - 0
minggao/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "axios": "^0.24.0",
+    "echarts": "^4.9.0",
     "element-ui": "^2.15.6",
     "less": "^4.1.2",
     "vue": "^2.5.2",
@@ -37,6 +38,7 @@
     "friendly-errors-webpack-plugin": "^1.6.1",
     "highcharts": "^8.0.4",
     "html-webpack-plugin": "^2.30.1",
+    "jquery": "^3.6.0",
     "less-loader": "^5.0.0",
     "mockjs": "^1.1.0",
     "node-notifier": "^5.1.2",

+ 6 - 1
minggao/src/main.js

@@ -14,6 +14,11 @@ Vue.use(Viewer, {
   }
 })
 
+import echarts from 'echarts'
+Vue.prototype.$echarts = echarts
+
+// import $ from 'jquery'
+
 Vue.prototype.$store = store
 
 import 'element-ui/lib/theme-chalk/index.css'
@@ -71,7 +76,7 @@ router.beforeEach(async (to, from, next) => {
       next()
     }else{
       next({
-        path: '/login'
+        path: '/Login'
       });
     }
   }

+ 561 - 227
minggao/src/page/forecasting/cbd/Cbd.vue

@@ -60,10 +60,9 @@
           <el-card class="box-card">
             <equip-item :is_online="item.device_status">
               <span
-                v-show="userType == 1"
                 slot="set"
                 class="superOperate el-icon-setting"
-                @click="equipOperation(item.d_id, item.imei, item.device_name)"
+                @click="equipOperation(item)"
               ></span>
               <span slot="title">虫情测报</span>
               <div slot="content" class="content">
@@ -90,6 +89,30 @@
                   </span>
                 </p>
                 <p>
+                  <i class="iconfont icon-yonghu"></i>
+                  隶属海关组织 :
+                  <span v-if="item.org_list.length == 1">{{
+                    item.org_name
+                  }}</span>
+                  <el-popover
+                    ref="popover"
+                    placement="right"
+                    title=""
+                    width="150"
+                    trigger="hover"
+                    v-else
+                  >
+                    <div class="popover-content" v-html="content"></div>
+                    <span @mouseover="orglisthover(item)" slot="reference"
+                      >{{ item.org_list[0].org_name }}...</span
+                    >
+                  </el-popover>
+                </p>
+                <p>
+                  <i class="iconfont icon-biaoqian"></i>
+                  所属监测点 : {{ item.point_name}}
+                </p>
+                <p>
                   <i class="iconfont icon-shijian"></i>
                   最新上报时间 : {{ (item.uptime * 1000) | formatTime }}
                 </p>
@@ -197,7 +220,26 @@
               <p style="color: #eb6765" v-if="scope.row.is_online == 0">离线</p>
             </template>
           </el-table-column>
-          <el-table-column prop="dtype" label="设备版本"></el-table-column>
+          <el-table-column prop="dtype" label="组织">
+            <template slot-scope="scope">
+              <span v-if="scope.row.org_list.length == 1">{{
+                scope.row.org_list[0].org_name
+              }}</span>
+              <el-popover
+                ref="popover"
+                placement="right"
+                title="组织列表"
+                width="150"
+                trigger="hover"
+                v-else
+              >
+                <div class="popover-content" v-html="content"></div>
+                <span @mouseover="orglisthover(scope.row)" slot="reference"
+                  >{{ scope.row.org_list[0].org_name }}...</span
+                >
+              </el-popover>
+            </template>
+          </el-table-column>
           <el-table-column prop="status_time" label="最新上报时间">
             <template slot-scope="scope">{{
               (scope.row.uptime * 1000) | formatTime
@@ -473,162 +515,116 @@
     </el-dialog>
     <!-- 管理员操作弹框 -->
     <el-dialog
-      title="管理员操作"
+      title="测报灯设置"
       :visible.sync="operationDialogVisible"
-      width="360px"
+      width="30%"
       :close-on-click-modal="false"
       :close-on-press-escape="false"
     >
-      <div class="item">
-        <span>设备编号 : </span><span>{{ equipInfo.device_id }}</span>
-      </div>
-      <div class="item" v-if="equipInfo.device_name">
-        <span>设备名称 : </span><span>{{ equipInfo.device_name }}</span>
-      </div>
-      <div class="tit">联网模块</div>
-      <el-button
-        type="primary"
-        size="mini"
-        @click="equipBtnControl('dtu_update')"
-        >升级</el-button
-      >
-      <el-button
-        type="primary"
-        size="mini"
-        @click="equipBtnControl('dtu_reboot')"
-        >重启</el-button
-      >
-      <el-button type="primary" size="mini" @click="mqttInfo"
-        >MQTT配置</el-button
-      >
-      <el-button type="primary" size="mini" @click="equipBtnControl('yfwlw')"
-        >平台切换</el-button
-      >
-      <div class="tit">电路板更换</div>
-      <el-row>
-        <el-button type="primary" size="mini">查看原始imei</el-button>
-        <el-button type="primary" @click="replaceImei" size="mini"
-          >更改imei</el-button
-        >
-      </el-row>
-      <div class="tit">强制操作</div>
-      <el-row>
-        <el-button
-          type="danger"
-          size="mini"
-          @click="equipBtnControl('takephoto')"
-          >拍照</el-button
-        >
-        <el-button type="danger" size="mini" @click="equipBtnControl('update')"
-          >升级</el-button
-        >
-        <el-button type="danger" size="mini" @click="equipBtnControl('reboot')"
-          >重启</el-button
-        >
-        <el-button
-          type="danger"
-          size="mini"
-          @click="equipBtnControl('open_shake')"
-          >震动开启</el-button
-        >
-        <el-button
-          type="danger"
-          size="mini"
-          @click="equipBtnControl('close_shake')"
-          >震动关闭</el-button
-        >
-      </el-row>
-
-      <div class="tit">升级文件更新</div>
-      <div style="display: flex">
-        <!-- <el-upload
-          style="margin: 0 10px 0 0"
-          class="upload-demo"
-          ref="upControl"
-          action
-          :http-request="fileUploadSectionFile"
-          :with-credentials="true"
-          :auto-upload="true"
-          multiple
-          :file-list="fileList"
-          :show-file-list="false"
-        >
-          <el-button size="small" type="primary">控制板</el-button>
-        </el-upload>
-
-        <el-upload
-          class="upload-demo"
-          ref="upControl"
-          action
-          :http-request="fileUploadSectionFile"
-          :with-credentials="true"
-          :auto-upload="true"
-          multiple
-          :file-list="fileList"
-          :show-file-list="false"
+      <div>
+        <el-form
+          :model="ruleForm"
+          :rules="rules"
+          ref="ruleForm"
+          label-width="100px"
+          class="demo-ruleForm"
         >
-          <el-button size="small" type="primary">联网模块</el-button>
-        </el-upload> -->
+          <el-form-item label="设备名称" prop="device_name">
+            <el-input v-model="ruleForm.device_name"></el-input>
+          </el-form-item>
+          <el-form-item label="隶属海关" prop="org_id">
+            <el-cascader
+              :change-on-select="true"
+              v-model="ruleForm.org_id"
+              :options="versionsoptions"
+              :props="defaultParams"
+              :clearable="true"
+              placeholder="请选择隶属海关"
+            ></el-cascader>
+          </el-form-item>
+          <el-form-item label="所在监测点" prop="point_id">
+            <el-select
+              v-model="ruleForm.point_id"
+              placeholder="请选择所在监测点"
+            >
+              <el-option
+                v-for="item in traponsoptions"
+                :label="item.point_name"
+                :value="item.point_id"
+                :key="item.point_id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <div class="addtrapbox" style="display: flex">
+            <el-form-item label="所在纬度" prop="lng">
+              <el-input v-model="ruleForm.lng"></el-input>
+              <p style="height: 24px; padding-left: 16px">
+                {{ ToDegrees(ruleForm.lng, "lng") }}
+              </p>
+            </el-form-item>
+            <el-form-item label="所在纬度" prop="lat">
+              <el-input v-model="ruleForm.lat"></el-input>
+              <p style="height: 24px; padding-left: 16px">
+                {{ ToDegrees(ruleForm.lat, "lat") }}
+              </p>
+            </el-form-item>
+          </div>
+          <div class="buttonbox">
+            <el-button type="info" size="mini" @click="dingwei"
+              >地图选点</el-button
+            >
+          </div>
+        </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>
-    <!-- MQTT配置 -->
     <el-dialog
-      title="MQTT配置"
-      :visible.sync="mqttDialogVisible"
-      width="450px"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      @close="mqttDialogClosed"
+      class="map_dialog"
+      title="地图选点"
+      :visible.sync="addLocationDialogVisible"
+      width="820px"
+      @closed="addLocationDialogClosed"
     >
       <el-form
-        ref="mqttConfigRef"
-        :model="mqttConfig"
-        label-position="right"
-        label-width="130px"
-        :rules="mqttFormRules"
+        :inline="true"
+        :model="locationForm"
+        class="demo-form-inline"
+        size="mini"
       >
-        <el-form-item label="MQTT用户名:" prop="muid">
-          <el-input v-model="mqttConfig.muid"></el-input>
-        </el-form-item>
-        <el-form-item label="MQTT密码:" prop="mpwd">
-          <el-input type="password" v-model="mqttConfig.mpwd"></el-input>
-        </el-form-item>
-        <el-form-item label="MQTT地址:" prop="mip">
-          <el-input v-model="mqttConfig.mip"></el-input>
-        </el-form-item>
-        <el-form-item label="MQTT端口:" prop="mport">
-          <el-input v-model="mqttConfig.mport"></el-input>
-        </el-form-item>
-        <el-form-item label="上传地址:" prop="mpub">
-          <el-input v-model="mqttConfig.mpub"></el-input>
-        </el-form-item>
-        <el-form-item label="下发地址:" prop="msub">
-          <el-input v-model="mqttConfig.msub"></el-input>
-        </el-form-item>
-        <el-form-item label="FTP用户名:" prop="fuid">
-          <el-input v-model="mqttConfig.fuid"></el-input>
-        </el-form-item>
-        <el-form-item label="FTP密码:" prop="fpwd">
-          <el-input type="password" v-model="mqttConfig.fpwd"></el-input>
+        <el-form-item label="经度">
+          <el-input clearable v-model="locationForm.lng"></el-input>
         </el-form-item>
-        <el-form-item label="图片上传地址:" prop="fip">
-          <el-input v-model="mqttConfig.fip"></el-input>
+        <el-form-item label="纬度">
+          <el-input clearable v-model="locationForm.lat"></el-input>
         </el-form-item>
-        <el-form-item label="图片上传端口:" prop="fport">
-          <el-input v-model="mqttConfig.fport"></el-input>
-        </el-form-item>
-        <el-form-item style="text-align: right">
-          <el-button
-            type="default"
-            size="mini"
-            @click="mqttDialogVisible = false"
-            >取消</el-button
-          >
-          <el-button type="primary" size="mini" @click="mqttSubm"
-            >确定</el-button
+        <el-form-item>
+          <el-button type="primary" size="mini" @click="locationSearch"
+            >定位</el-button
           >
         </el-form-item>
+        <el-form-item label="">
+          <el-input
+            placeholder="请输入地区检索"
+            v-model="addr"
+            clearable
+            @change="addrChange()"
+          ></el-input>
+        </el-form-item>
       </el-form>
+      <div class="amap-demo" id="mapContainer2" style="height: 400px"></div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="addLocationDialogVisible = false" size="mini"
+          >取 消</el-button
+        >
+        <el-button type="primary" @click="addLocationSubm" size="mini"
+          >确 定</el-button
+        >
+      </span>
     </el-dialog>
   </div>
 </template>
@@ -637,6 +633,7 @@ import SearchBar from "@/components/SearchBar";
 // import TopModule from "@/components/TopModule";
 import EquipItem from "@/components/EquipItem";
 import Circulation from "../../../../static/js/equipState_dict.json";
+import { isArray } from "highcharts";
 
 export default {
   filters: {
@@ -727,24 +724,6 @@ export default {
         fip: "",
         fport: "",
       },
-      mqttFormRules: {
-        muid: [
-          { required: true, message: "请填写MQTT用户名", trigger: "blur" },
-        ],
-        mpwd: [{ required: true, message: "请填写MQTT密码", trigger: "blur" }],
-        mip: [{ required: true, message: "请填写MQTT地址", trigger: "blur" }],
-        mport: [{ required: true, message: "请填写MQTT端口", trigger: "blur" }],
-        mpub: [{ required: true, message: "请填写上传地址", trigger: "blur" }],
-        msub: [{ required: true, message: "请填写下发地址", trigger: "blur" }],
-        // fuid: [{ required: true, message: '请填写FTP用户名', trigger: 'blur' }],
-        // fpwd: [{ required: true, message: '请填写FTP密码', trigger: 'blur' }],
-        fip: [
-          { required: true, message: "请填写图片上传地址", trigger: "blur" },
-        ],
-        fport: [
-          { required: true, message: "请填写图片上传端口", trigger: "blur" },
-        ],
-      },
       loading: true,
       equipStateDict: {}, //
 
@@ -770,6 +749,48 @@ export default {
           label: "计数",
         },
       ],
+      versionsoptions: [], //组织
+      traponsoptions: [], //监测点
+      defaultParams: {
+        label: "org_name",
+        value: "id",
+        children: "childrens",
+        multiple: true,
+        checkStrictly: true,
+      },
+      ruleForm: {
+        // org_name:"",
+        device_name: "",
+        org_id: [],
+        point_id: "",
+        lng: "",
+        lat: "",
+        device_name: "",
+        device_id: "",
+      },
+      rules: {
+        device_name: [
+          { required: true, message: "请输入设备名称", trigger: "blur" },
+        ],
+        lng: [{ required: true, message: "请输入经度", trigger: "blur" }],
+        lat: [{ required: true, message: "请输入纬度", trigger: "blur" }],
+        org_id: [
+          { required: true, message: "请选择隶属海关", trigger: "change" },
+        ],
+        point_id: [
+          { required: true, message: "请选择所在监测点", trigger: "change" },
+        ],
+      },
+      //地图属性
+      addLocationDialogVisible: false,
+      locationForm: {
+        lng: "",
+        lat: "",
+      },
+      addr: "", //搜索栏地址
+      address: "", //地图上标签地址
+      center: [114.05, 22.55],
+      content: "",
     };
   },
   created() {
@@ -784,6 +805,7 @@ export default {
     }
     console.log("mounted");
     this.getEquipList();
+    this.getmon();
   },
   activated() {
     this.getEquipList();
@@ -867,7 +889,7 @@ export default {
     dataDetails(e_id, d_id, data) {
       this.device_id = e_id;
       this.$router.push({
-        path: `/index/cbdDataDetails/${e_id}/${d_id}`,
+        path: `/index/DataDetails/${e_id}/${d_id}`,
         query: {
           addr: data.address,
           name: data.device_name,
@@ -878,7 +900,7 @@ export default {
     viewPhotoDialog(id, d_id, name, addr) {
       this.device_id = id;
       this.$router.push({
-        path: `/index/cbdDataPhotos/${id}`,
+        path: `/index/DataPhotos/${id}`,
         query: { d_id: d_id, name: name, addr: addr },
       });
     },
@@ -1027,69 +1049,107 @@ export default {
           });
         });
     },
-    equipOperation(d_id, device_id, device_name) {
-      this.d_id = d_id;
-      this.equipInfo = { device_id, device_name };
+    equipOperation(item) {
+      console.log(item);
+      this.ruleForm.device_id = item.imei;
+      this.ruleForm.device_name = item.device_name;
+      this.ruleForm.lng = item.lng;
+      this.ruleForm.lat = item.lat;
+      this.ruleForm.point_id = item.point_id;
+
+      this.d_id = item.d_id;
+      this.equipInfo = {
+        device_id: item.device_id,
+        device_name: item.device_name,
+      };
       this.operationDialogVisible = true;
-    },
-    equipBtnControl(cmd) {
-      let loading = this.$loading({
-        lock: true,
-        text: "Loading",
-        spinner: "el-icon-loading",
-        background: "rgba(0, 0, 0, 0.7)",
-      });
-      if (cmd == "dtu_update") {
-        var name = "联网模块升级";
-      } else if (cmd == "dtu_reboot") {
-        var name = "联网模块重启";
-      } else if (cmd == "takephoto") {
-        var name = "拍照";
-      } else if (cmd == "update") {
-        var name = "强制升级";
-      } else if (cmd == "reboot") {
-        var name = "强制重启";
-      } else if (cmd == "open_shake") {
-        var name = "强制震动开启";
-      } else if (cmd == "close_shake") {
-        var name = "强制震动关闭";
-      } else if (cmd == "yfwlw") {
-        var name = "平台切换";
-      } else if (cmd == "imei") {
-        var name = "修改设备号";
-      }
 
-      this.$confirm("此操作对设备进行" + name + ", 是否继续?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(() => {
-          this.$axios({
-            method: "POST",
-            url: "/api/api_gateway?method=forecast.send_control.admin_device_control",
-            data: this.qs.stringify({
-              cmd,
-              device_type_id: 3,
-              d_id: this.d_id,
-              imei: this.replaceImeiData, // 更换imei
-            }),
-          }).then((res) => {
-            if (res.data.message == "") {
-              this.$message.success("指令下发成功!");
+      // for (var key in this.ruleForm) {
+      //   this.ruleForm[key] = e[key];
+      // }
+      this.ruleForm.org_id = [];
+      for (var i = 0; i < item.org_list.length; i++) {
+        var arr = [item.org_list[i].org_id];
+        this.ruleForm.org_id.push(arr);
+      }
+      if (item.superior_org_list.length != 0) {
+        var data = item.superior_org_list;
+        for (var i = 0; i < data.length; i++) {
+          // console.log(data[i])
+          if (data[i].superior_org.length > 1) {
+            var data2 = data[i].superior_org;
+            // console.log(data2)
+            for (var j = 0; j < data2.length; j++) {
+              // console.log(data2[j])
+              this.ruleForm.org_id[i].unshift(data2[j].org_id);
             }
-            loading.close();
-          });
-        })
-        .catch(() => {
-          this.$message({
-            type: "info",
-            message: name + "已取消",
-            duration: 1500,
-          });
-          loading.close();
-        });
+          } else {
+            if (data[i].superior_org.length != 0) {
+              this.ruleForm.org_id[i].unshift(data[i].superior_org[0].org_id);
+            }
+          }
+        }
+      }
+      console.log(this.ruleForm);
     },
+    // equipBtnControl(cmd) {
+    //   let loading = this.$loading({
+    //     lock: true,
+    //     text: "Loading",
+    //     spinner: "el-icon-loading",
+    //     background: "rgba(0, 0, 0, 0.7)",
+    //   });
+    //   if (cmd == "dtu_update") {
+    //     var name = "联网模块升级";
+    //   } else if (cmd == "dtu_reboot") {
+    //     var name = "联网模块重启";
+    //   } else if (cmd == "takephoto") {
+    //     var name = "拍照";
+    //   } else if (cmd == "update") {
+    //     var name = "强制升级";
+    //   } else if (cmd == "reboot") {
+    //     var name = "强制重启";
+    //   } else if (cmd == "open_shake") {
+    //     var name = "强制震动开启";
+    //   } else if (cmd == "close_shake") {
+    //     var name = "强制震动关闭";
+    //   } else if (cmd == "yfwlw") {
+    //     var name = "平台切换";
+    //   } else if (cmd == "imei") {
+    //     var name = "修改设备号";
+    //   }
+
+    //   this.$confirm("此操作对设备进行" + name + ", 是否继续?", "提示", {
+    //     confirmButtonText: "确定",
+    //     cancelButtonText: "取消",
+    //     type: "warning",
+    //   })
+    //     .then(() => {
+    //       this.$axios({
+    //         method: "POST",
+    //         url: "/api/api_gateway?method=forecast.send_control.admin_device_control",
+    //         data: this.qs.stringify({
+    //           cmd,
+    //           device_type_id: 3,
+    //           d_id: this.d_id,
+    //           imei: this.replaceImeiData, // 更换imei
+    //         }),
+    //       }).then((res) => {
+    //         if (res.data.message == "") {
+    //           this.$message.success("指令下发成功!");
+    //         }
+    //         loading.close();
+    //       });
+    //     })
+    //     .catch(() => {
+    //       this.$message({
+    //         type: "info",
+    //         message: name + "已取消",
+    //         duration: 1500,
+    //       });
+    //       loading.close();
+    //     });
+    // },
 
     // 设备版本、用户筛选
     searchChange() {
@@ -1203,7 +1263,7 @@ export default {
       })
         .then(({ value }) => {
           this.replaceImeiData = value;
-          this.equipBtnControl("imei");
+          // this.equipBtnControl("imei");
         })
         .catch(() => {
           this.$message({
@@ -1292,6 +1352,272 @@ export default {
           this.$message.error("操作失败,请重试!");
         });
     },
+    submitForm(formName) {
+      // console.log(isArray(this.ruleForm.org_id));
+      var org_id=[];
+      // if (Array.isArray(this.ruleForm.org_id)) {
+      //   org_id = this.ruleForm.org_id[this.ruleForm.org_id.length - 1];
+      // } else {
+      //   org_id = this.ruleForm.org_id;
+      // }
+      if (Array.isArray(this.ruleForm.org_id)) {
+        for (var i = 0; i < this.ruleForm.org_id.length; i++) {
+          org_id.push(
+            this.ruleForm.org_id[i][this.ruleForm.org_id[i].length - 1]
+          );
+        }
+        // org_id = this.ruleForm.org_id[this.ruleForm.org_id.length - 1];
+      } else {
+        org_id = this.ruleForm.org_id;
+      }
+      org_id = org_id.join("/");
+      console.log(this.ruleForm)
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.$axios({
+            method: "POST",
+            url: "/api/api_gateway?method=monitor_manage.cbd_manage.add_device_info",
+            data: this.qs.stringify({
+              org_id: org_id, //                  非必传(num)                诱捕器id 修改项
+              point_id: this.ruleForm.point_id, //               必传(string)               设备编号
+              lat: this.ToDigital(this.ruleForm.lat), //                       必传(string)               纬度
+              lng: this.ToDigital(this.ruleForm.lng), //
+              device_id: this.ruleForm.device_id,
+              device_name: this.ruleForm.device_name,
+            }),
+          }).then((res) => {
+            console.log(res);
+            if (res.data.data) {
+              // var message = "";
+              // if (this.parameter == "add") {
+              //   // console.log(this.$data.addtitle)
+              //   message = "添加成功!";
+              // } else if (this.parameter == "modify") {
+              //   message = "修改成功!";
+              // }
+              this.$message({
+                showClose: true,
+                message: "修改成功!",
+                type: "success",
+              });
+              this.operationDialogVisible = false;
+              this.getEquipList();
+            } else {
+              this.$message({
+                showClose: true,
+                message: "添加失败" + res.data.message,
+                type: "warning",
+              });
+            }
+          });
+        } else {
+          this.$message({
+            message: "请将信息填写完全",
+            type: "warning",
+          });
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.operationDialogVisible = false;
+      this.$refs[formName].resetFields();
+      for (var key in this.ruleForm) {
+        this.ruleForm[key] = "";
+      }
+    },
+    getmon() {
+      //获取监测点列表 组织列表
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=sysmenage.usermanager.org_list",
+      }).then((res) => {
+        console.log(res.data.data);
+        this.versionsoptions = res.data.data.page_list; //组织
+        this.traponsoptions = res.data.data.point_data;
+        this.inducer_data = res.data.data.inducer_data;
+      });
+    },
+    init() {
+      console.log(document.getElementById("mapContainer2"));
+      var map = new AMap.Map("mapContainer2", {
+        center: this.center,
+        resizeEnable: true,
+        zoom: 10,
+        lang: "en",
+      });
+      AMap.plugin(["AMap.ToolBar", "AMap.Geocoder"], () => {
+        map.addControl(new AMap.ToolBar());
+        this.geocoder = new AMap.Geocoder({
+          city: "全国",
+          radius: 1000,
+        });
+      });
+      setTimeout(() => {
+        var marker = new AMap.Marker({
+          position: this.center,
+        });
+        console.log(this.center);
+        marker.setMap(map);
+      }, 1000);
+      this.map = map;
+      this.testevent();
+    },
+    addrChange() {
+      //位置搜索
+      var marker = new AMap.Marker();
+      this.geocoder.getLocation(this.addr, (status, result) => {
+        if (status === "complete" && result.geocodes.length) {
+          var lnglat = result.geocodes[0].location;
+          marker.setPosition(lnglat);
+          this.map.add(marker);
+          this.map.setFitView(marker);
+          this.locationForm = {
+            lat: lnglat.lat,
+            lng: lnglat.lng,
+          };
+        } else {
+          this.$message.error("根据地址查询位置失败");
+        }
+      });
+    },
+    // 地图点击事件
+    testevent() {
+      this.map.on("click", (ev) => {
+        var lnglat = [ev.lnglat.lng, ev.lnglat.lat];
+        this.locationForm = { lng: lnglat[0], lat: lnglat[1] };
+        this.map.clearMap();
+        var marker = new AMap.Marker({
+          position: lnglat,
+        });
+        marker.setMap(this.map);
+        this.getAddress(lnglat);
+        setTimeout(() => {
+          new AMap.InfoWindow({
+            content: "<h5>" + "当前选中地址" + "</h5>" + this.address,
+            offset: new AMap.Pixel(0, -32),
+          }).open(this.map, lnglat);
+        }, 100);
+      });
+    },
+    getAddress(lnglat) {
+      AMap.plugin("AMap.Geocoder", () => {
+        this.geocoder.getAddress(lnglat, (status, result) => {
+          if (status === "complete" && result.info === "OK") {
+            this.address = result.regeocode.formattedAddress;
+          }
+        });
+      });
+    },
+    addLocationSubm() {
+      //点击确定
+      this.ruleForm.lng = this.locationForm.lng;
+      this.ruleForm.lat = this.locationForm.lat;
+      console.log(this.ruleForm)
+      this.addLocationDialogVisible = false;
+    },
+    addLocationDialogClosed() {
+      //弹框关闭时
+      this.locationForm = { lat: "", lng: "" };
+      this.center = [];
+      this.map = null;
+    },
+    locationSearch() {
+      if (this.locationForm.lat && this.locationForm.lng) {
+        let lnglat = [this.locationForm.lng, this.locationForm.lat];
+        var marker = new AMap.Marker({
+          position: lnglat,
+        });
+        marker.setMap(this.map);
+      } else {
+        this.$message.warning("请输入经纬度!");
+        // return fasle;
+      }
+    },
+    dingwei() {
+      if (this.ruleForm.lng != "" && this.ruleForm.lng != 0) {
+        this.center[0] = this.ruleForm.lng;
+      }
+      if (this.ruleForm.lat != "" && this.ruleForm.lat != 0) {
+        this.center[1] = this.ruleForm.lat;
+      }
+      this.addLocationDialogVisible = true;
+      setTimeout(() => {
+        this.init();
+      }, 500);
+    },
+    //度转度°分′秒″
+    ToDegrees(val, type) {
+      if (typeof val == "undefined" || val == "" || isNaN(val)) {
+        return val;
+      }
+      val = val.toString();
+      var A = "";
+      if (type == "lng") {
+        A = val > 0 ? "E" : "W";
+      } else if (type == "lat") {
+        A = val > 0 ? "N" : "S";
+      }
+      var i = val.indexOf(".");
+      var strDu = i < 0 ? val : val.substring(0, i); //获取度
+      var strFen = 0;
+      var strMiao = 0;
+      if (i > 0) {
+        var strFen = "0" + val.substring(i);
+        strFen = strFen * 60 + "";
+        i = strFen.indexOf(".");
+        if (i > 0) {
+          strMiao = "0" + strFen.substring(i);
+          strFen = strFen.substring(0, i); //获取分
+          strMiao = strMiao * 60 + "";
+          i = strMiao.indexOf(".");
+          strMiao = strMiao.substring(0, i + 4); //取到小数点后面三位
+          strMiao = parseFloat(strMiao).toFixed(2); //精确小数点后面两位
+        }
+      }
+      console.log(strDu, strFen, strMiao);
+      return strDu + "°" + strFen + "′" + strMiao + "″" + A;
+    },
+    //度°分′秒″转度
+    ToDigital(lnglat) {
+      console.log(lnglat);
+      if (!isNaN(lnglat)) {
+        return lnglat;
+      }
+      lnglat = lnglat.toString();
+      var strDu, strFen, strMiao;
+      var duindex = lnglat.indexOf("°"); //字符度的下标
+      var fenindex = lnglat.indexOf("′"); //字符分的下标
+      var miaoindex = lnglat.indexOf("″"); //字符秒的下标
+      strDu = lnglat.slice(0, duindex);
+      strFen = lnglat.slice(duindex + 1, fenindex);
+      strMiao = lnglat.slice(fenindex + 1, miaoindex);
+      // len = len > 6 || typeof len == "undefined" ? 6 : len; //精确到小数点后最多六位
+      strDu =
+        typeof strDu == "undefined" || strDu == "" ? 0 : parseFloat(strDu);
+      strFen =
+        typeof strFen == "undefined" || strFen == ""
+          ? 0
+          : parseFloat(strFen) / 60;
+      strMiao =
+        typeof strMiao == "undefined" || strMiao == ""
+          ? 0
+          : parseFloat(strMiao) / 3600;
+      var digital = strDu + strFen + strMiao;
+      if (digital == 0) {
+        return "";
+      } else {
+        return digital.toFixed(6);
+      }
+    },
+    orglisthover(e) {
+      console.log(e);
+      var str = ``;
+      for (var i = 0; i < e.org_list.length; i++) {
+        str += `<p>` + e.org_list[i].org_name + `</p>`;
+      }
+      this.content = str;
+    },
   },
   components: {
     SearchBar,
@@ -1340,6 +1666,14 @@ export default {
     margin-right: 8px;
   }
 }
+.buttonbox {
+  margin-bottom: 23px;
+  padding-left: 100px;
+  /deep/.el-button {
+    background-color: #409eff;
+    border-color: #409eff;
+  }
+}
 
 .real-time {
   display: flex;
@@ -1446,10 +1780,10 @@ export default {
   /deep/.el-button--mini {
     padding: 6px 8px !important;
   }
-  /deep/.el-button--info{
-    color: #FFF;
-    background-color: #409EFF;
-    border-color: #409EFF;
+  /deep/.el-button--info {
+    color: #fff;
+    background-color: #409eff;
+    border-color: #409eff;
   }
 }
 </style>

+ 590 - 0
minggao/src/page/forecasting/maintain/maintain.vue

@@ -0,0 +1,590 @@
+<!--  -->
+<template>
+  <div class="maintainbox">
+    <div class="maintainbox_search">
+      <el-input
+        v-model="monitorname"
+        placeholder="请输入监测点名称"
+        size="mini"
+      ></el-input>
+      <el-button type="info" @click="search" size="mini">搜索</el-button>
+      <el-button
+        type="info"
+        size="mini"
+        @click="(addtraptf = true), (addtitle = '新增监测点')"
+        >添加监测点</el-button
+      >
+      <el-button type="info" size="mini" @click="addtraptf = true"
+        >导入监测点</el-button
+      >
+    </div>
+    <el-card class="box-card" style="margin-top: 15px">
+      <div class="cbdboxs_table" v-loading="loading">
+        <el-table :data="tableData" style="width: 100%" :stripe="true">
+          <el-table-column prop="index" label="序号"> </el-table-column>
+          <el-table-column
+            prop="point_name"
+            label="监测点名称"
+          ></el-table-column>
+          <el-table-column prop="lng" label="经度">
+            <template slot-scope="scope">
+              <span>{{ ToDegrees(scope.row.lng, "lng") }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="lat" label="纬度">
+            <template slot-scope="scope">
+              <span>{{ ToDegrees(scope.row.lat, "lat") }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="messages" label="简介"></el-table-column>
+          <el-table-column label="操作" width="300">
+            <template slot-scope="scope">
+              <span
+                style="color: #409eff; margin-right: 5px"
+                @click="alter(scope.row)"
+                >编辑</span
+              >
+              <span
+                style="color: #409eff; margin-right: 5px"
+                @click="deletemain(scope.row)"
+                >删除</span
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <el-pagination
+        background
+        layout="prev, pager, next"
+        :total="total"
+        @current-change="pageChange"
+      >
+      </el-pagination>
+    </el-card>
+    <el-dialog
+      :title="addtitle"
+      :visible.sync="addtraptf"
+      width="30%"
+      @close="resetForm('ruleForm')"
+    >
+      <div>
+        <el-form
+          :model="ruleForm"
+          :rules="rules"
+          ref="ruleForm"
+          label-width="100px"
+          class="demo-ruleForm"
+        >
+          <el-form-item label="诱捕器名称" prop="point_name">
+            <el-input v-model="ruleForm.point_name"></el-input>
+          </el-form-item>
+          <div class="addtrapbox">
+            <el-form-item label="所在纬度" prop="lng">
+              <el-input v-model="ruleForm.lng"></el-input>
+              <p style="height: 24px; padding-left: 16px">
+                {{ ToDegrees(ruleForm.lng, "lng") }}
+              </p>
+            </el-form-item>
+            <el-form-item label="所在纬度" prop="lat">
+              <el-input v-model="ruleForm.lat"></el-input>
+              <p style="height: 24px; padding-left: 16px">
+                {{ ToDegrees(ruleForm.lat, "lat") }}
+              </p>
+            </el-form-item>
+          </div>
+          <div class="buttonbox">
+            <el-button type="info" size="mini" @click="dingwei"
+              >地图选点</el-button
+            >
+          </div>
+          <el-form-item label="监测点描述" prop="messages">
+            <el-input type="textarea" v-model="ruleForm.messages"></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>
+    <el-dialog
+      class="map_dialog"
+      title="地图选点"
+      :visible.sync="addLocationDialogVisible"
+      width="820px"
+      @closed="addLocationDialogClosed"
+    >
+      <el-form
+        :inline="true"
+        :model="locationForm"
+        class="demo-form-inline"
+        size="mini"
+      >
+        <el-form-item label="经度">
+          <el-input clearable v-model="locationForm.lng"></el-input>
+        </el-form-item>
+        <el-form-item label="纬度">
+          <el-input clearable v-model="locationForm.lat"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" size="mini" @click="locationSearch"
+            >定位</el-button
+          >
+        </el-form-item>
+        <el-form-item label="">
+          <el-input
+            placeholder="请输入地区检索"
+            v-model="addr"
+            clearable
+            @change="addrChange()"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <div class="amap-demo" id="mapContainer2" style="height: 400px"></div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="addLocationDialogVisible = false" size="mini"
+          >取 消</el-button
+        >
+        <el-button type="primary" @click="addLocationSubm" size="mini"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
+
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: {},
+  data() {
+    var checklnglat = (rule, value, callback) => {
+      if (isNaN(value)) {
+        callback(new Error("请输入数字"));
+      } else {
+        callback();
+      }
+    };
+    //这里存放数据
+    return {
+      monitorname: "", //搜索 监测点名称
+      addtraptf: false, //添加框
+      loading: false, //加载框
+      page: 1, //页码
+      total: 10, //数据总条数,
+      tableData: [],
+      ruleForm: {
+        point_name: "",
+        lng: "",
+        lat: "",
+        messages: "",
+      },
+      rules: {
+        point_name: [
+          { required: true, message: "请输入诱捕器名称", trigger: "blur" },
+        ],
+        lng: [
+          { required: true, message: "请输入经度", trigger: "blur" },
+          //   { validator: checklnglat, trigger: "blur" },
+        ],
+        lat: [
+          { required: true, message: "请输入纬度", trigger: "blur" },
+          //   { validator: checklnglat, trigger: "blur" },
+        ],
+        // messages: [
+        //   { required: true, message: "请输入监测点描述", trigger: "blur" },
+        // ],
+      },
+      addtitle: "新增监测点",
+      point_id: "",
+      //地图属性
+      addLocationDialogVisible: false,
+      locationForm: {
+        lng: "",
+        lat: "",
+      },
+      addr: "", //搜索栏地址
+      address: "", //地图上标签地址
+      center: [114.05, 22.55],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    getmaintainlist() {
+      this.loading = true;
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=monitor_manage.maintain.checkpoint_list",
+        data: this.qs.stringify({
+          page_size: 10,
+          page: this.page,
+          org_name: this.monitorname, //              非必传(string)     诱剂名称 搜索项
+        }),
+      }).then((res) => {
+        this.loading = false;
+        console.log(res.data.data);
+        this.total = res.data.data.total_item;
+        this.tableData = res.data.data.page_list;
+        for (var i = 0; i < this.tableData.length; i++) {
+          this.tableData[i]["index"] = i + 1;
+        }
+      });
+    },
+    search() {
+      this.getmaintainlist();
+    },
+    pageChange(e) {
+      //当页码更改时
+      // console.log(e)
+      this.queryInfo.page = e;
+      this.getmaintainlist();
+    },
+    submitForm(formName) {
+      console.log(this.ruleForm);
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          if (this.addtitle == "新增监测点") {
+            this.$axios({
+              method: "POST",
+              url: "/api/api_gateway?method=monitor_manage.maintain.checkpoint_add",
+              data: this.qs.stringify({
+                point_name: this.ruleForm.point_name, //                  非必传(num)                诱捕器id 修改项
+                lat: this.ToDigital(this.ruleForm.lat), //                       必传(string)               纬度
+                lng: this.ToDigital(this.ruleForm.lng), //                       必传(string)               经度
+                messages: this.ruleForm.messages,
+              }),
+            }).then((res) => {
+              console.log(res);
+              if (res.data.data) {
+                this.$message({
+                  showClose: true,
+                  message: "添加成功!",
+                  type: "success",
+                });
+                this.addtraptf = false;
+                this.getmaintainlist();
+              } else {
+                this.$message({
+                  showClose: true,
+                  message: "添加失败" + res.data.message,
+                  type: "warning",
+                });
+              }
+            });
+          } else if (this.addtitle == "修改监测点") {
+            this.$axios({
+              method: "POST",
+              url: "/api/api_gateway?method=monitor_manage.maintain.checkpoint_modify",
+              data: this.qs.stringify({
+                point_id: this.point_id,
+                point_name: this.ruleForm.point_name, //                  非必传(num)                诱捕器id 修改项
+                lat: this.ToDigital(this.ruleForm.lat), //                       必传(string)               纬度
+                lng: this.ToDigital(this.ruleForm.lng), //                       必传(string)               经度
+                messages: this.ruleForm.messages,
+              }),
+            }).then((res) => {
+              console.log(res);
+              if (res.data.data) {
+                this.$message({
+                  showClose: true,
+                  message: "修改成功!",
+                  type: "success",
+                });
+                this.addtraptf = false;
+                this.getmaintainlist();
+              } else {
+                this.$message({
+                  showClose: true,
+                  message: "修改失败" + res.data.message,
+                  type: "warning",
+                });
+              }
+            });
+          }
+        } else {
+          this.$message({
+            message: "请将信息填写完全",
+            type: "warning",
+          });
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.addtraptf = false;
+      this.$refs[formName].resetFields();
+      for (var key in this.ruleForm) {
+        this.ruleForm[key] = "";
+      }
+    },
+    alter(data) {
+      console.log(data);
+      this.ruleForm.point_name = data.point_name;
+      this.ruleForm.lng = data.lng;
+      this.ruleForm.lat = data.lat;
+      this.ruleForm.messages = data.messages;
+      this.addtitle = "修改监测点";
+      this.addtraptf = true;
+      this.point_id = data.point_id;
+    },
+    deletemain(data) {
+      var str = "您确定删除编号为<" + data.point_name + ">的监测点吗?";
+      this.$confirm(str, "删除监测点", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+      })
+        .then(() => {
+          this.$axios({
+            method: "POST",
+            url: "/api/api_gateway?method=monitor_manage.maintain.checkpoint_delete",
+            data: this.qs.stringify({
+              point_id: data.point_id,
+            }),
+          }).then((res) => {
+            console.log(res);
+            if (res.data.data) {
+              this.$message({
+                showClose: true,
+                message: "删除成功!",
+                type: "success",
+              });
+              this.getmaintainlist();
+            } else {
+              this.$message({
+                showClose: true,
+                message: "删除失败," + res.data.message,
+                type: "warning",
+              });
+            }
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
+    init() {
+    //   console.log(document.getElementById("mapContainer2"));
+      var map = new AMap.Map("mapContainer2", {
+        center: this.center,
+        resizeEnable: true,
+        zoom: 10,
+        lang: "en",
+      });
+      AMap.plugin(["AMap.ToolBar", "AMap.Geocoder"], () => {
+        map.addControl(new AMap.ToolBar());
+        this.geocoder = new AMap.Geocoder({
+          city: "全国",
+          radius: 1000,
+        });
+      });
+      setTimeout(() => {
+        var marker = new AMap.Marker({
+          position: this.center,
+        });
+        console.log(this.center);
+        marker.setMap(map);
+      }, 1000);
+      this.map = map;
+      this.testevent();
+    },
+    addrChange() {
+      //位置搜索
+      var marker = new AMap.Marker();
+      this.geocoder.getLocation(this.addr, (status, result) => {
+        if (status === "complete" && result.geocodes.length) {
+          var lnglat = result.geocodes[0].location;
+          marker.setPosition(lnglat);
+          this.map.add(marker);
+          this.map.setFitView(marker);
+          this.locationForm = {
+            lat: lnglat.lat,
+            lng: lnglat.lng,
+          };
+        } else {
+          this.$message.error("根据地址查询位置失败");
+        }
+      });
+    },
+    // 地图点击事件
+    testevent() {
+      this.map.on("click", (ev) => {
+        var lnglat = [ev.lnglat.lng, ev.lnglat.lat];
+        this.locationForm = { lng: lnglat[0], lat: lnglat[1] };
+        this.map.clearMap();
+        var marker = new AMap.Marker({
+          position: lnglat,
+        });
+        marker.setMap(this.map);
+        this.getAddress(lnglat);
+        setTimeout(() => {
+          new AMap.InfoWindow({
+            content: "<h5>" + "当前选中地址" + "</h5>" + this.address,
+            offset: new AMap.Pixel(0, -32),
+          }).open(this.map, lnglat);
+        }, 100);
+      });
+    },
+    getAddress(lnglat) {
+      AMap.plugin("AMap.Geocoder", () => {
+        this.geocoder.getAddress(lnglat, (status, result) => {
+          if (status === "complete" && result.info === "OK") {
+            this.address = result.regeocode.formattedAddress;
+          }
+        });
+      });
+    },
+    addLocationSubm() {
+      //点击确定
+      this.ruleForm.lng = this.locationForm.lng;
+      this.ruleForm.lat = this.locationForm.lat;
+      this.addLocationDialogVisible = false;
+    },
+    addLocationDialogClosed() {
+      //弹框关闭时
+      this.locationForm = { lat: "", lng: "" };
+      this.center = [];
+      this.map = null;
+    },
+    locationSearch() {
+      if (this.locationForm.lat && this.locationForm.lng) {
+        let lnglat = [this.locationForm.lng, this.locationForm.lat];
+        var marker = new AMap.Marker({
+          position: lnglat,
+        });
+        marker.setMap(this.map);
+      } else {
+        this.$message.warning("请输入经纬度!");
+        // return fasle;
+      }
+    },
+    dingwei(data) {
+      if (this.ruleForm.lng != "" && this.ruleForm.lng != 0) {
+        if (isNaN(this.ruleForm.lng)) {
+          this.center[0] = this.ToDigital(this.ruleForm.lng);
+        } else {
+          this.center[0] = this.ruleForm.lng;
+        }
+      }
+      if (this.ruleForm.lat != "" && this.ruleForm.lat != 0) {
+        if (isNaN(this.ruleForm.lat)) {
+          this.center[1] = this.ToDigital(this.ruleForm.lat);
+        } else {
+          this.center[1] = this.ruleForm.lat;
+        }
+      }
+      this.addLocationDialogVisible = true;
+      setTimeout(() => {
+        // console.log(this.center);
+        this.init();
+      }, 500);
+    },
+    //度转度°分′秒″
+    ToDegrees(val, type) {
+      if (typeof val == "undefined" || val == "" || isNaN(val)) {
+        return val;
+      }
+      val = val.toString()
+      var A = "";
+      if (type == "lng") {
+        A = val > 0 ? "E" : "W";
+      } else if (type == "lat") {
+        A = val > 0 ? "N" : "S";
+      }
+      var i = val.indexOf(".");
+      var strDu = i < 0 ? val : val.substring(0, i); //获取度
+      var strFen = 0;
+      var strMiao = 0;
+      if (i > 0) {
+        var strFen = "0" + val.substring(i);
+        strFen = strFen * 60 + "";
+        i = strFen.indexOf(".");
+        if (i > 0) {
+          strMiao = "0" + strFen.substring(i);
+          strFen = strFen.substring(0, i); //获取分
+          strMiao = strMiao * 60 + "";
+          i = strMiao.indexOf(".");
+          strMiao = strMiao.substring(0, i + 4); //取到小数点后面三位
+          strMiao = parseFloat(strMiao).toFixed(2); //精确小数点后面两位
+        }
+      }
+      console.log(strDu, strFen, strMiao);
+      return strDu + "°" + strFen + "′" + strMiao + "″" + A;
+    },
+    //度°分′秒″转度
+    ToDigital(lnglat) {
+      if (!isNaN(lnglat)) {
+        return lnglat;
+      }
+      console.log(lnglat);
+      var strDu, strFen, strMiao;
+      var duindex = lnglat.indexOf("°"); //字符度的下标
+      var fenindex = lnglat.indexOf("′"); //字符分的下标
+      var miaoindex = lnglat.indexOf("″"); //字符秒的下标
+      strDu = lnglat.slice(0, duindex);
+      strFen = lnglat.slice(duindex + 1, fenindex);
+      strMiao = lnglat.slice(fenindex + 1, miaoindex);
+      // len = len > 6 || typeof len == "undefined" ? 6 : len; //精确到小数点后最多六位
+      strDu =
+        typeof strDu == "undefined" || strDu == "" ? 0 : parseFloat(strDu);
+      strFen =
+        typeof strFen == "undefined" || strFen == ""
+          ? 0
+          : parseFloat(strFen) / 60;
+      strMiao =
+        typeof strMiao == "undefined" || strMiao == ""
+          ? 0
+          : parseFloat(strMiao) / 3600;
+      var digital = strDu + strFen + strMiao;
+      if (digital == 0) {
+        return "";
+      } else {
+        return digital.toFixed(6);
+      }
+    },
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  //生命周期 - 创建完成(可以访问当前this实例)
+  created() {},
+  beforeMount() {}, //生命周期 - 挂载之前
+  //生命周期 - 挂载完成(可以访问DOM元素)
+  mounted() {
+    this.getmaintainlist();
+  },
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
+};
+</script>
+<style lang="less" scoped>
+.maintainbox_search {
+  display: flex;
+  /deep/.el-input {
+    width: 220px;
+    margin-right: 15px;
+  }
+}
+.addtrapbox {
+  display: flex;
+}
+.buttonbox {
+  margin-bottom: 23px;
+  padding-left: 100px;
+}
+/deep/.el-button--info {
+  background-color: #409eff;
+  border-color: #409eff;
+}
+</style>

+ 57 - 40
minggao/src/page/forecasting/trap/bait.vue

@@ -8,44 +8,57 @@
         size="mini"
       ></el-input>
       <el-button type="info" @click="search" size="mini">搜索</el-button>
-      <el-button type="info" size="mini" @click="addtraptf = true;addtitle='新增诱剂'"
+      <el-button
+        type="info"
+        size="mini"
+        @click="
+          addtraptf = true;
+          addtitle = '新增诱剂';
+        "
         >添加诱剂</el-button
       >
     </div>
-    <div class="cbdboxs_table" v-loading="loading">
-      <el-table :data="tableData" style="width: 100%" :stripe="true">
-        <el-table-column prop="index" label="序号"> </el-table-column>
-        <el-table-column
-          prop="inducer_name"
-          label="引诱剂名称"
-        ></el-table-column>
-        <el-table-column prop="expire" label="引诱剂有效天数">
-        </el-table-column>
-        <el-table-column prop="messages" label="描述"> </el-table-column>
-        <el-table-column label="操作" width="300">
-          <template slot-scope="scope">
-            <span
-              style="color: #409eff; margin-right: 5px"
-              @click="alter(scope.row)"
-              >编辑</span
-            >
-            <span
-              style="color: #409eff; margin-right: 5px"
-              @click="deletes(scope.row)"
-              >删除</span
-            >
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <el-pagination
-      background
-      layout="prev, pager, next"
-      :total="total"
-      @current-change="pageChange"
+    <el-card class="box-card" style="margin-top: 15px">
+      <div class="cbdboxs_table" v-loading="loading">
+        <el-table :data="tableData" style="width: 100%" :stripe="true">
+          <el-table-column prop="index" label="序号"> </el-table-column>
+          <el-table-column
+            prop="inducer_name"
+            label="引诱剂名称"
+          ></el-table-column>
+          <el-table-column prop="expire" label="引诱剂有效天数">
+          </el-table-column>
+          <el-table-column prop="messages" label="描述"> </el-table-column>
+          <el-table-column label="操作" width="300">
+            <template slot-scope="scope">
+              <span
+                style="color: #409eff; margin-right: 5px"
+                @click="alter(scope.row)"
+                >编辑</span
+              >
+              <span
+                style="color: #409eff; margin-right: 5px"
+                @click="deletes(scope.row)"
+                >删除</span
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <el-pagination
+        background
+        layout="prev, pager, next"
+        :total="total"
+        @current-change="pageChange"
+      >
+      </el-pagination>
+    </el-card>
+    <el-dialog
+      :title="addtitle"
+      :visible.sync="addtraptf"
+      width="30%"
+      @close="resetForm('ruleForm')"
     >
-    </el-pagination>
-    <el-dialog :title="addtitle" :visible.sync="addtraptf" width="30%" @close="resetForm('ruleForm')">
       <div>
         <el-form
           :model="ruleForm"
@@ -105,7 +118,7 @@ export default {
         inducer_name: "",
         expire: "",
         messages: "",
-        inducer_id:""
+        inducer_id: "",
       },
       rules: {
         inducer_name: [
@@ -163,6 +176,7 @@ export default {
       for (var key in this.ruleForm) {
         this.ruleForm[key] = events[key];
       }
+      // console.log(this.ruleForm)
     }, //修改
     deletes(events) {
       //删除
@@ -206,6 +220,7 @@ export default {
         });
     },
     submitForm(formName) {
+      console.log(this.ruleForm);
       this.$refs[formName].validate((valid) => {
         if (valid) {
           if (this.addtitle == "修改诱剂") {
@@ -213,7 +228,7 @@ export default {
               method: "POST",
               url: "/api/api_gateway?method=monitor_manage.maintain.inducer_modify",
               data: this.qs.stringify({
-                inducer_id:this.ruleForm.inducer_id,
+                inducer_id: this.ruleForm.inducer_id,
                 inducer_name: this.ruleForm.inducer_name,
                 expire: Number(this.ruleForm.expire),
                 messages: this.ruleForm.messages,
@@ -276,11 +291,14 @@ export default {
     resetForm(formName) {
       this.addtraptf = false;
       this.$refs[formName].resetFields();
+      for(var key in this.ruleForm){
+          this.ruleForm[key] = ''
+      }
     },
-    dioclose(){
-      console.log(111)
+    dioclose() {
+      console.log(111);
       // this.$refs[formName].resetFields();
-    }
+    },
   },
   beforeCreate() {}, //生命周期 - 创建之前
   //生命周期 - 创建完成(可以访问当前this实例)
@@ -316,7 +334,6 @@ export default {
   }
 }
 .cbdboxs_table {
-  margin-top: 15px;
   /deep/.el-table__header-wrapper {
     th {
       background-color: #fafafa;

+ 130 - 60
minggao/src/page/forecasting/trap/fillinrecord.vue

@@ -2,9 +2,21 @@
 <template>
   <div class="cbdbox">
     <div class="cbdboxs_search">
-      <el-input v-model="idinput" placeholder="请输入诱捕器ID" size="mini"></el-input>
-      <el-input v-model="nameinput" placeholder="请输入填报人" size="mini"></el-input>
-      <el-select v-model="inoffvalue" placeholder="请选择所在监测点" size="mini">
+      <el-input
+        v-model="idinput"
+        placeholder="请输入诱捕器ID"
+        size="mini"
+      ></el-input>
+      <el-input
+        v-model="nameinput"
+        placeholder="请输入填报人"
+        size="mini"
+      ></el-input>
+      <el-select
+        v-model="inoffvalue"
+        placeholder="请选择所在监测点"
+        size="mini"
+      >
         <el-option
           v-for="item in inoffoptions"
           :key="item.point_id"
@@ -13,16 +25,20 @@
         >
         </el-option>
       </el-select>
-      <!-- <el-select v-model="versionsvalue" placeholder="请选择隶属海关" size="mini">
+      <el-select
+        v-model="versionsvalue2"
+        placeholder="请选择隶属海关"
+        size="mini"
+      >
         <el-option
-          v-for="item in versionsoptions"
-          :key="item.org_id"
+          v-for="item in versionsoptions2"
+          :key="item.org_name"
           :label="item.org_name"
-          :value="item.org_id"
+          :value="item.org_name"
         >
         </el-option>
-      </el-select> -->
-      <el-cascader
+      </el-select>
+      <!-- <el-cascader
         :change-on-select="true"
         :options="versionsoptions"
         v-model="versionsvalue"
@@ -30,7 +46,7 @@
         :clearable="true"
         size="mini"
         placeholder="请选择隶属海关"
-      ></el-cascader>
+      ></el-cascader> -->
       <el-date-picker
         v-model="timevalue"
         type="daterange"
@@ -43,32 +59,55 @@
       </el-date-picker>
       <el-button type="info" @click="search" size="mini">搜索</el-button>
       <el-button @click="reset" size="mini">重置</el-button>
-      <el-button type="info" size="mini" @click="deriveVisible = true">导出数据</el-button>
-    </div>
-    <div class="cbdboxs_table" v-loading="loading">
-      <el-table :data="tableData" style="width: 100%" :stripe="true">
-        <el-table-column prop="index" label="序号"> </el-table-column>
-        <el-table-column prop="trap_number" label="编号"></el-table-column>
-        <el-table-column prop="org_name" label="组织"> </el-table-column>
-        <el-table-column prop="point_name" label="监测点"> </el-table-column>
-        <el-table-column prop="inducer_name" label="诱剂"> </el-table-column>
-        <el-table-column prop="pest_name" label="有害生物"> </el-table-column>
-        <el-table-column prop="pest_number" label="有害生物数量">
-        </el-table-column>
-        <el-table-column prop="user_name" label="填报人"> </el-table-column>
-        <el-table-column prop="report_status" label="填报渠道">
-        </el-table-column>
-        <el-table-column prop="create_time" label="填报时间" width="200">
-        </el-table-column>
-      </el-table>
+      <el-button type="info" size="mini" @click="deriveVisible = true"
+        >导出数据</el-button
+      >
     </div>
-    <el-pagination
-      background
-      layout="prev, pager, next"
-      :total="total"
-      @current-change="pageChange"
-    >
-    </el-pagination>
+    <el-card class="box-card" style="margin-top: 15px">
+      <div class="cbdboxs_table" v-loading="loading">
+        <el-table :data="tableData" style="width: 100%" :stripe="true">
+          <el-table-column prop="index" label="序号" width="60px"> </el-table-column>
+          <el-table-column prop="trap_number" label="编号"></el-table-column>
+          <el-table-column prop="org_name" label="组织">
+            <template slot-scope="scope">
+              <span v-if="scope.row.org_name.split(',').length == 1">{{
+                scope.row.org_name
+              }}</span>
+              <el-popover
+                ref="popover"
+                placement="right"
+                title=""
+                width="150"
+                trigger="hover"
+                v-else
+              >
+                <div class="popover-content" v-html="content"></div>
+                <span @mouseover="orglisthover(scope.row)" slot="reference"
+                  >{{ scope.row.org_name.split(',')[0] }}...</span
+                >
+              </el-popover>
+            </template>
+          </el-table-column>
+          <el-table-column prop="point_name" label="监测点"> </el-table-column>
+          <el-table-column prop="inducer_name" label="诱剂"> </el-table-column>
+          <el-table-column prop="pest_name" label="有害生物"> </el-table-column>
+          <el-table-column prop="pest_number" label="有害生物数量">
+          </el-table-column>
+          <el-table-column prop="user_name" label="填报人"> </el-table-column>
+          <el-table-column prop="report_status" label="填报渠道">
+          </el-table-column>
+          <el-table-column prop="create_time" label="填报时间" width="200">
+          </el-table-column>
+        </el-table>
+      </div>
+      <el-pagination
+        background
+        layout="prev, pager, next"
+        :total="total"
+        @current-change="pageChange"
+      >
+      </el-pagination>
+    </el-card>
     <el-dialog title="提示" :visible.sync="deriveVisible" width="30%">
       <div class="derivebox">
         <p><span>*</span>文件名称:</p>
@@ -103,6 +142,8 @@ export default {
       inoffoptions: [],
       versionsvalue: "",
       versionsoptions: [],
+      versionsvalue2: "",
+      versionsoptions2: [],
       queryInfo: {
         page: 1,
         trap_number: "", //   设备编号 搜索项
@@ -116,14 +157,15 @@ export default {
       device_id: "",
       total: 10,
       loading: false,
-      timevalue: "",//时间段
-      deriveVisible:false,//导出弹框
-      derivefilename:"",//导出文件名称
+      timevalue: "", //时间段
+      deriveVisible: false, //导出弹框
+      derivefilename: "", //导出文件名称
       defaultParams: {
         label: "org_name",
         value: "id",
         children: "childrens",
       },
+      content:""
     };
   },
   //监听属性 类似于data概念
@@ -158,47 +200,65 @@ export default {
         }
       });
     },
-    getmon() {
-      //获取监测点列表 组织列表
+    // getmon() {
+    //   //获取监测点列表 组织列表
+    //   this.$axios({
+    //     method: "POST",
+    //     url: "/api/api_gateway?method=sysmenage.usermanager.org_list",
+    //   }).then((res) => {
+    //     console.log(res.data.data);
+    //     this.versionsoptions = res.data.data.page_list; //组织
+    //     this.inoffoptions = res.data.data.point_data;
+    //   });
+    // },
+    getmon2() {
       this.$axios({
         method: "POST",
-        url: "/api/api_gateway?method=sysmenage.usermanager.org_list",
+        url: "/api/api_gateway?method=monitor_manage.trap_manage.pest_trap_org",
       }).then((res) => {
         console.log(res.data.data);
-        this.versionsoptions = res.data.data.page_list; //组织
+        this.versionsoptions2 = res.data.data.org_list;
+        // this.versionsoptions = res.data.data.page_list; //组织
         this.inoffoptions = res.data.data.point_data;
       });
     },
     search() {
       this.queryInfo.trap_number = this.idinput;
       this.queryInfo.user_name = this.nameinput;
-      this.queryInfo.point_name = this.inoffoptions[this.inoffvalue - 1].point_name;
-      this.queryInfo.org_name = this.versionsvalue[this.versionsvalue.length - 1];
-      // console.log(this.inoffvalue,this.versionsvalue)
+      console.log(this.inoffoptions);
+      if (this.inoffvalue) {
+        this.queryInfo.point_name =
+          this.inoffoptions[this.inoffvalue - 1].point_name;
+      }
+      this.queryInfo.org_name = this.versionsvalue2;
+      // console.log(this.versionsvalue2)
       this.getcbdlist();
     },
-    oickchange(e) {//搜索时间段
+    oickchange(e) {
+      //搜索时间段
       console.log(e);
       this.queryInfo.start_time = this.tabtime(e[0]);
       this.queryInfo.end_time = this.tabtime(e[1]);
     },
-    tabtime(times){//时间转换
-        var years = times.getFullYear()
-        var month = times.getMonth()+1
-        var date =  times.getDate()
-        return years+"-"+month+"-"+date
+    tabtime(times) {
+      //时间转换
+      var years = times.getFullYear();
+      var month = times.getMonth() + 1;
+      var date = times.getDate();
+      return years + "-" + month + "-" + date;
     },
     pageChange(e) {
       // console.log(e)
       this.queryInfo.page = e;
       this.getcbdlist();
     },
-    reset() {//重置
+    reset() {
+      //重置
       this.idinput = "";
       this.nameinput = "";
       this.inoffvalue = "";
       this.versionsvalue = "";
-      this.timevalue=""
+      this.timevalue = "";
       this.queryInfo.start_time = "";
       this.queryInfo.end_time = "";
       this.getcbdlist();
@@ -224,17 +284,26 @@ export default {
           org_name: this.queryInfo.org_name,
           trap_status: this.queryInfo.trap_status,
           file_name: this.derivefilename,
-          start_time:this.queryInfo.start_time,
-          end_time:this.queryInfo.end_time,
-          user_name:this.queryInfo.user_name,
+          start_time: this.queryInfo.start_time,
+          end_time: this.queryInfo.end_time,
+          user_name: this.queryInfo.user_name,
           user: localStorage.getItem("usernme"),
         }),
-         responseType: "blob",
+        responseType: "blob",
       }).then((res) => {
-        console.log(res)
-        this.downloadFile(res, this.derivefilename+".xls");
+        console.log(res);
+        this.downloadFile(res, this.derivefilename + ".xls");
       });
     },
+    orglisthover(e){
+      console.log(e.org_name);
+      var data = e.org_name.split(',')
+      var str = ``;
+      for (var i = 0; i < data.length; i++) {
+        str += `<p>` + data[i] + `</p>`;
+      }
+      this.content = str;
+    }
   },
   beforeCreate() {}, //生命周期 - 创建之前
   //生命周期 - 创建完成(可以访问当前this实例)
@@ -242,7 +311,8 @@ export default {
   beforeMount() {}, //生命周期 - 挂载之前
   //生命周期 - 挂载完成(可以访问DOM元素)
   mounted() {
-    this.getmon();
+    // this.getmon();
+    this.getmon2();
     this.getcbdlist();
   },
   beforeUpdate() {}, //生命周期 - 更新之前

+ 403 - 69
minggao/src/page/forecasting/trap/trap.vue

@@ -16,20 +16,20 @@
         >
         </el-option>
       </el-select>
-      <!-- <el-select
-        v-model="versionsvalue"
+      <el-select
+        v-model="versionsvalue2"
         placeholder="请选择隶属海关"
         size="mini"
       >
         <el-option
-          v-for="item in versionsoptions"
+          v-for="item in versionsoptions2"
           :key="item.org_id"
           :label="item.org_name"
           :value="item.org_id"
         >
         </el-option>
-      </el-select> -->
-      <el-cascader
+      </el-select>
+      <!-- <el-cascader
         :change-on-select="true"
         :options="versionsoptions"
         v-model="versionsvalue"
@@ -38,7 +38,7 @@
         @change="cascaderchange"
         size="mini"
         placeholder="请选择隶属海关"
-      ></el-cascader>
+      ></el-cascader> -->
       <el-select
         v-model="inoffvalue"
         placeholder="请选择诱捕器状态"
@@ -70,61 +70,95 @@
         >导出数据</el-button
       >
     </div>
-    <div class="cbdboxs_table" v-loading="loading">
-      <el-table :data="tableData" style="width: 100%" :stripe="true">
-        <el-table-column prop="index" label="序号"> </el-table-column>
-        <el-table-column prop="trap_number" label="编号"></el-table-column>
-        <el-table-column prop="lng" label="经度"> </el-table-column>
-        <el-table-column prop="lat" label="纬度"> </el-table-column>
-        <el-table-column prop="org_name" label="组织"> </el-table-column>
-        <el-table-column prop="point_name" label="监测点"> </el-table-column>
-        <el-table-column prop="inducer_name" label="诱剂"> </el-table-column>
-        <el-table-column prop="create_time" label="添加时间" width="200">
-        </el-table-column>
-        <el-table-column prop="is_online" label="状态">
-          <template slot-scope="scope">
-            <div class="state">
-              <p
-                :style="{
-                  color: scope.row.trap_status == '1' ? '#30A031 ' : 'red',
-                }"
+    <el-card class="box-card" style="margin-top: 15px">
+      <div class="cbdboxs_table" v-loading="loading">
+        <el-table :data="tableData" style="width: 100%" :stripe="true">
+          <el-table-column prop="index" label="序号" width="60px"></el-table-column>
+          <el-table-column prop="trap_number" label="编号"></el-table-column>
+          <el-table-column prop="lng" label="经度">
+            <template slot-scope="scope">
+              <span>{{ ToDegrees(scope.row.lng, "lng") }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="lat" label="纬度">
+            <template slot-scope="scope">
+              <span>{{ ToDegrees(scope.row.lat, "lat") }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="org_list" label="组织">
+            <template slot-scope="scope">
+              <span v-if="scope.row.org_list.length == 1">{{
+                scope.row.org_list[0].org_name
+              }}</span>
+              <el-popover
+                ref="popover"
+                placement="right"
+                title=""
+                width="150"
+                trigger="hover"
+                v-else
               >
-                ·
-              </p>
-              <p
-                :style="{
-                  color: scope.row.trap_status == '1' ? '#30A031 ' : 'red',
-                }"
+                <div class="popover-content" v-html="content"></div>
+                <span @mouseover="orglisthover(scope.row)" slot="reference"
+                  >{{ scope.row.org_list[0].org_name }}...</span
+                >
+              </el-popover>
+            </template>
+          </el-table-column>
+          <el-table-column prop="point_name" label="监测点"> </el-table-column>
+          <el-table-column prop="inducer_name" label="诱剂"> </el-table-column>
+          <el-table-column prop="create_time" label="添加时间" width="200">
+          </el-table-column>
+          <el-table-column prop="is_online" label="状态">
+            <template slot-scope="scope">
+              <div class="state">
+                <p
+                  :style="{
+                    color: scope.row.trap_status == '1' ? '#30A031 ' : 'red',
+                  }"
+                >
+                  ·
+                </p>
+                <p
+                  :style="{
+                    color: scope.row.trap_status == '1' ? '#30A031 ' : 'red',
+                  }"
+                >
+                  {{ scope.row.trap_status == "1" ? "正常" : "停用" }}
+                </p>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="200">
+            <template slot-scope="scope">
+              <span
+                style="color: #409eff; margin-right: 5px"
+                @click="addtrap(scope.row)"
+                >编辑</span
               >
-                {{ scope.row.trap_status == "1" ? "正常" : "停用" }}
-              </p>
-            </div>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="300">
-          <template slot-scope="scope">
-            <span
-              style="color: #409eff; margin-right: 5px"
-              @click="addtrap(scope.row)"
-              >编辑</span
-            >
-            <span
-              style="color: #409eff; margin-right: 5px"
-              @click="deletes(scope.row)"
-              >删除</span
-            >
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <el-pagination
-      background
-      layout="prev, pager, next"
-      :total="total"
-      @current-change="pageChange"
+              <span
+                style="color: #409eff; margin-right: 5px"
+                @click="deletes(scope.row)"
+                >删除</span
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <el-pagination
+        background
+        layout="prev, pager, next"
+        :total="total"
+        @current-change="pageChange"
+      >
+      </el-pagination>
+    </el-card>
+    <el-dialog
+      :title="addtitle"
+      :visible.sync="addtraptf"
+      width="30%"
+      @close="resetForm('ruleForm')"
     >
-    </el-pagination>
-    <el-dialog :title="addtitle" :visible.sync="addtraptf" width="30%" @close="resetForm('ruleForm')">
       <div>
         <el-form
           :model="ruleForm"
@@ -136,15 +170,25 @@
           <el-form-item label="诱捕器编号" prop="trap_number">
             <el-input v-model="ruleForm.trap_number"></el-input>
           </el-form-item>
-
           <div class="addtrapbox">
             <el-form-item label="所在纬度" prop="lng">
               <el-input v-model="ruleForm.lng"></el-input>
+              <p style="height: 24px; padding-left: 16px">
+                {{ ToDegrees(ruleForm.lng, "lng") }}
+              </p>
             </el-form-item>
             <el-form-item label="所在纬度" prop="lat">
               <el-input v-model="ruleForm.lat"></el-input>
+              <p style="height: 24px; padding-left: 16px">
+                {{ ToDegrees(ruleForm.lat, "lat") }}
+              </p>
             </el-form-item>
           </div>
+          <div class="buttonbox">
+            <el-button type="info" size="mini" @click="dingwei"
+              >地图选点</el-button
+            >
+          </div>
           <el-form-item label="隶属海关" prop="org_id">
             <!-- <el-select v-model="ruleForm.org_id" placeholder="请选择隶属海关">
               <el-option
@@ -161,7 +205,6 @@
               :props="defaultParams"
               :clearable="true"
               placeholder="请选择隶属海关"
-              size="mini"
             ></el-cascader>
           </el-form-item>
           <el-form-item label="所在监测点" prop="point_id">
@@ -257,10 +300,54 @@
         >
       </span>
     </el-dialog>
+    <el-dialog
+      class="map_dialog"
+      title="地图选点"
+      :visible.sync="addLocationDialogVisible"
+      width="820px"
+      @closed="addLocationDialogClosed"
+    >
+      <el-form
+        :inline="true"
+        :model="locationForm"
+        class="demo-form-inline"
+        size="mini"
+      >
+        <el-form-item label="经度">
+          <el-input clearable v-model="locationForm.lng"></el-input>
+        </el-form-item>
+        <el-form-item label="纬度">
+          <el-input clearable v-model="locationForm.lat"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" size="mini" @click="locationSearch"
+            >定位</el-button
+          >
+        </el-form-item>
+        <el-form-item label="">
+          <el-input
+            placeholder="请输入地区检索"
+            v-model="addr"
+            clearable
+            @change="addrChange()"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <div class="amap-demo" id="mapContainer2" style="height: 400px"></div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="addLocationDialogVisible = false" size="mini"
+          >取 消</el-button
+        >
+        <el-button type="primary" @click="addLocationSubm" size="mini"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import { isArray } from "highcharts";
 //这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
 
 export default {
@@ -277,7 +364,7 @@ export default {
     };
     var checklnglat = (rule, value, callback) => {
       if (isNaN(value)) {
-        callback(new Error("请输入数字"));
+        callback(new Error("请输入数字"));
       } else {
         callback();
       }
@@ -292,10 +379,14 @@ export default {
       versionsvalue: "",
       versionsvalue1: "", //组织id
       versionsoptions: [], //组织
+      versionsvalue2: "", //组织id 用于搜索
+      versionsoptions2: [], //组织 用于搜索
       defaultParams: {
         label: "org_name",
         value: "id",
         children: "childrens",
+        multiple: true,
+        checkStrictly: true,
       },
       trapvalue: "",
       traponsoptions: [], //监测点
@@ -329,11 +420,11 @@ export default {
         ],
         lng: [
           { required: true, message: "请输入经度", trigger: "blur" },
-          { validator: checklnglat, trigger: "blur" },
+          // { validator: checklnglat, trigger: "blur" },
         ],
         lat: [
           { required: true, message: "请输入纬度", trigger: "blur" },
-          { validator: checklnglat, trigger: "blur" },
+          // { validator: checklnglat, trigger: "blur" },
         ],
         org_id: [
           { required: true, message: "请选择隶属海关", trigger: "change" },
@@ -354,6 +445,16 @@ export default {
       downloadinput: "", //上传的文件名
       deriveVisible: false, //导出弹框
       derivefilename: "", //导出文件名称
+      //地图属性
+      addLocationDialogVisible: false,
+      locationForm: {
+        lng: "",
+        lat: "",
+      },
+      addr: "", //搜索栏地址
+      address: "", //地图上标签地址
+      center: [114.05, 22.55],
+      content: "", //设备列表组织列表
     };
   },
   //监听属性 类似于data概念
@@ -390,7 +491,7 @@ export default {
         this.loading = false;
         console.log(res.data.data);
         this.total = res.data.data.total_item;
-        this.tableData = res.data.data.trap_data;
+        this.tableData = res.data.data.page_list;
         for (var i = 0; i < this.tableData.length; i++) {
           this.tableData[i]["index"] = i + 1;
         }
@@ -408,6 +509,16 @@ export default {
         this.inducer_data = res.data.data.inducer_data;
       });
     },
+    getmon2() {
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=monitor_manage.trap_manage.trap_org",
+      }).then((res) => {
+        console.log(res.data.data);
+        this.versionsoptions2 = res.data.data.org_data; //组织
+        // this.inoffoptions = res.data.data.point_data;
+      });
+    },
     cascaderchange(e) {
       // console.log(this.versionsvalue, e);
       console.log(e[e.length - 1]);
@@ -416,7 +527,7 @@ export default {
     search() {
       this.queryInfo.point_id = this.trapvalue;
       this.queryInfo.trap_number = this.idinput;
-      this.queryInfo.org_id = this.versionsvalue1;
+      this.queryInfo.org_id = this.versionsvalue2;
       this.queryInfo.trap_status = this.inoffvalue;
       // console.log(this.inoffvalue, this.versionsvalue, this.inoffvalue);
       this.getcbdlist();
@@ -428,6 +539,17 @@ export default {
     },
     submitForm(formName) {
       console.log(this.ruleForm);
+      var org_id = [];
+      if (Array.isArray(this.ruleForm.org_id)) {
+        for (var i = 0; i < this.ruleForm.org_id.length; i++) {
+          org_id.push(
+            this.ruleForm.org_id[i][this.ruleForm.org_id[i].length - 1]
+          );
+        }
+      } else {
+        org_id = this.ruleForm.org_id;
+      }
+      org_id = org_id.join("/");
       this.$refs[formName].validate((valid) => {
         if (valid) {
           this.$axios({
@@ -436,9 +558,9 @@ export default {
             data: this.qs.stringify({
               trap_id: this.ruleForm.trap_id, //                  非必传(num)                诱捕器id 修改项
               trap_number: this.ruleForm.trap_number, //               必传(string)               设备编号
-              lat: this.ruleForm.lat, //                       必传(string)               纬度
-              lng: this.ruleForm.lng, //                       必传(string)               经度
-              org_id: this.ruleForm.org_id[this.ruleForm.org_id.length - 1], //                    必传(string)               所属海关id
+              lat: this.ToDigital(this.ruleForm.lat), //                       必传(string)               纬度
+              lng: this.ToDigital(this.ruleForm.lng), //                       必传(string)               经度
+              org_id: org_id, //                    必传(string)               所属海关id
               inducer_id: this.ruleForm.inducer_id, //                必传(string)               诱剂id
               point_id: this.ruleForm.point_id, //                  必传(string)               所属监测点id
               trap_status: this.ruleForm.trap_status, //               必传(string)               设备状态0停用 1正常
@@ -481,6 +603,9 @@ export default {
     resetForm(formName) {
       this.addtraptf = false;
       this.$refs[formName].resetFields();
+      for (var key in this.ruleForm) {
+        this.ruleForm[key] = "";
+      }
     },
     addtrap(e) {
       //增加诱捕器
@@ -489,6 +614,30 @@ export default {
       for (var key in this.ruleForm) {
         this.ruleForm[key] = e[key];
       }
+      this.ruleForm.org_id = [];
+      for (var i = 0; i < e.org_list.length; i++) {
+        var arr = [e.org_list[i].org_id];
+        this.ruleForm.org_id.push(arr);
+      }
+      if (e.superior_org_list.length != 0) {
+        var data = e.superior_org_list;
+        for (var i = 0; i < data.length; i++) {
+          // console.log(data[i])
+          if (data[i].superior_org.length > 1) {
+            var data2 = data[i].superior_org;
+            // console.log(data2)
+            for (var j = 0; j < data2.length; j++) {
+              // console.log(data2[j])
+              this.ruleForm.org_id[i].unshift(data2[j].org_id);
+            }
+          } else {
+            if (data[i].superior_org.length != 0) {
+              this.ruleForm.org_id[i].unshift(data[i].superior_org[0].org_id);
+            }
+          }
+        }
+      }
+      console.log(this.ruleForm.org_id);
       this.ruleForm.trap_status = this.ruleForm.trap_status.toString();
       this.parameter = "modify";
       this.addtraptf = true;
@@ -590,9 +739,189 @@ export default {
       this.queryInfo.point_id = "";
       this.queryInfo.org_id = "";
       this.queryInfo.trap_status = "";
-      this.versionsvalue = []
+      this.versionsvalue2 = "";
+      this.versionsvalue = [];
       this.getcbdlist();
     },
+    init() {
+      console.log(document.getElementById("mapContainer2"));
+      var map = new AMap.Map("mapContainer2", {
+        center: this.center,
+        resizeEnable: true,
+        zoom: 10,
+        lang: "en",
+      });
+      AMap.plugin(["AMap.ToolBar", "AMap.Geocoder"], () => {
+        map.addControl(new AMap.ToolBar());
+        this.geocoder = new AMap.Geocoder({
+          city: "全国",
+          radius: 1000,
+        });
+      });
+      setTimeout(() => {
+        var marker = new AMap.Marker({
+          position: this.center,
+        });
+        console.log(this.center);
+        marker.setMap(map);
+      }, 1000);
+      this.map = map;
+      this.testevent();
+    },
+    addrChange() {
+      //位置搜索
+      var marker = new AMap.Marker();
+      this.geocoder.getLocation(this.addr, (status, result) => {
+        if (status === "complete" && result.geocodes.length) {
+          var lnglat = result.geocodes[0].location;
+          marker.setPosition(lnglat);
+          this.map.add(marker);
+          this.map.setFitView(marker);
+          this.locationForm = {
+            lat: lnglat.lat,
+            lng: lnglat.lng,
+          };
+        } else {
+          this.$message.error("根据地址查询位置失败");
+        }
+      });
+    },
+    // 地图点击事件
+    testevent() {
+      this.map.on("click", (ev) => {
+        var lnglat = [ev.lnglat.lng, ev.lnglat.lat];
+        this.locationForm = { lng: lnglat[0], lat: lnglat[1] };
+        this.map.clearMap();
+        var marker = new AMap.Marker({
+          position: lnglat,
+        });
+        marker.setMap(this.map);
+        this.getAddress(lnglat);
+        setTimeout(() => {
+          new AMap.InfoWindow({
+            content: "<h5>" + "当前选中地址" + "</h5>" + this.address,
+            offset: new AMap.Pixel(0, -32),
+          }).open(this.map, lnglat);
+        }, 100);
+      });
+    },
+    getAddress(lnglat) {
+      AMap.plugin("AMap.Geocoder", () => {
+        this.geocoder.getAddress(lnglat, (status, result) => {
+          if (status === "complete" && result.info === "OK") {
+            this.address = result.regeocode.formattedAddress;
+          }
+        });
+      });
+    },
+    addLocationSubm() {
+      //点击确定
+      this.ruleForm.lng = this.locationForm.lng;
+      this.ruleForm.lat = this.locationForm.lat;
+      this.addLocationDialogVisible = false;
+    },
+    addLocationDialogClosed() {
+      //弹框关闭时
+      this.locationForm = { lat: "", lng: "" };
+      this.center = [];
+      this.map = null;
+    },
+    locationSearch() {
+      if (this.locationForm.lat && this.locationForm.lng) {
+        let lnglat = [this.locationForm.lng, this.locationForm.lat];
+        var marker = new AMap.Marker({
+          position: lnglat,
+        });
+        marker.setMap(this.map);
+      } else {
+        this.$message.warning("请输入经纬度!");
+        // return fasle;
+      }
+    },
+    dingwei() {
+      if (this.ruleForm.lng != "" && this.ruleForm.lng != 0) {
+        this.center[0] = this.ruleForm.lng;
+      }
+      if (this.ruleForm.lat != "" && this.ruleForm.lat != 0) {
+        this.center[1] = this.ruleForm.lat;
+      }
+      this.addLocationDialogVisible = true;
+      setTimeout(() => {
+        this.init();
+      }, 500);
+    },
+    //度转度°分′秒″
+    ToDegrees(val, type) {
+      if (typeof val == "undefined" || val == "" || isNaN(val)) {
+        return val;
+      }
+      val = val.toString();
+      var A = "";
+      if (type == "lng") {
+        A = val > 0 ? "E" : "W";
+      } else if (type == "lat") {
+        A = val > 0 ? "N" : "S";
+      }
+      var i = val.indexOf(".");
+      var strDu = i < 0 ? val : val.substring(0, i); //获取度
+      var strFen = 0;
+      var strMiao = 0;
+      if (i > 0) {
+        var strFen = "0" + val.substring(i);
+        strFen = strFen * 60 + "";
+        i = strFen.indexOf(".");
+        if (i > 0) {
+          strMiao = "0" + strFen.substring(i);
+          strFen = strFen.substring(0, i); //获取分
+          strMiao = strMiao * 60 + "";
+          i = strMiao.indexOf(".");
+          strMiao = strMiao.substring(0, i + 4); //取到小数点后面三位
+          strMiao = parseFloat(strMiao).toFixed(2); //精确小数点后面两位
+        }
+      }
+      // console.log(strDu, strFen, strMiao);
+      return strDu + "°" + strFen + "′" + strMiao + "″" + A;
+    },
+    //度°分′秒″转度
+    ToDigital(lnglat) {
+      if (!isNaN(lnglat)) {
+        return lnglat;
+      }
+      console.log(lnglat);
+      lnglat = lnglat.toString();
+      var strDu, strFen, strMiao;
+      var duindex = lnglat.indexOf("°"); //字符度的下标
+      var fenindex = lnglat.indexOf("′"); //字符分的下标
+      var miaoindex = lnglat.indexOf("″"); //字符秒的下标
+      strDu = lnglat.slice(0, duindex);
+      strFen = lnglat.slice(duindex + 1, fenindex);
+      strMiao = lnglat.slice(fenindex + 1, miaoindex);
+      // len = len > 6 || typeof len == "undefined" ? 6 : len; //精确到小数点后最多六位
+      strDu =
+        typeof strDu == "undefined" || strDu == "" ? 0 : parseFloat(strDu);
+      strFen =
+        typeof strFen == "undefined" || strFen == ""
+          ? 0
+          : parseFloat(strFen) / 60;
+      strMiao =
+        typeof strMiao == "undefined" || strMiao == ""
+          ? 0
+          : parseFloat(strMiao) / 3600;
+      var digital = strDu + strFen + strMiao;
+      if (digital == 0) {
+        return "";
+      } else {
+        return digital.toFixed(6);
+      }
+    },
+    orglisthover(e) {
+      console.log(e);
+      var str = ``;
+      for (var i = 0; i < e.org_list.length; i++) {
+        str += `<p>` + e.org_list[i].org_name + `</p>`;
+      }
+      this.content = str;
+    },
   },
   beforeCreate() {}, //生命周期 - 创建之前
   //生命周期 - 创建完成(可以访问当前this实例)
@@ -601,6 +930,7 @@ export default {
   //生命周期 - 挂载完成(可以访问DOM元素)
   mounted() {
     this.getmon();
+    this.getmon2();
     this.getcbdlist();
   },
   beforeUpdate() {}, //生命周期 - 更新之前
@@ -645,6 +975,10 @@ export default {
 .addtrapbox {
   display: flex;
 }
+.buttonbox {
+  margin-bottom: 23px;
+  padding-left: 100px;
+}
 .downloadbox {
   .downloadbox_item {
     display: flex;

+ 51 - 14
minggao/src/page/home/index.vue

@@ -20,14 +20,14 @@
           active-text-color="#409EFF"
           :unique-opened="true"
         >
-          <el-menu-item
+          <!-- <el-menu-item
             index="/index/home"
             class="firstmenu"
             @click="skip('/index/home')"
           >
             <i class="el-icon-collection-tag"></i>
             <span slot="title">首页</span>
-          </el-menu-item>
+          </el-menu-item> -->
           <el-submenu
             v-for="item in infodata"
             :key="item.pur_id"
@@ -91,9 +91,15 @@
       </div>
       <div class="contentbox_crumbs">
         <el-breadcrumb separator="/">
-          <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
-          <el-breadcrumb-item>活动列表</el-breadcrumb-item>
-          <el-breadcrumb-item>活动详情</el-breadcrumb-item>
+          <el-breadcrumb-item
+            v-for="(item, index) in routerinfo"
+            :key="item.pur_id"
+            ><a
+              v-if="index == routerinfo.length - 2 && item.menu!=''"
+              :href="'/#/index/'+item.menu"
+              >{{ item.purview_name }}</a
+            ><a v-else>{{ item.purview_name }}</a></el-breadcrumb-item
+          >
         </el-breadcrumb>
       </div>
       <div class="contentbox_box">
@@ -117,6 +123,7 @@ export default {
       routerdata: [],
       menuActiveId: "1",
       // menuOpeneds:["18"]
+      routerinfo: [],
     };
   },
   //监听属性 类似于data概念
@@ -125,6 +132,7 @@ export default {
   watch: {
     "$route.path": function (newVal) {
       console.log(newVal);
+      this.routemap(this.routerdata);
       // this.menuActiveId = this.$route.path;
     },
   },
@@ -144,7 +152,7 @@ export default {
         this.routerdata = JSON.parse(JSON.stringify(res.data.data.children));
         this.infodata = res.data.data.children;
         console.log(this.routerdata);
-        this.infodata.shift();
+        // this.infodata.shift();
         this.username = res.data.data.username;
         localStorage.setItem("usernme", this.username);
         this.routemap(this.routerdata);
@@ -173,27 +181,56 @@ export default {
       var newrouter = this.$route.path;
       var tf = routerdata.filter((item) => {
         if (item.menu != "") {
-          if (newrouter.indexOf(item.menu)!=-1) {
+          if (newrouter.indexOf(item.menu) != -1) {
             //第一层菜单是否包含当前路由
-            // console.log(item.menu);
-            return [item.menu,item.pur_id]
+            // console.log(item);
+            return [item.menu, item.pur_id];
           } else {
             if (item.children) {
-              // console.log(item.children);
               this.routemap(item.children);
             }
           }
         } else {
           if (item.children) {
-            // console.log(item.children);
             this.routemap(item.children);
           }
         }
       });
-      if(tf.length!=0){
-        this.menuActiveId = tf[0].pur_id.toString()
+      // console.log(tf)
+      if (tf.length != 0) {
+        this.menuActiveId = tf[0].pur_id.toString();
+        this.routerinfo = [];
+        this.routerinfo.unshift(tf[0]);
+        var newpath = this.routerdata.filter((item) => {
+          // console.log(item)
+          if (item.pur_id == tf[0].parent_perm_id) {
+            return item.pur_id == tf[0].parent_perm_id;
+          } else {
+            var newpath2 = item.children.filter((items) => {
+              if (items.pur_id == tf[0].parent_perm_id) {
+                return items.pur_id == tf[0].parent_perm_id;
+              } else {
+                if (items.children) {
+                  var newpath3 = items.children.filter((itemsa) => {
+                    return itemsa.pur_id == tf[0].parent_perm_id;
+                  });
+                  if (newpath3.length != 0) {
+                    this.routerinfo.unshift(newpath3[0]);
+                    return newpath3;
+                  }
+                }
+              }
+              // return items.pur_id == tf[0].parent_perm_id;
+            });
+            if (newpath2.length != 0) {
+              this.routerinfo.unshift(newpath2[0]);
+              return newpath2;
+            }
+          }
+        });
+        this.routerinfo.unshift(newpath[0]);
+        console.log(this.routerinfo);
       }
-      // console
     },
   },
   beforeCreate() {}, //生命周期 - 创建之前

+ 698 - 0
minggao/src/page/homepage/facilitydistribute.vue

@@ -0,0 +1,698 @@
+<!--  -->
+<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"
+      ></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 }}</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>
+          </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"
+            >
+              <!-- <h3>{{ item }}</h3> -->
+              <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>
+
+        <!-- v-loading="pieloading"
+          element-loading-text="拼命加载中"
+          element-loading-spinner="el-icon-loading"
+          element-loading-background="rgba(0, 0, 0, 0.8)" -->
+      </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;
+          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",
+      }).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);
+          });
+        }
+      });
+    },
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  //生命周期 - 创建完成(可以访问当前this实例)
+  created() {},
+  beforeMount() {}, //生命周期 - 挂载之前
+  //生命周期 - 挂载完成(可以访问DOM元素)
+  mounted() {
+    // this.getmon();
+    this.getmon2();
+    this.gettype();
+  },
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  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>

+ 567 - 0
minggao/src/page/homepage/home.vue

@@ -0,0 +1,567 @@
+<!--  -->
+<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>

Rozdílová data souboru nebyla zobrazena, protože soubor je příliš velký
+ 14300 - 0
minggao/src/page/homepage/json/huizhou.json


Rozdílová data souboru nebyla zobrazena, protože soubor je příliš velký
+ 4177 - 0
minggao/src/page/homepage/json/shanwei.json


Rozdílová data souboru nebyla zobrazena, protože soubor je příliš velký
+ 11984 - 0
minggao/src/page/homepage/json/shenzhen.json


+ 719 - 0
minggao/src/page/homepage/pestdistribute.vue

@@ -0,0 +1,719 @@
+<!--  -->
+<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"
+      >
+      </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"
+      ></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="450px">
+      <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 } 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) {
+      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: ["50%", "110%"], //地图位置
+            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,
+            },
+          },
+        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: [],
+          },
+          {
+            name: "害虫",
+            type: "scatter",
+            coordinateSystem: "geo",
+            // geoIndex: 2,
+            data: trap_data_arr,
+            label: {
+              normal: {
+                formatter: "{b}",
+                position: "right",
+                show: true,
+              },
+              emphasis: {
+                show: true,
+              },
+            },
+            itemStyle: {
+              normal: {
+                color: "#05C3F9",
+              },
+            },
+          },
+        ],
+      });
+      this.pestboxloading = false;
+    },
+    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}:}{b|{c}}",
+              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;
+        }
+        this.init(trap_data_arr);
+        var pest_count = res.data.data.pest_count;
+        var arr = [];
+        this.wornoptions = [];
+        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);
+          var obj2 = {
+            point_id: pest_count[i].pest_name,
+            point_name: pest_count[i].pest_name,
+          };
+          this.wornoptions.push(obj2);
+        }
+        this.initpie(arr);
+      });
+    },
+    tabtime(times) {
+      //时间转换
+      var years = times.getFullYear();
+      var month = times.getMonth() + 1;
+      var date = times.getDate();
+      return years + "-" + month + "-" + date;
+    },
+    oickchange(e) {
+      this.start_time = this.tabtime(e[0]);
+      this.end_time = this.tabtime(e[1]);
+    },
+    search() {
+      this.getwornlist();
+    },
+    reset() {
+      this.wornvalue = "";
+      this.inoffvalue = "";
+      this.versionsvalue2 = "";
+      this.timevalue = "";
+    },
+    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;
+              this.$message({
+                showClose: true,
+                message: "设置成功",
+                type: "success",
+              });
+            } else {
+              this.$message({
+                showClose: true,
+                message: "设置失败",
+                type: "success",
+              });
+            }
+          });
+        } else {
+          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() {
+    setTimeout(() => {
+      this.init();
+    }, 500);
+    this.getwornlist();
+    // 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%;
+  }
+}
+</style>

+ 2 - 1
minggao/src/page/login/login.vue

@@ -62,7 +62,8 @@ export default {
         }).then((res) => {
           console.log(res);
           if(res.data.data){
-              this.$router.push("/Index")
+            localStorage.setItem('session', res.data.data.session_key)
+              this.$router.push("/Index/facilitydistribute")
           }
         });
       }

+ 507 - 20
minggao/src/page/monitor/Monitor.vue

@@ -38,7 +38,7 @@
         </div>
       </div>
       <div class="nav-box">
-        <div style="width: 240px; height: 30px; margin: 5px 0 5px 0">
+        <div class="inputbox">
           <!-- <div> -->
           <el-autocomplete
             size="mini"
@@ -62,23 +62,33 @@
             :class="{ active: activeIndex == index }"
             @click="selectEquip(item.device_id, item.jktype, index)"
           >
-            <span
-              :class="['dot', item.status == 1 ? 'onLine' : 'outLine']"
-            ></span>
+            <p class="dot">
+              <span
+                :class="item.status == 1 ? 'onLine' : 'outLine'"
+              ></span>
+            </p>
             <!-- <span :title="item.device_id + (item.device_name !== '' ? item.device_name : '暂无设备名称')">{{ item | formatName }}</span> -->
-            <span
+            <!-- <span
               :title="
                 (item.device_name !== '' ? item.device_name + '/' : '') +
                 item.device_id
               "
               >{{ item | formatName }}</span
+            > -->
+            <div class="nameandid">
+              <p>{{ item.device_name== ''?"暂无":item.device_name }}</p>
+              <p>{{ item.device_id }}</p>
+            </div>
+            <span
+              @click.stop="monset(item)"
+              class="viewPhoto"
+              >设置</span
             >
             <span
               @click.stop="viewPhoto(item.device_id)"
               class="viewPhoto"
               v-if="item.photo_num !== '0'"
               >查看图片</span
-                
             >
           </li>
         </ul>
@@ -633,6 +643,118 @@
         </div>
       </div>
     </el-dialog>
+    <el-dialog
+      title="测报灯设置"
+      :visible.sync="operationDialogVisible"
+      width="30%"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+    >
+      <div>
+        <el-form
+          :model="ruleForm"
+          :rules="rules"
+          ref="ruleForm"
+          label-width="100px"
+          class="demo-ruleForm"
+        >
+          <el-form-item label="设备名称" prop="device_name">
+            <el-input v-model="ruleForm.device_name"></el-input>
+          </el-form-item>
+          <el-form-item label="隶属海关" prop="org_id">
+            <el-cascader
+              :change-on-select="true"
+              v-model="ruleForm.org_id"
+              :options="versionsoptions"
+              :props="defaultParams"
+              :clearable="true"
+              placeholder="请选择隶属海关"
+            ></el-cascader>
+          </el-form-item>
+          <el-form-item label="所在监测点" prop="point_id">
+            <el-select
+              v-model="ruleForm.point_id"
+              placeholder="请选择所在监测点"
+            >
+              <el-option
+                v-for="item in traponsoptions"
+                :label="item.point_name"
+                :value="item.point_id"
+                :key="item.point_id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <div class="addtrapbox" style="display: flex">
+            <el-form-item label="所在纬度" prop="lng">
+              <el-input v-model="ruleForm.lng"></el-input>
+              <p style="height: 24px; padding-left: 16px">
+                {{ ToDegrees(ruleForm.lng, "lng") }}
+              </p>
+            </el-form-item>
+            <el-form-item label="所在纬度" prop="lat">
+              <el-input v-model="ruleForm.lat"></el-input>
+              <p style="height: 24px; padding-left: 16px">
+                {{ ToDegrees(ruleForm.lat, "lat") }}
+              </p>
+            </el-form-item>
+          </div>
+          <div class="buttonbox">
+            <el-button type="info" size="mini" @click="dingwei"
+              >地图选点</el-button
+            >
+          </div>
+        </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>
+    <el-dialog
+      class="map_dialog"
+      title="地图选点"
+      :visible.sync="addLocationDialogVisible"
+      width="820px"
+      @closed="addLocationDialogClosed"
+    >
+      <el-form
+        :inline="true"
+        :model="locationForm"
+        class="demo-form-inline"
+        size="mini"
+      >
+        <el-form-item label="经度">
+          <el-input clearable v-model="locationForm.lng"></el-input>
+        </el-form-item>
+        <el-form-item label="纬度">
+          <el-input clearable v-model="locationForm.lat"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" size="mini" @click="locationSearch"
+            >定位</el-button
+          >
+        </el-form-item>
+        <el-form-item label="">
+          <el-input
+            placeholder="请输入地区检索"
+            v-model="addr"
+            clearable
+            @change="addrChange()"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <div class="amap-demo" id="mapContainer2" style="height: 400px"></div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="addLocationDialogVisible = false" size="mini"
+          >取 消</el-button
+        >
+        <el-button type="primary" @click="addLocationSubm" size="mini"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -857,7 +979,50 @@ export default {
       bangDsimoptions: [], //绑定sim设备id集合
       bangDsimId: null, //当前设备ID
       VideoList: [], // 视频直播列表
-      loading:false
+      loading: false,
+      //监控设置属性
+      operationDialogVisible:false,
+      versionsoptions: [], //组织
+      traponsoptions: [], //监测点
+      defaultParams: {
+        label: "org_name",
+        value: "id",
+        children: "childrens",
+        multiple: true,
+        checkStrictly: true,
+      },
+      ruleForm: {
+        // org_name:"",
+        device_name: "",
+        org_id: [],
+        point_id: "",
+        lng: "",
+        lat: "",
+        device_name:"",
+        device_id:"",
+      },
+      rules: {
+        device_name: [
+          { required: true, message: "请输入设备名称", trigger: "blur" },
+        ],
+        lng: [{ required: true, message: "请输入经度", trigger: "blur" }],
+        lat: [{ required: true, message: "请输入纬度", trigger: "blur" }],
+        org_id: [
+          { required: true, message: "请选择隶属海关", trigger: "change" },
+        ],
+        point_id: [
+          { required: true, message: "请选择所在监测点", trigger: "change" },
+        ],
+      },
+      //地图属性
+      addLocationDialogVisible: false,
+      locationForm: {
+        lng: "",
+        lat: "",
+      },
+      addr: "", //搜索栏地址
+      address: "", //地图上标签地址
+      center: [114.05, 22.55],
     };
   },
   filters: {
@@ -890,9 +1055,11 @@ export default {
       //   (value.device_name !== ""
       //     ? value.device_name
       //     : "暂无设备名称") + "/" + value.device_id;
-      var item = (value.device_name !== '' ? value.device_name + '/' : '') + value.device_id
+      var item =
+        (value.device_name !== "" ? value.device_name + "/" : "") +
+        value.device_id;
       // console.log(item)
-      console.log(value.device_name + '/' + value.device_id)
+      console.log(value.device_name + "/" + value.device_id);
       if (item.length > 5) {
         var name = item.slice(0, 5) + "...";
       }
@@ -900,8 +1067,9 @@ export default {
     },
   },
   mounted() {
+    this.getmon()
     if (this.$route.query.id !== undefined) {
-      this.idName = this.$route.query.id
+      this.idName = this.$route.query.id;
     }
     this.getJkList();
     // this.restaurants = this.loadAll(); // 搜索数据
@@ -909,13 +1077,46 @@ export default {
   destroyed() {
     // this.player.dispose()
     for (var i = 0; i < this.VideoList.length; i++) {
-      this.VideoList[i].stop()
+      this.VideoList[i].stop();
     }
   },
   methods: {
     viewPhoto(id) {
       this.$router.push("/index/photoView/" + id);
     },
+    monset(e){
+      console.log(e)
+      this.operationDialogVisible = true
+      // this.ruleForm.device_id = item.device_id
+      // this.ruleForm.device_name = item.device_name
+      for (var key in this.ruleForm) {
+        this.ruleForm[key] = e[key];
+      }
+      this.ruleForm.org_id = [];
+      for (var i = 0; i < e.temp_org_list.length; i++) {
+        var arr = [e.temp_org_list[i].org_id];
+        this.ruleForm.org_id.push(arr);
+      }
+      if (e.superior_org_list.length != 0) {
+        var data = e.superior_org_list;
+        for (var i = 0; i < data.length; i++) {
+          // console.log(data[i])
+          if (data[i].superior_org.length > 1) {
+            var data2 = data[i].superior_org;
+            // console.log(data2)
+            for (var j = 0; j < data2.length; j++) {
+              // console.log(data2[j])
+              this.ruleForm.org_id[i].unshift(data2[j].org_id);
+            }
+          } else {
+            if (data[i].superior_org.length != 0) {
+              this.ruleForm.org_id[i].unshift(data[i].superior_org[0].org_id);
+            }
+          }
+        }
+      }
+      console.log(this.ruleForm)
+    },
     //获取视频列表
     getJkList() {
       this.$axios({
@@ -944,7 +1145,7 @@ export default {
         console.log(this.Idlist);
         for (var i = 0; i < this.Idlist.length; i++) {
           var obj = {
-            value: i,             
+            value: i,
             label: this.Idlist[i].device_id,
           };
           this.equipmentOptions.push(obj);
@@ -1059,21 +1260,21 @@ export default {
             setTimeout(() => {
               this.myVideo["xPlayer"] = new EZUIKit.EZUIPlayer(player);
               this.myVideo["xPlayer"].play();
-            }, 1000); 
+            }, 1000);
           } else if (this.playType == 0) {
             let playHtml = `<video id="myPlayer${this.selected}"  muted autoplay  poster='' controls playsInline  webkit-playsinline src="${hlsHdSrc}"  style="width:100%; height:100%;"></video>`;
             document.getElementById("my-video" + this.selected).innerHTML =
               playHtml;
             //非插件
             this.$nextTick(() => {
-              console.log(data.hlsHd,'data.hlsHddata.hlsHd')
+              console.log(data.hlsHd, "data.hlsHddata.hlsHd");
               this.myVideo[`myPlayer${this.selected}`] = new EZUIKit.EZUIPlayer(
                 `myPlayer${this.selected}`
               );
               setTimeout(() => {
                 this.myVideo[`myPlayer${this.selected}`].play();
               }, 150);
-              this.VideoList.push(this.myVideo[`myPlayer${this.selected}`])
+              this.VideoList.push(this.myVideo[`myPlayer${this.selected}`]);
               // this.player = videojs('my-video' + this.selected)
               // this.player.reset()
               // this.player.src({
@@ -1686,6 +1887,256 @@ export default {
         });
       }
     },
+    submitForm(formName) {
+      console.log(this.ruleForm.org_id);
+      var org_id = [];
+      if (Array.isArray(this.ruleForm.org_id)) {
+        for (var i = 0; i < this.ruleForm.org_id.length; i++) {
+          org_id.push(
+            this.ruleForm.org_id[i][this.ruleForm.org_id[i].length - 1]
+          );
+        }
+      } else {
+        org_id = this.ruleForm.org_id;
+      }
+      org_id = org_id.join("/");
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.$axios({
+            method: "POST",
+            url: "/api/api_gateway?method=monitor_manage.cbd_manage.add_device_info",
+            data: this.qs.stringify({
+              org_id: org_id, //                  非必传(num)                诱捕器id 修改项
+              point_id: this.ruleForm.point_id, //               必传(string)               设备编号
+              lat: this.ToDigital(this.ruleForm.lat), //                       必传(string)               纬度
+              lng: this.ToDigital(this.ruleForm.lng), //  
+              device_id:this.ruleForm.device_id,
+              device_name:this.ruleForm.device_name,
+            }),
+          }).then((res) => {
+            console.log(res);
+            if (res.data.data) {
+              // var message = "";
+              // if (this.parameter == "add") {
+              //   // console.log(this.$data.addtitle)
+              //   message = "添加成功!";
+              // } else if (this.parameter == "modify") {
+              //   message = "修改成功!";
+              // }
+              this.$message({
+                showClose: true,
+                message: "设置成功",
+                type: "success",
+              });
+              this.operationDialogVisible = false;
+              this.getJkList();
+            } else {
+              this.$message({
+                showClose: true,
+                message: "添加失败" + res.data.message,
+                type: "warning",
+              });
+            }
+          });
+        } else {
+          this.$message({
+            message: "请将信息填写完全",
+            type: "warning",
+          });
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.operationDialogVisible = false;
+      this.$refs[formName].resetFields();
+      for (var key in this.ruleForm) {
+        this.ruleForm[key] = "";
+      }
+    },
+    getmon() {
+      //获取监测点列表 组织列表
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=sysmenage.usermanager.org_list",
+      }).then((res) => {
+        console.log(res.data.data);
+        this.versionsoptions = res.data.data.page_list; //组织
+        this.traponsoptions = res.data.data.point_data;
+        this.inducer_data = res.data.data.inducer_data;
+      });
+    },
+    init() {
+      console.log(document.getElementById("mapContainer2"));
+      var map = new AMap.Map("mapContainer2", {
+        center: this.center,
+        resizeEnable: true,
+        zoom: 10,
+        lang: "en",
+      });
+      AMap.plugin(["AMap.ToolBar", "AMap.Geocoder"], () => {
+        map.addControl(new AMap.ToolBar());
+        this.geocoder = new AMap.Geocoder({
+          city: "全国",
+          radius: 1000,
+        });
+      });
+      setTimeout(() => {
+        var marker = new AMap.Marker({
+          position: this.center,
+        });
+        console.log(this.center);
+        marker.setMap(map);
+      }, 1000);
+      this.map = map;
+      this.testevent();
+    },
+    addrChange() {
+      //位置搜索
+      var marker = new AMap.Marker();
+      this.geocoder.getLocation(this.addr, (status, result) => {
+        if (status === "complete" && result.geocodes.length) {
+          var lnglat = result.geocodes[0].location;
+          marker.setPosition(lnglat);
+          this.map.add(marker);
+          this.map.setFitView(marker);
+          this.locationForm = {
+            lat: lnglat.lat,
+            lng: lnglat.lng,
+          };
+        } else {
+          this.$message.error("根据地址查询位置失败");
+        }
+      });
+    },
+    // 地图点击事件
+    testevent() {
+      this.map.on("click", (ev) => {
+        var lnglat = [ev.lnglat.lng, ev.lnglat.lat];
+        this.locationForm = { lng: lnglat[0], lat: lnglat[1] };
+        this.map.clearMap();
+        var marker = new AMap.Marker({
+          position: lnglat,
+        });
+        marker.setMap(this.map);
+        this.getAddress(lnglat);
+        setTimeout(() => {
+          new AMap.InfoWindow({
+            content: "<h5>" + "当前选中地址" + "</h5>" + this.address,
+            offset: new AMap.Pixel(0, -32),
+          }).open(this.map, lnglat);
+        }, 100);
+      });
+    },
+    getAddress(lnglat) {
+      AMap.plugin("AMap.Geocoder", () => {
+        this.geocoder.getAddress(lnglat, (status, result) => {
+          if (status === "complete" && result.info === "OK") {
+            this.address = result.regeocode.formattedAddress;
+          }
+        });
+      });
+    },
+    addLocationSubm() {
+      //点击确定
+      this.ruleForm.lng = this.locationForm.lng;
+      this.ruleForm.lat = this.locationForm.lat;
+      this.addLocationDialogVisible = false;
+    },
+    addLocationDialogClosed() {
+      //弹框关闭时
+      this.locationForm = { lat: "", lng: "" };
+      this.center = [];
+      this.map = null;
+    },
+    locationSearch() {
+      if (this.locationForm.lat && this.locationForm.lng) {
+        let lnglat = [this.locationForm.lng, this.locationForm.lat];
+        var marker = new AMap.Marker({
+          position: lnglat,
+        });
+        marker.setMap(this.map);
+      } else {
+        this.$message.warning("请输入经纬度!");
+        // return fasle;
+      }
+    },
+    dingwei() {
+      if (this.ruleForm.lng != "" && this.ruleForm.lng != 0) {
+        this.center[0] = this.ruleForm.lng;
+      }
+      if (this.ruleForm.lat != "" && this.ruleForm.lat != 0) {
+        this.center[1] = this.ruleForm.lat;
+      }
+      this.addLocationDialogVisible = true;
+      setTimeout(() => {
+        this.init();
+      }, 500);
+    },
+    //度转度°分′秒″
+    ToDegrees(val, type) {
+      if (typeof val == "undefined" || val == "" || isNaN(val)) {
+        return val;
+      }
+      val = val.toString()
+      var A = "";
+      if (type == "lng") {
+        A = val > 0 ? "E" : "W";
+      } else if (type == "lat") {
+        A = val > 0 ? "N" : "S";
+      }
+      var i = val.indexOf(".");
+      var strDu = i < 0 ? val : val.substring(0, i); //获取度
+      var strFen = 0;
+      var strMiao = 0;
+      if (i > 0) {
+        var strFen = "0" + val.substring(i);
+        strFen = strFen * 60 + "";
+        i = strFen.indexOf(".");
+        if (i > 0) {
+          strMiao = "0" + strFen.substring(i);
+          strFen = strFen.substring(0, i); //获取分
+          strMiao = strMiao * 60 + "";
+          i = strMiao.indexOf(".");
+          strMiao = strMiao.substring(0, i + 4); //取到小数点后面三位
+          strMiao = parseFloat(strMiao).toFixed(2); //精确小数点后面两位
+        }
+      }
+      console.log(strDu, strFen, strMiao);
+      return strDu + "°" + strFen + "′" + strMiao + "″" + A;
+    },
+    //度°分′秒″转度
+    ToDigital(lnglat) {
+      if (!isNaN(lnglat)) {
+        return lnglat;
+      }
+      console.log(lnglat)
+      lnglat = lnglat.toString()
+      var strDu,strFen,strMiao;
+      var duindex = lnglat.indexOf("°")//字符度的下标
+      var fenindex = lnglat.indexOf("′")//字符分的下标
+      var miaoindex = lnglat.indexOf("″")//字符秒的下标
+      strDu = lnglat.slice(0,duindex)
+      strFen = lnglat.slice(duindex+1,fenindex)
+      strMiao = lnglat.slice(fenindex+1,miaoindex)
+      // len = len > 6 || typeof len == "undefined" ? 6 : len; //精确到小数点后最多六位
+      strDu =
+        typeof strDu == "undefined" || strDu == "" ? 0 : parseFloat(strDu);
+      strFen =
+        typeof strFen == "undefined" || strFen == ""
+          ? 0
+          : parseFloat(strFen) / 60;
+      strMiao =
+        typeof strMiao == "undefined" || strMiao == ""
+          ? 0
+          : parseFloat(strMiao) / 3600;
+      var digital = strDu + strFen + strMiao;
+      if (digital == 0) {
+        return "";
+      } else {
+        return digital.toFixed(6);
+      }
+    },
   },
   watch: {
     // 添加设备弹框
@@ -1786,10 +2237,21 @@ export default {
       }
     }
     .nav-box {
-      width: 240px;
+      width: 350px;
       background: #474e60;
       color: #fff;
       font-size: 14px;
+      padding: 0 10px;
+      box-sizing: border-box;
+      .inputbox {
+        width: 350px;
+        height: 30px;
+        margin: 5px 0 5px 0;
+
+        /deep/.el-input {
+          width: 330px;
+        }
+      }
       .viewLists {
         height: 50%;
         overflow: auto;
@@ -1798,28 +2260,45 @@ export default {
           padding-right: 25px;
           line-height: 40px;
           cursor: pointer;
+          display: flex;
+          margin-top: 10px;
+          .nameandid {
+            width: 165px;
+            p {
+              height: 20px;
+              line-height: 20px;
+            }
+          }
           .viewPhoto {
             color: #eba219;
             float: right;
             font-size: 12px;
             cursor: pointer;
-            margin: 12px 0 0 0;
+            // margin: 12px 5px 0 0;
+            margin-right: 5px;
           }
           .viewPhoto:hover {
             text-decoration: underline;
           }
           .dot {
-            display: inline-block;
             width: 7px;
-            height: 7px;
-            border-radius: 100%;
+            height: 40px;
             margin-right: 15px;
+            line-height: 40px;
           }
           .onLine {
+            display: inline-block;
+            width: 7px;
+            height: 7px;
             background: #15bb88;
+            border-radius: 100%;
           }
           .outLine {
+            display: inline-block;
+            width: 7px;
+            height: 7px;
             background: #c1c1c1;
+            border-radius: 100%;
           }
         }
         li.active {
@@ -1996,4 +2475,12 @@ export default {
   background: #c1bfbf;
   color: #fff;
 }
+.buttonbox {
+  margin-bottom: 23px;
+  padding-left: 100px;
+  /deep/.el-button{
+    background-color: #409eff;
+    border-color: #409eff;
+  }
+}
 </style>

+ 2 - 8
minggao/src/page/monitor/PhotoView.vue

@@ -1,11 +1,5 @@
 <template>
   <div style="cursor: default">
-    <el-breadcrumb separator-class="el-icon-arrow-right">
-      <el-breadcrumb-item :to="{ path: '/index/monitor' }"
-        >监控</el-breadcrumb-item
-      >
-      <el-breadcrumb-item>查看图片</el-breadcrumb-item>
-    </el-breadcrumb>
     <div class="opt-box">
       <div>
         <el-button type="primary" size="mini" @click="getImageList()"
@@ -37,14 +31,14 @@
               <!-- <img :src="src.addr" class="image" /> -->
               <img v-lazy="src.addr" id="viewerDom" v-viewer class="image" />
               <span class="time">{{ (src.addtime * 1000) | formatTime }}</span>
-              <span
+              <!-- <span
                 class="del iconfont icon-shanchu"
                 @click="delPhoto(src)"
               ></span>
               <div class="bottom">
                 <img src="@/assets/images/forecasting/monitor/icon.png" />
                 病情识别
-              </div>
+              </div> -->
             </el-card>
           </el-col>
         </template>

+ 43 - 12
minggao/src/router/index.js

@@ -7,10 +7,14 @@ import Login from '@/page/login/login'
 
 // *****************首页**********************
 import Index from '@/page/home/index'
+import facilitydistribute from '@/page/homepage/facilitydistribute'//设备分布
+// import facilitydistribute from '@/page/homepage/home'//设备分布
+
+import pestdistribute from '@/page/homepage/pestdistribute'//有害生物分布
 //---------------------------------------系统管理----------------------------------------------------
-const customsManger = () => import('@/Page/systemmanger/customsManger')
-const role = () => import('@/Page/systemmanger/role')
-const motif = () => import('@/Page/systemmanger/motif')
+// const customsManger = () => import('@/Page/systemmanger/customsManger')
+// const role = () => import('@/Page/systemmanger/role')
+// const motif = () => import('@/Page/systemmanger/motif')
 const customsManger = () => import('@/Page/systemmanger/customsManger') //隶属海关
 const role = () => import('@/Page/systemmanger/role') // 角色管理
 const motif = () => import('@/Page/systemmanger/motif') // 主题定制
@@ -23,8 +27,8 @@ const realTime = () => import('@/Page/commandCenter/realTime') //实时通信
 
 // *****************测报系统**********************
 import cbd from '@/page/forecasting/cbd/Cbd'//首页
-import cbdDataDetails from '@/page/forecasting/cbd/DataDetails'//数据详情
-import cbdDataPhotos from '@/page/forecasting/cbd/cbdDataPhotos'//图片详情
+import DataDetails from '@/page/forecasting/cbd/DataDetails'//数据详情
+import DataPhotos from '@/page/forecasting/cbd/cbdDataPhotos'//图片详情
 import PestsStats from '@/page/forecasting/cbd/pestsStats'//害虫统计
 import tongji from '@/page/forecasting/cbd/tongji'//害虫分析
 import deviceTongji from '@/page/forecasting/cbd/deviceTongji'//害虫排行
@@ -35,7 +39,9 @@ import photoView from '@/page/monitor/PhotoView'
 //*********************诱捕器系统********************
 import trap from '@/page/forecasting/trap/trap'//诱捕器
 import fillinrecord from '@/page/forecasting/trap/fillinrecord'//填报记录
-import bait from '@/page/forecasting/trap/bait'//填报记录
+import bait from '@/page/forecasting/trap/bait'//诱剂维护
+
+import maintain from '@/page/forecasting/maintain/maintain'//监测点维护
 
 Vue.use(Router)
 
@@ -56,6 +62,27 @@ export default new Router({
       name: 'Index',
       component: Index,
       children: [
+        //------------------首页--------------------------
+        {
+          path: '/',
+          component: facilitydistribute,
+          meta: {
+            title: '设备分布'
+          }
+        },
+        {
+          path: 'facilitydistribute',
+          component: facilitydistribute,
+          meta: {
+            title: '设备分布'
+          }
+        }, {
+          path: 'pestdistribute',
+          component: pestdistribute,
+          meta: {
+            title: '有害生物分布'
+          }
+        },
         //------------------系统管理--------------------------
         {
           path: 'customsManger',
@@ -114,12 +141,12 @@ export default new Router({
           component: cbd
         },
         {
-          path: 'cbdDataDetails/:e_id/:d_id',
-          component: cbdDataDetails
+          path: 'DataDetails/:e_id/:d_id',
+          component: DataDetails
         },
         {
-          path: 'cbdDataPhotos/:id',
-          component: cbdDataPhotos
+          path: 'DataPhotos/:id',
+          component: DataPhotos
         },
         {
           path: 'pestsStats/:d_id/:id',
@@ -138,7 +165,7 @@ export default new Router({
           component: monitor
         },
         {
-          path: 'photoView',
+          path: 'photoView/:id',
           component: photoView
         },
         // ------------------诱捕器管理-------------------
@@ -154,7 +181,11 @@ export default new Router({
           path: 'bait',
           component: bait
         },
-        
+        // ------------------监测点维护-------------------
+        {
+          path: 'maintain',
+          component: maintain
+        },
       ]
     },
   ]

+ 3 - 2
minggao/src/util/http.js

@@ -24,6 +24,7 @@ Vue.prototype.mapJson = mapJson //请求地图json,不带端口号
 axios.interceptors.request.use(req => {
   // 判断当前请求url为weatherCondition或ipLocation时就不将axios的请求地址更换
   let session = localStorage.getItem('session');
+  // console.log(session)
   // let session = 'd5npOg/04dWL6f2YiywzUSyOzqayqnj7Qx8GNMyJhXMc='
   let url;
   if (req.url.split('=')[1]) {
@@ -49,10 +50,10 @@ axios.interceptors.request.use(req => {
 // //axios请求后的拦截
 axios.interceptors.response.use(res => {
   if (res.data.data) {
-    res.data.data.session_key && localStorage.setItem('session', res.data.data.session_key);
+    // res.data.data.session_key && localStorage.setItem('session', res.data.data.session_key);
   }
   // console.log(res.data.message)
-  if(res.data.message!="" && res.data.message != undefined){ 
+  if (res.data.message != "" && res.data.message != undefined) {
     Message.warning(res.data.message);
   }
   return res