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

<!--  -->
<template>
  <div class="cbdbox">
    <div class="cbdboxs_search">
      <el-input
        v-model="idinput"
        placeholder="请输入诱捕器编号"
        size="mini"
      ></el-input>
      <el-select
        v-model="trapvalue"
        placeholder="请选择所在监测点"
        clearable
        @change="search"
        size="mini"
      >
        <el-option
          v-for="item in traponsoptions"
          :key="item.point_id"
          :label="item.point_name"
          :value="item.point_id"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="versionsvalue2"
        placeholder="请选择隶属海关"
        size="mini"
        clearable
        @change="search"
      >
        <el-option
          v-for="item in versionsoptions2"
          :key="item.org_id"
          :label="item.org_name"
          :value="item.org_id"
        >
        </el-option>
      </el-select>
      <!-- <el-cascader
        :change-on-select="true"
        :options="versionsoptions"
        v-model="versionsvalue"
        :props="defaultParams"
        :clearable="true"
        @change="cascaderchange"
        size="mini"
        placeholder="请选择隶属海关"
      ></el-cascader> -->
      <el-select
        v-model="inoffvalue"
        placeholder="请选择诱捕器状态"
        size="mini"
        clearable
        @change="search"
      >
        <el-option
          v-for="item in inoffoptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button type="info" @click="search" size="mini">搜索</el-button>
      <el-button size="mini" @click="reset">重置</el-button>
      <el-button type="info" @click="openadd" size="mini">添加诱捕器</el-button>
      <el-button type="info" @click="downloadtf = true" size="mini"
        >批量导入诱捕器</el-button
      >
      <el-button type="info" size="mini" @click="deriveVisible = 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%; overflow-y: auto"
          :stripe="true"
          :height="48 * 13"
        >
          <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
              >
                <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; cursor: pointer"
                @click="addtrap(scope.row)"
                >编辑</span
              >
              <span
                style="color: #409eff; margin-right: 5px; cursor: pointer"
                @click="deletes(scope.row)"
                >删除</span
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        background
        layout="prev, pager, next,jumper"
        :total="total"
        :page-size="20"
        @current-change="pageChange"
        :current-page="queryInfo.page"
      >
      </el-pagination>
    </el-card>
    <el-dialog
      :title="addtitle"
      :visible.sync="addtraptf"
      width="580px"
      @close="resetForm('ruleForm')"
      :close-on-click-modal="false"
    >
      <div>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <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" @blur="latblur"></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" @blur="latblur"></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="basecity">
            <el-input
              v-model="ruleForm.basecity"
              disabled
              style="width: 217px"
            ></el-input>
          </el-form-item>
          <el-form-item label="隶属海关" prop="org_id">
            <!-- <el-select v-model="ruleForm.org_id" placeholder="请选择隶属海关">
              <el-option
                v-for="item in versionsoptions"
                :label="item.org_name"
                :value="item.org_id"
                :key="item.org_id"
              ></el-option>
            </el-select> -->
            <el-cascader
              :change-on-select="true"
              v-model="ruleForm.org_id"
              :options="versionsoptions"
              :props="defaultParams"
              :clearable="true"
              placeholder="请选择隶属海关"
              filterable
            ></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>
          <el-form-item label="诱剂名称" prop="inducer_id">
            <el-select
              v-model="ruleForm.inducer_id"
              placeholder="请选择诱剂名称"
            >
              <el-option
                v-for="item in inducer_data"
                :label="item.inducer_name"
                :value="item.inducer"
                :key="item.inducer"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备状态" prop="trap_status">
            <el-radio-group
              v-model="ruleForm.trap_status"
              placeholder="请选择设备状态"
            >
              <el-radio label="1">正常</el-radio>
              <el-radio label="0">停用</el-radio>
            </el-radio-group>
          </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"
          :disabled="releaseTF"
          >{{ releaseTF == true ? "发布中..." : "确 定" }}</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="导入诱捕器"
      :visible.sync="downloadtf"
      width="500px"
      :close-on-click-modal="false"
    >
      <div class="downloadbox">
        <div class="downloadbox_item">
          <p class="title">导入诱捕器</p>
          <!-- <el-input placeholder="请输入内容" v-model="input1">
          <template slot="prepend">Http://</template>
        </el-input> -->
          <el-upload
            action=""
            :auto-upload="false"
            accept=".xlsx, .xls"
            :show-file-list="false"
            :on-change="handle"
          >
            <el-button type="success" size="mini">点击上传</el-button>
          </el-upload>
          <el-input
            v-model="downloadinput"
            placeholder="请输入内容"
            :disabled="true"
            size="mini"
          ></el-input>
        </div>
        <p class="tishi">
          <span>注：请先下模板，在模板中填入数据上传</span
          ><span @click="download">下载模板</span>
        </p>
      </div>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="downloadtf = false">取 消</el-button>
        <el-button type="primary" @click="downloadtf = false">确 定</el-button>
      </span> -->
    </el-dialog>
    <el-dialog
      title="导出数据"
      :visible.sync="deriveVisible"
      width="500px"
      :close-on-click-modal="false"
    >
      <div class="derivebox">
        <p><span>*</span>文件名称：</p>
        <el-input
          v-model="derivefilename"
          placeholder="请输入文件名称"
          size="mini"
        ></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deriveVisible = false" size="mini">取 消</el-button>
        <el-button
          type="primary"
          @click="deriveclick"
          size="mini"
          :disabled="deriveTF"
          >{{ deriveTF ? "导出中..." : "确 定" }}</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      class="map_dialog"
      title="地图选点"
      :visible.sync="addLocationDialogVisible"
      width="820px"
      @closed="addLocationDialogClosed"
      :close-on-click-modal="false"
    >
      <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 {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    var checkname = (rule, value, callback) => {
      if (/^[A-Za-z0-9\u4e00-\u9fa5]+$/.test(value)) {
        callback();
      } else {
        callback(new Error("请输入非中文格式"));
      }
    };
    var checklnglat = (rule, value, callback) => {
      if (isNaN(value)) {
        callback(new Error("请输入数字"));
      } else {
        callback();
      }
    };
    return {
      idinput: "",
      inoffvalue: "",
      inoffoptions: [
        { label: "停用", value: "0" },
        { label: "正常", value: "1" },
      ],
      versionsvalue: "",
      versionsvalue1: "", //组织id
      versionsoptions: [], //组织
      versionsvalue2: "", //组织id 用于搜索
      versionsoptions2: [], //组织 用于搜索
      defaultParams: {
        label: "org_name",
        value: "id",
        children: "childrens",
        multiple: true,
        checkStrictly: true,
      },
      trapvalue: "",
      traponsoptions: [], //监测点
      inducer_data: [],
      queryInfo: {
        page: 1,
        point_id: "", //监测点id
        trap_number: "", //设备id
        org_id: "", //组织id
        trap_status: "", //状态
      },
      tableData: [],
      device_id: "",
      total: 10,
      loading: false,
      addtraptf: false, //增加诱捕器弹框
      ruleForm: {
        trap_id: "", //诱捕器id 修改时用到
        trap_number: "", //诱捕器编号
        lat: "", //           必传(string)               纬度
        lng: "", //      必传(string)               经度
        org_id: [], //     必传(string)               所属海关id
        inducer_id: "", //     必传(string)               诱剂id
        point_id: "", //     必传(string)               所属监测点id
        trap_status: "", //    必传(string)               设备状态0停用 1正常
        basecity: "",
      },
      rules: {
        trap_number: [
          { required: true, message: "请输入诱捕器编号", trigger: "blur" },
          { validator: checkname, trigger: "blur" },
        ],
        lng: [
          { required: true, message: "请输入经度", trigger: "blur" },
          // { validator: checklnglat, trigger: "blur" },
        ],
        lat: [
          { required: true, message: "请输入纬度", trigger: "blur" },
          // { validator: checklnglat, trigger: "blur" },
        ],
        org_id: [
          { required: true, message: "请选择隶属海关", trigger: "change" },
        ],
        point_id: [
          { required: true, message: "请选择所在监测点", trigger: "change" },
        ],
        inducer_id: [
          { required: true, message: "请选择诱剂名称", trigger: "change" },
        ],
        trap_status: [
          { required: true, message: "请选择设备状态", trigger: "change" },
        ],
      },
      parameter: "",
      addtitle: "新增诱捕器",
      downloadtf: false,
      downloadinput: "", //上传的文件名
      deriveVisible: false, //导出弹框
      derivefilename: "", //导出文件名称
      //地图属性
      addLocationDialogVisible: false,
      locationForm: {
        lng: "",
        lat: "",
      },
      addr: "", //搜索栏地址
      address: "", //地图上标签地址
      center: [114.05, 22.55],
      content: "", //设备列表组织列表
      releaseTF: false,
      deriveTF: false,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    parameter: function (e) {
      // console.log(e);
      if (e == "add") {
        // console.log(this.$data.addtitle)
        this.$data.addtitle = "新增诱捕器";
      } else if (e == "modify") {
        this.$data.addtitle = "修改诱捕器";
      }
    },
  },
  //方法集合
  methods: {
    getcbdlist() {
      //获取设备列表
      this.loading = true;
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=monitor_manage.trap_manage.trap_list",
        data: this.qs.stringify({
          page_size: 20,
          page: this.queryInfo.page,
          trap_number: this.queryInfo.trap_number,
          point_id: this.queryInfo.point_id,
          org_id: this.queryInfo.org_id,
          trap_status: this.queryInfo.trap_status,
        }),
      }).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;
        }
      });
    },
    getmon() {
      //获取监测点列表 组织列表
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=sysmenage.usermanager.org_list",
        data: this.qs.stringify({
          page_item: "100000000",
        }),
      }).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;
      });
    },
    getmon2() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=monitor_manage.trap_manage.trap_org",
        data: this.qs.stringify({
          page_item: "10000000",
        }),
      }).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]);
      this.versionsvalue1 = e[e.length - 1];
    },
    search() {
      this.queryInfo.page = 1;
      this.queryInfo.point_id = this.trapvalue;
      this.queryInfo.trap_number = this.idinput;
      this.queryInfo.org_id = this.versionsvalue2;
      this.queryInfo.trap_status = this.inoffvalue;
      // console.log(this.inoffvalue, this.versionsvalue, this.inoffvalue);
      this.getcbdlist();
    },
    pageChange(e) {
      // console.log(e)
      this.queryInfo.page = e;
      this.getcbdlist();
    },
    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;
      // }
      // if (org_id.length > 0) {
      //   org_id = org_id.join("/");
      // }
      // console.log(org_id);
      // this.releaseTF = true;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          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;
          }
          if (org_id.length > 0) {
            org_id = org_id.join("/");
          }
          console.log(org_id);
          this.releaseTF = true;
          this.$axios({
            method: "POST",
            url: "/api/api_gateway?method=monitor_manage.trap_manage.add_trap",
            data: this.qs.stringify({
              trap_id: this.ruleForm.trap_id, //                  非必传(num)                诱捕器id 修改项
              trap_number: this.ruleForm.trap_number, //               必传(string)               设备编号
              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正常
              parameter: this.parameter,
              city: this.ruleForm.basecity,
            }),
          }).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 = "修改成功！";
              }
              if (document.getElementsByClassName("el-message").length == 0) {
                this.$message({
                  showClose: true,
                  message: message,
                  type: "success",
                });
              }
              this.addtraptf = false;
              this.getcbdlist();
            } else {
              if (document.getElementsByClassName("el-message").length == 0) {
                this.$message({
                  showClose: true,
                  message: "添加失败" + res.data.message,
                  type: "warning",
                });
              }
            }
            this.releaseTF = false;
          });
        } else {
          if (document.getElementsByClassName("el-message").length == 0) {
            this.$message({
              message: "请将信息填写完全",
              type: "warning",
            });
          }
          return false;
        }
      });
    },
    resetForm(formName) {
      this.addtraptf = false;
      this.releaseTF = false;
      this.$refs[formName].resetFields();
      for (var key in this.ruleForm) {
        this.ruleForm[key] = "";
      }
    },
    openadd() {
      this.addtraptf = true;
      this.parameter = "add";
      // console.log(this.ruleForm)
    },
    addtrap(e) {
      //增加诱捕器
      console.log(e);
      // this.
      for (var key in this.ruleForm) {
        this.ruleForm[key] = e[key];
      }
      // console.log(this.ruleForm.org_id);
      this.ruleForm.trap_status = this.ruleForm.trap_status.toString();
      this.parameter = "modify";
      this.ruleForm.org_id = [];
      console.log(this.ruleForm);
      this.city(e.lat, e.lng);
      this.getmon3(e);
    },
    getmon3(e) {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=sysmenage.usermanager.get_parent_org_list",
        data: this.qs.stringify({
          device_id: e.trap_id,
        }),
      }).then((res) => {
        // console.log(res.data.data);
        var orgdatas = res.data.data;
        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 (orgdatas.length != 0) {
          for (var i = 0; i < orgdatas.length; i++) {
            if (orgdatas[i].length != 0) {
              for (var j = 0; j < orgdatas[i].length; j++) {
                this.ruleForm.org_id[i].unshift(orgdatas[i][j].org_id);
              }
            }
          }
        }
        console.log(this.ruleForm.org_id);
        this.addtraptf = true;
      });
    },
    deletes(events) {
      //删除诱捕器
      console.log(events);
      var str = "您确定删除编号为<" + events.trap_number + ">的诱捕器吗？";
      this.$confirm(str, "删除诱捕器", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          this.$axios({
            method: "POST",
            url: "/api/api_gateway?method=monitor_manage.trap_manage.add_trap",
            data: this.qs.stringify({
              trap_id: events.trap_id,
              parameter: "del",
            }),
          }).then((res) => {
            console.log(res);
            if (res.data.data) {
              if (document.getElementsByClassName("el-message").length == 0) {
                this.$message({
                  showClose: true,
                  message: "删除成功!",
                  type: "success",
                });
              }
              this.getcbdlist();
            } else {
              if (document.getElementsByClassName("el-message").length == 0) {
                this.$message({
                  showClose: true,
                  message: "删除失败，" + res.data.message,
                  type: "warning",
                });
              }
            }
          });
        })
        .catch(() => {
          if (document.getElementsByClassName("el-message").length == 0) {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          }
        });
    },
    handle(ev) {
      this.downloadinput = ev.name;
      var datas = new FormData();
      var username = localStorage.getItem("username");
      datas.append("username", username);
      datas.append("file", ev.raw);
      this.$axios({
        method: "POST",
        url: "/api/trap_export",
        data: datas,
        responseType: "blob",
      }).then((res) => {
        console.log(res);
        this.downloadFile(res, "allot_result.xls");
      });
    },
    download() {
      //下载模板
      console.log(22222);
      window.location.href =
        // this.$deriveData +
        // "http://192.168.1.77:12345/api/trap_export";1
        this.$deriveData + "/api/trap_export";
    },
    downloadFile(res, name) {
      let link = document.createElement("a");
      link.href = window.URL.createObjectURL(new Blob([res.data]));
      link.target = "_blank";
      //文件名和格式
      link.download = name;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      this.deriveTF = false;
    },
    deriveclick() {
      // this.deriveVisible = false;
      if (this.derivefilename == "") {
        if (document.getElementsByClassName("el-message").length == 0) {
          this.$message({
            showClose: true,
            message: "请输入文件名称",
            type: "warning",
          });
        }
      } else {
        this.deriveTF = true;
        this.$axios({
          method: "POST",
          url: "api/trap_list_export",
          data: this.qs.stringify({
            trap_number: this.ruleForm.trap_number,
            point_id: this.ruleForm.point_id,
            org_id: this.ruleForm.org_id,
            trap_status: this.ruleForm.trap_status,
            file_name: this.derivefilename,
            user: localStorage.getItem("username"),
          }),
          responseType: "blob",
        }).then((res) => {
          console.log(res);
          this.downloadFile(res, this.derivefilename + ".xls");
        });
      }
    },
    reset() {
      //重置
      this.idinput = "";
      this.trapvalue = "";
      this.inoffvalue = "";
      this.queryInfo.trap_number = "";
      this.queryInfo.point_id = "";
      this.queryInfo.org_id = "";
      this.queryInfo.trap_status = "";
      this.versionsvalue2 = "";
      this.versionsvalue = [];
      this.queryInfo.page = 1;
      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 {
          if (document.getElementsByClassName("el-message").length == 0) {
            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;
      this.city(this.ruleForm.lat, this.ruleForm.lng);
    },
    addLocationDialogClosed() {
      //弹框关闭时
      // this.locationForm = { lat: "", lng: "" };
      this.center = [114.05, 22.55];
      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 {
        if (document.getElementsByClassName("el-message").length == 0) {
          this.$message.warning("请输入经纬度！");
        }
        // return fasle;
      }
    },
    dingwei() {
      console.log(this.ruleForm);
      if (this.ruleForm.lng != "" && this.ruleForm.lng != 0) {
        this.center[0] = this.ruleForm.lng;
      } else {
        this.center = [114.05, 22.55];
      }
      if (this.ruleForm.lat != "" && this.ruleForm.lat != 0) {
        this.center[1] = this.ruleForm.lat;
      } else {
        this.center = [114.05, 22.55];
      }
      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;
    },
    city(lat, lng) {
      $.ajax({
        url: "https://restapi.amap.com/v3/geocode/regeo",
        type: "get",
        dataType: "jsonp",
        data: this.qs.stringify({
          location: lng + "," + lat,
          key: "78ce288400f4fc6d9458989875c833c2",
          extensions: "base",
        }),
        success: (res) => {
          console.log(res);
          this.ruleForm.basecity = res.regeocode.addressComponent.city;
          console.log(this.ruleForm);
        },
        error: function (err) {
          alert("服务端错误，请刷新浏览器后重试");
        },
      });
      // return arr;
    },
    latblur() {
      if (this.ruleForm.lat != "" && this.ruleForm.lng != "") {
        this.city(this.ruleForm.lat, this.ruleForm.lng);
      }
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getmon();
    this.getmon2();
    this.getcbdlist();
  },
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang="less">
.cbdbox {
  height: 100%;
}
.cbdboxs_search {
  display: flex;
  justify-content: flex-start;
  // height: 40px;
  .el-select {
    width: 250px;
    margin-right: 15px;
  }
  .el-input {
    width: 250px;
    margin-right: 15px;
  }
  /deep/.el-cascader {
    width: 250px;
    margin-right: 15px;
  }
}
.cbdboxs_table {
  margin-top: 15px;
  /deep/.el-table__header-wrapper {
    th {
      background-color: #fafafa;
    }
  }
  .state {
    display: flex;
    p:first-child {
      font-size: 40px;
    }
  }
}
.addtrapbox {
  display: flex;
}
.buttonbox {
  margin-bottom: 23px;
  padding-left: 100px;
}
.downloadbox {
  .downloadbox_item {
    display: flex;
    .title {
      width: 100px;
      line-height: 28px;
    }
    .el-input {
      width: 250px;
      margin-left: 15px;
    }
  }
  .tishi {
    padding-left: 100px;
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    color: #409eff;
    span:last-child {
      cursor: pointer;
    }
  }
}
.derivebox {
  display: flex;
  p {
    width: 100px;
    line-height: 28px;
    span {
      color: red;
    }
  }
  .el-input {
    width: 250px;
  }
}
/deep/.el-button--info {
  background-color: #409eff;
  border-color: #409eff;
}
/deep/.el-date-editor {
  cursor: pointer;
  .el-range-input {
    cursor: pointer;
  }
}
</style>