MingGao_vue/minggao/src/page/homepage/facilitydistribute.vue

<!--  -->
<template>
  <div
    class="pestbox"
    v-loading="pestboxloading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div
      :style="{ height: '100%', width: '100%' }"
      id="mychart"
      ref="mychart"
    ></div>
    <div class="searchbox">
      <el-select
        v-model="inoffvalue"
        placeholder="请选择所在监测点"
        size="mini"
      >
        <el-option
          v-for="item in inoffoptions"
          :key="item.point_id"
          :label="item.point_name"
          :value="item.point_id"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="versionsvalue2"
        placeholder="请选择隶属海关"
        size="mini"
      >
        <el-option
          v-for="item in versionsoptions2"
          :key="item.org_name"
          :label="item.org_name"
          :value="item.org_id"
        >
        </el-option>
      </el-select>
      <el-select v-model="statevalue" placeholder="请选择设备状态" size="mini">
        <el-option
          v-for="item in stateoptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select v-model="typevalue" placeholder="请选择设备类型" size="mini">
        <el-option
          v-for="item in typeoptions"
          :key="item.type_id"
          :label="item.type_name"
          :value="item.type_id"
        >
        </el-option>
      </el-select>
      <div class="inputbox">
        <el-input
          v-model="idinput"
          placeholder="请输入设备编号"
          size="mini"
        ></el-input>
      </div>
      <el-button type="info" @click="search" size="mini">搜索</el-button>
      <el-button @click="reset" size="mini">重置</el-button>
    </div>
    <div class="tallybox">
      <p
        class="tallybox_item"
        v-for="(item, index) in typeoptions"
        :key="index"
      >
        <span
          class="tallybox_dian"
          :style="{ backgroundColor: item.colour }"
        ></span>
        <span class="tallybox_text">{{ item.type_name }}</span>
      </p>
    </div>
    <div class="piebox">
      <p
        :class="
          pietf ? 'iconbox el-icon-arrow-right' : 'iconbox el-icon-arrow-left'
        "
        @click="pietf = !pietf"
        style="cursor: pointer"
      ></p>
      <div class="tishi" :style="{ width: width }" v-if="baseinfo.length == 0">
        <p>请点击设备标点，查看设备详情</p>
      </div>
      <div
        v-else
        :style="{ width: width }"
        id="mychartpie"
        ref="mychartpie"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <div class="infobox">
          <h3>设备信息</h3>
          <p>
            <span>设备名称：</span
            ><span>{{
              baseinfo[0].device_name == "" ? "暂无" : baseinfo[0].device_name
            }}</span>
          </p>
          <p>
            <span>设备编号：</span><span>{{ baseinfo[0].device_id }}</span>
          </p>
          <p>
            <span>所属监测点：</span><span>{{ baseinfo[0].poin_name }}</span>
          </p>
          <p>
            <span>隶属海关：</span
            ><span
              v-for="item in baseinfo[0].temp_org_list"
              :key="item.org_id"
              >{{ item.org_name + "、" }}</span
            >
          </p>
        </div>
        <div class="wornbox" v-if="device_type_id == 4">
          <h3>有害生物监测信息（统计）</h3>
          <div class="wornbox_item">
            <p v-for="(item, index) in baseinfo[0].pest_list" :key="index">
              <span>{{ item.pest_name }}</span
              ><span>{{ item.sum }}</span>
            </p>
            <p style="color: #fff; width: 100%; text-align: center" v-if="baseinfo[0].pest_list.length==0">暂无数据</p>
          </div>
        </div>
        <div class="cbdinfobox" v-if="device_type_id == 3">
          <h3>设备状态</h3>
          <div class="cbdinfobox_item">
            <p>
              环境温度：<span>{{ baseinfo[0].device_data.at }} ℃</span>
            </p>
            <p>
              环境湿度：<span>{{ baseinfo[0].device_data.ah }} %RH</span>
            </p>
          </div>
          <div class="cbdinfobox_item">
            <p>
              设备开关：<span>{{
                baseinfo[0].device_data.ds == 0 ? "关机" : "开机"
              }}</span>
            </p>
            <p>
              工作状态：<span>{{
                baseinfo[0].device_data.ws == 0 ? "待机" : "工作"
              }}</span>
            </p>
          </div>
          <div class="cbdinfobox_item">
            <p>
              信号强度：<span>{{ baseinfo[0].device_data.csq }}</span>
            </p>
            <p>
              最新上报时间：<span>{{ baseinfo[0].uptime }}</span>
            </p>
          </div>
        </div>
        <div class="cbdimg" v-if="device_type_id == 3">
          <h3 class="title">最新虫情图片</h3>
          <el-carousel :interval="5000" arrow="always">
            <el-carousel-item
              v-for="(item, index) in baseinfo[0].photo_data"
              :key="index"
            >
              <img :src="item.addr" alt="" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="videoBonbox" v-if="device_type_id == 6">
          <h3 class="title">实时监控</h3>
          <div id="videoBon"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import * as echarts from "echarts";
import "../../../node_modules/echarts/map/js/china";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      pietf: false,
      width: "0px",
      inoffvalue: "", //监测点 选择
      inoffoptions: [], //监测点列表
      versionsvalue2: "", //隶属海关 选择
      versionsoptions2: [], //隶属海关列表
      statevalue: "", //设备状态
      stateoptions: [
        {
          value: "0",
          label: "停用(离线)",
        },
        {
          value: "1",
          label: "正常(在线)",
        },
      ], //设备状态列表
      typevalue: "", //设备类型
      typeoptions: [], //设备类型 列表
      idinput: "", //设备编号
      baseinfo: [], //设备详情
      loading: false,
      device_type_id: 0,
      myVideo2: {},
      pestboxloading: true,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    pietf: function (val) {
      // console.log(this.width)
      if (val) {
        this.width = "500px";
      } else {
        this.width = "0";
        if (this.myVideo2[`myPlayer`]) {
          this.myVideo2[`myPlayer`].stop();
        }
      }
      // console.log(this.width)
    },
    device_type_id: function (val) {
      console.log(val);
      if (val != 6) {
        if (this.myVideo2[`myPlayer`]) {
          this.myVideo2[`myPlayer`].stop();
        }
      }
    },
  },
  //方法集合
  methods: {
    init(data1, data2) {
      var that = this;
      let myChart = echarts.init(document.getElementById("mychart"));
      var arr = [];
      const mapData = require("./json/shenzhen.json");
      //   const name = "深圳";
      arr.push(mapData.features);
      //   echarts.registerMap(name, mapData);
      const mapData2 = require("./json/shanwei.json");
      console.log(mapData2);
      arr.push(mapData2.features);
      //   const name2 = "汕尾";
      //   echarts.registerMap(name2, mapData2);
      const mapData3 = require("./json/huizhou.json");
      arr.push(mapData3.features);
      //   const name3 = "惠州";
      //   echarts.registerMap(name3, mapData3);

      var arr2 = arr.reduce(function (a, b) {
        return a.concat(b);
      });
      // console.log(arr2);
      var xbMap = {
        type: "FeatureCollection",
        features: arr2,
      };

      echarts.registerMap("深圳", xbMap);
      // let myChart = echarts.init(document.getElementById("mychart"));
      window.addEventListener("resize", function () {
        // undefined;
        myChart.resize();
      });

      var data = data1;
      var geoCoordMap = data2;
      myChart.on("click", (params) => {
        if (params.componentType == "series") {
          console.log(params.value[2]);
          this.device_type_id = params.value[2];
          this.pietf = true;
          // if(this.device_type_id == 6){
          this.getbaseinfo(params.name);
          // }
        }
      });
      var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value),
            });
          }
        }
        return res;
      };

      var option = {
        backgroundColor: "#252b45",
        title: {
          text: "",
          subtext: "",
          sublink: "",
          left: "center",
          textStyle: {
            color: "#fff",
          },
        },
        // tooltip: {
        //   trigger: "item",
        // },
        legend: {
          orient: "vertical",
          y: "bottom",
          x: "right",
          data: ["haidilao"],
          textStyle: {
            color: "#fff",
          },
        },
        geo: {
          map: "深圳",
          label: {
            normal: {
              show: true,
              color: "#fff",
            },
            emphasis: {
              show: true,
            },
          },
          roam: true, //是否允许缩放
          layoutCenter: ["50%", "105%"], //地图位置
          layoutSize: "200%",
          itemStyle: {
            normal: {
              color: "#031525", //地图背景色
              borderColor: "rgba(100,149,237,1)", //省市边界线
            },
            emphasis: {
              color: "rgba(37, 43, 61, .5)", //悬浮背景
            },
          },
          scaleLimit: {
            //所属组件的z分层，z值小的图形会被z值大的图形覆盖
            min: 0.5, //最小的缩放值
            max: 50,
          },
        },
        series: [
          {
            name: "Top 5",
            type: "effectScatter",
            coordinateSystem: "geo",
            data: convertData(
              data.sort(function (a, b) {
                return b.value - a.value;
              })
            ),
            symbolSize: 12,
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: false,
              },
            },
            itemStyle: {
              normal: {
                color: function (e) {
                  // console.log(e.data.value[2]);
                  var color = "";
                  for (var i = 0; i < that.typeoptions.length; i++) {
                    if (e.data.value[2] == that.typeoptions[i].type_id) {
                      color = that.typeoptions[i].colour;
                    }
                  }
                  // console.log(color)
                  return color;
                },
                shadowBlur: 10,
                shadowColor: "#333",
              },
            },
            zlevel: 1,
          },
        ],
      };
      echarts.init(document.getElementById("mychart")).setOption(option);
      this.pestboxloading = false;
    },
    getbaselist() {
      // this.pestboxloading = true
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=monitor_manage.home_map.device_distribute",
        data: this.qs.stringify({
          trap_number: this.idinput, //              非必传(string)               设备编号 搜索项
          point_id: this.inoffvalue, //                  非必传(string)               设备所属监测点id 搜索项
          org_id: this.versionsvalue2, //                    非必传(string)               设备所属组织id   搜索项
          trap_status: this.statevalue, //               非必传(num)                  诱捕器状态  0停用 1正常 搜索项
          type_id: this.typevalue, //                   非必传(num)                  3测报灯  4诱捕器  6监控 搜索项
        }),
      }).then((res) => {
        // console.log(res.data.data);
        var data = res.data.data;
        var arr1 = [];
        var obj2 = {};
        for (var i = 0; i < data.length; i++) {
          var obj = {
            name: data[i].d_id,
            value: data[i].device_type_id,
          };
          arr1.push(obj);
          obj2[data[i].d_id] = [Number(data[i].lat), Number(data[i].lng)];
          // console.log(obj2)
        }
        // console.log(arr1,obj2)
        this.init(arr1, obj2);
        // this.inoffoptions = res.data.data.point_data;
      });
    },
    search() {
      this.getbaselist();
    },
    reset() {
      this.inoffvalue = "";
      this.versionsvalue2 = "";
      this.statevalue = "";
      this.typevalue = "";
      this.idinput = "";
      this.getbaselist();
    },
    // getmon() {
    //   //获取监测点列表 组织列表
    //   this.$axios({
    //     method: "POST",
    //     url: "/api/api_gateway?method=sysmenage.usermanager.org_list",
    //   }).then((res) => {
    //     console.log(res.data.data);
    //     this.inoffoptions = res.data.data.point_data;
    //   });
    // },
    getmon2() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=monitor_manage.trap_manage.trap_org",
        data: this.qs.stringify({
          page_item: "1000000",
        }),
      }).then((res) => {
        console.log(res.data.data);
        this.versionsoptions2 = res.data.data.org_data;
        this.inoffoptions = res.data.data.point_data;
      });
    },
    gettype() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=monitor_manage.home_map.home_map_device_type",
      }).then((res) => {
        console.log(res.data.data);
        this.typeoptions = res.data.data;
        this.getbaselist();
      });
    },
    getbaseinfo(d_id) {
      this.loading = true;
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=monitor_manage.home_map.device_distribute_details",
        data: this.qs.stringify({
          d_id: d_id,
        }),
      }).then((res) => {
        console.log(res.data.data);
        this.loading = false;
        this.baseinfo = res.data.data;
        if (this.baseinfo[0].device_info) {
          // console.log(this.baseinfo[0].device_info.hlsHd)
          let hlsHd = this.baseinfo[0].device_info.hlsHd;
          let playHtml = `<video id="myPlayer"  muted autoplay  poster='' controls playsInline  webkit-playsinline src="${hlsHd}"  style="width:100%; height:100%;"></video>`;
          // console.log(hlsHd);
          this.$nextTick(() => {
            document.getElementById("videoBon").innerHTML = playHtml;
            this.myVideo2[`myPlayer`] = new EZUIKit.EZUIPlayer(`myPlayer`);
            setTimeout(() => {
              this.myVideo2[`myPlayer`].play();
            }, 150);
          });
        } else {
          var dom = document.getElementById("myPlayer");
          dom.style.display = "none";
        }
      });
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // this.getmon();
    this.getmon2();
    this.gettype();
  },
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {
    if (this.myVideo2[`myPlayer`]) {
      this.myVideo2[`myPlayer`].stop();
    }
  }, //生命周期 - 销毁之前
  destroyed() {
    if (this.myVideo2[`myPlayer`]) {
      this.myVideo2[`myPlayer`].stop();
    }
  }, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.pestbox {
  width: 100%;
  height: 97%;
  position: relative;
  overflow: hidden;
  background-color: #252b45;
  .tishi {
    // width: 500px;
    height: 50px;
    color: #fff;
    line-height: 50px;
    background-color: #04243e;
    text-align: center;
    transition: width 1s ease;
    overflow: hidden;
  }
  .searchbox {
    position: absolute;
    top: 10px;
    left: 15px;
    display: flex;
    /deep/.el-select {
      margin-right: 10px;
    }
    /deep/.el-date-editor {
      margin-right: 10px;
    }
    /deep/.el-button--info {
      background-color: #409eff;
      border-color: #409eff;
    }
    .inputbox {
      margin-right: 10px;
      /deep/.el-input {
        width: 200px;
      }
    }
  }
  .tallybox {
    position: absolute;
    top: 50px;
    left: 15px;
    .tallybox_item {
      margin-bottom: 5px;
      .tallybox_dian {
        display: inline-block;
        width: 6px;
        height: 6px;
        // background-color: #fff;
        border-radius: 50%;
      }
      .tallybox_text {
        // background-color: #fff;
        // display: inline-block;
        font-size: 14px;
        color: #fff;
      }
    }
  }
  .piebox {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    // height: 100%;
    transition: width 1s ease;
    overflow: hidden;
    .iconbox {
      width: 30px;
      height: 50px;
      background-color: chocolate;
      color: #fff;
      line-height: 50px;
      text-align: center;
      font-size: 25px;
    }
    #mychartpie {
      transition: all 1s ease;
      background-color: #04243e;
      // padding: 20px;
      box-sizing: border-box;
      overflow: hidden;
      border-radius: 10px;
      .infobox {
        padding: 20px 20px 0 20px;
        h3 {
          margin-top: 0;
          color: #fff;
        }
        p {
          margin-bottom: 15px;
          color: #fff;
          font-size: 14px;
          span {
            color: #04d5e8;
          }
          span:first-child {
            display: inline-block;
            width: 85px;
            color: #fff;
          }
        }
      }
      .wornbox {
        padding: 0 20px 20px;
        h3 {
          margin-top: 0;
          color: #fff;
        }
        .wornbox_item {
          display: flex;
          flex-wrap: wrap;

          p {
            width: 40%;
            margin-bottom: 15px;
            color: #fff;
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            margin-right: 20px;
            span:nth-child(2) {
              color: #04d5e8;
            }
          }
        }
      }
      .cbdinfobox {
        padding: 0 20px 20px;
        h3 {
          margin-top: 0;
          color: #fff;
        }
        .cbdinfobox_item {
          display: flex;
          width: 100%;
          margin: 0 15px 10px 0;
          p {
            color: #fff;
            font-size: 14px;
            margin-right: 20px;
            span {
              color: #04d5e8;
            }
          }
          p:first-child {
            width: 150px;
          }
        }
      }
      .cbdimg {
        padding: 0px 20px 0 20px;
        .title {
          margin-top: 0;
          color: #fff;
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
      .videoBonbox {
        padding: 0 20px 20px;
        h3 {
          margin-top: 0;
          color: #fff;
        }
      }
    }
  }
}
</style>