<template>
  <div class="rightb">
    <!-- 预警信息 -->
    <div class="item2">
      <!-- <span class="dot">
        <span class="dot-inner"></span>
      </span> -->

      <!-- <div class="fong-div"></div>
      <div class="fong-div" style="margin-left: 3px;"></div>
      <div class="fong-div" style="margin-left: 3px;"></div> -->
      <span
        style="letter-spacing: 1px; color: #fff; float: left; margin-left: 50px"
      >
        资源统计
      </span>
      <div class="rightline1"></div>
    </div>
    <div class="rightbar1">
      <!-- <div style="padding: 0px 10px; width: 100%; height: 40%">
        <div class="yujingleft yujing">
          <div class="yujingtop">
            <img
              src="@/assets/mapinages/group786.png"
              alt=""
              style="width: 50px; height: 50px"
            />
          </div>
          <div class="yujingbottom">
            <div>设备预警</div>
            <span>{{ tableData.length }}</span>
          </div>
        </div>
        <div class="yujingcenter yujing">
          <div class="yujingtop">
            <img
              src="@/assets/mapinages/group787.png"
              alt=""
              style="width: 50px; height: 50px"
            />
          </div>
          <div class="yujingbottom">
            <div>事件情况</div>
            <span>0</span>
          </div>
        </div>
        <div class="yujingright yujing">
          <div class="yujingtop">
            <img
              src="@/assets/mapinages/group788.png"
              alt=""
              style="width: 50px; height: 50px"
            />
          </div>
          <div class="yujingbottom">
            <div>隐患数量</div>
            <span>0</span>
          </div>
        </div>
      </div> -->

      <div
        class="echarts-one"
        style="margin-top: 10px; width: 100%; height: 90%; margin-left: 10px"
      >
        <div id="myChartone" :style="{ width: '100%', height: '100%' }"></div>
      </div>
    </div>

    <!-- 用户安全监控设备 -->

    <div class="rightbar2">
      <div class="item1">
        <!-- <div class="fong-div"></div>
          <div class="fong-div" style="margin-left: 3px;"></div>
          <div class="fong-div" style="margin-left: 3px;"></div> -->
        <span style="letter-spacing: 1px; color: #fff; float: left">
          用户安全监控设备
        </span>
        <!-- <img src="../../assets/second1/ti-bg.png" alt=""> -->
        <div class="rightline2"></div>
      </div>
      <div class="inuser">
        <div class="outuserleft">
          <div class="outuserone">
            <div style="margin-top: 10px">燃气用户数量</div>
            <!-- <span class="outuserspan">{{ diviceNum.userNum }}</span> -->
          </div>
          <div id="huanleft" style="width: 100%; height: 150px"></div>
          <div class="inyuan">
            <div style="letter-spacing: 2px">用户总数</div>

            <span
              style="
                font-family: 'arialbd';
                letter-spacing: 2px;
                color: #00ffff;
                font-size: 20px;
              "
              >{{ bingBottomData.totalNumberUsers }}</span
            >
          </div>
          <div class="usernum">
            <div class="usernumin in4">
              <div class="titletu">
                <span> ● </span>
                <span style="color: #cddbe4">居民用户 </span>
              </div>
              <span style="font-family: 'arialbd'; letter-spacing: 2px">
                {{ bingBottomData.residentUsers }}</span
              >
            </div>
            <div class="usernumin in5">
              <div class="titletu">
                <span> ● </span>
                <span style="color: #cddbe4">商业用户 </span>
              </div>
              <!-- <span style="font-family: 'arialbd'; letter-spacing: 2px">
                      : {{ diviceNum.shangNum }}</span
                    > -->
              <span style="font-family: 'arialbd'; letter-spacing: 2px">
                {{ bingBottomData.businessUser }}</span
              >
            </div>
            <div class="usernumin in6">
              <div class="titletu">
                <span> ● </span>
                <span style="color: #cddbe4">工业用户 </span>
              </div>
              <!-- <span style="font-family: 'arialbd'; letter-spacing: 2px">
                      : {{ diviceNum.gongNum }}</span
                    > -->
              <span style="font-family: 'arialbd'; letter-spacing: 2px">
                {{ bingBottomData.industrialUsers }}</span
              >
            </div>
            <div class="usernumin in7">
              <div class="titletu">
                <span> ● </span>
                <span style="color: #cddbe4">液化气 </span>
              </div>

              <span style="font-family: 'arialbd'; letter-spacing: 2px">
                585</span
              >
            </div>
          </div>
        </div>

        <div class="outuserright">
          <div class="outusertwo">
            <div style="margin-top: 10px">在线设备数量</div>
            <!-- <span class="outuserspan">{{
                    diviceNum.baoNum + diviceNum.changNum + diviceNum.liNum
                  }}</span> -->
          </div>
          <div id="huanright" style="width: 100%; height: 150px"></div>
          <div class="inyuan">
            <div style="letter-spacing: 2px">设备总数</div>
            <!-- <span
                    style="
                      font-family: 'arialbd';
                      letter-spacing: 2px;
                      color: #00ffff;
                      font-size: 20px;
                    "
                    >{{ diviceNum.baoNum + diviceNum.changNum + diviceNum.liNum }}</span
                  > -->
            <span
              style="
                font-family: 'arialbd';
                letter-spacing: 2px;
                color: #00ffff;
                font-size: 20px;
              "
              >{{ bingBottomData.residentUsers + bingBottomData.businessUser -28 -79}}
            </span>
          </div>
          <div class="usernum" style="margin-left: 30px">
            <div class="usernumin in4">
              <!-- <span> ● </span>
                    <span style="color: #cddbe4">在线 </span>
                    <span style="font-family: 'arialbd'; letter-spacing: 2px">
                      : {{ diviceNum.changNum }}</span
                    > -->
              <span style="color: #cddbe4">在线 </span>
              <span
                style="
                  font-family: 'arialbd';
                  letter-spacing: 2px;
                  margin-left: 10px;
                  width: 35px;
                  text-align: left;
                "
              >
                {{ bingBottomData.residentUsers -79}}</span
              >
              <span style="color: #cddbe4; margin-left: 20px">离线 </span>
              <span
                style="
                  font-family: 'arialbd';
                  letter-spacing: 2px;
                  margin-left: 10px;
                "
              >
                79</span
              >
            </div>
            <div class="usernumin in5">
              <!-- <span> ● </span>
                    <span style="color: #cddbe4">离线 </span>
                    <span style="font-family: 'arialbd'; letter-spacing: 2px">
                      : {{ diviceNum.liNum }}</span
                    > -->
              <span style="color: #cddbe4">在线 </span>
              <span
                style="
                  font-family: 'arialbd';
                  letter-spacing: 2px;
                  margin-left: 10px;
                  width: 35px;
                  text-align: left;
                "
              >
                {{ bingBottomData.businessUser -28 }}</span
              >
              <span style="color: #cddbe4; margin-left: 20px">离线 </span>
              <span
                style="
                  font-family: 'arialbd';
                  letter-spacing: 2px;
                  margin-left: 10px;
                "
              >
                {{ 28}}</span
              >
            </div>
            <div class="usernumin in6">
              <!-- <span> ● </span>
                    <span style="color: #cddbe4">报警 </span>
                    <span style="font-family: 'arialbd'; letter-spacing: 2px">
                      : {{ diviceNum.baoNum }}</span
                    > -->
              <span style="color: #cddbe4">在线 </span>
              <span
                style="
                  font-family: 'arialbd';
                  letter-spacing: 2px;
                  margin-left: 10px;
                  width: 35px;
                  text-align: left;
                "
              >
                {{ bingBottomData.industrialUsers }}</span
              >
              <span style="color: #cddbe4; margin-left: 20px">离线 </span>
              <span
                style="
                  font-family: 'arialbd';
                  letter-spacing: 2px;
                  margin-left: 10px;
                "
              >
                0</span
              >
            </div>
            <div class="usernumin in7">
              <span style="color: #cddbe4">在线 </span>
              <span
                style="
                  font-family: 'arialbd';
                  letter-spacing: 2px;
                  margin-left: 10px;
                  width: 35px;
                  text-align: left;
                "
              >
                518</span
              >
              <span style="color: #cddbe4; margin-left: 20px">离线 </span>
              <span
                style="
                  font-family: 'arialbd';
                  letter-spacing: 2px;
                  margin-left: 10px;
                "
              >
                67</span
              >
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 资源统计 -->
    <div class="rightbar3">
      <div class="item3">
        <!-- <div class="fong-div"></div>
        <div class="fong-div" style="margin-left: 3px;"></div>
        <div class="fong-div" style="margin-left: 3px;"></div> -->
        <span style="letter-spacing: 1px; color: #fff; float: left" >
          预警信息
        </span>
        <!-- <img src="../../assets/second1/ti-bg.png" alt=""> -->
        <div class="rightline3"></div>
      </div>

      <div class="left">
        <div
          class="bottom right-bottom-data-left"
          @mouseover="mouseover"
          @mouseout="mouseout"
        >
          <el-table
            size="mini"
            :data="tableData"
            :height="tableHeight"
            class="el-bottom"
            ref="table"
          >
            <el-table-column prop="unitName" label="所在单位" width="80">
              <template slot-scope="scope">
                <div class="zzz" :title="scope.row.unitName">
                  {{ scope.row.unitName }}
                </div>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="detectorType" label="设备类型" width="80">
              <template slot-scope="scope">
                <div class="zzz" :title="scope.row.detectorType">
                  {{ scope.row.detectorType }}
                </div>
              </template>
            </el-table-column> -->
            <el-table-column prop="handledStatus" label="状态" width="80">
              <template slot-scope="scope">
                <div class="zzz" :title="scope.row.handledStatus">
                  {{ scope.row.handledStatus }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="statusName" label="预警信息" width="80">
              <template slot-scope="scope">
                <div class="zzz" :title="scope.row.statusName">
                  {{ scope.row.statusName }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="alarmTime" label="预警时间" width="100">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <el-dialog
      title="预警信息"
      :visible.sync="open"
      width="500px"
      append-to-body
      @cancel="cancel1"
      @close="stopbaojing"
    >
      <div class="yujingtan" style="width: 100%; height: 160px">
        <audio id="myAudio" src="@/assets/video/baojing.mp3"></audio>
        <div class="yujingone">所在单位：{{ yujingdata.unitName }}</div>
        <!--<div class="yujingone">设备类型：{{ yujingdata.detectorType }}</div>-->
        <div class="yujingone" v-if="yujingdata.detectorType=='1'">设备类型：家用报警器</div>
        <div class="yujingone" v-else-if="yujingdata.detectorType=='2'">设备类型：工业探测器</div>
        <div class="yujingone" v-else-if="yujingdata.detectorType==4">设备类型：激光家报</div>
        <div class="yujingone" v-else-if="yujingdata.detectorType==5">设备类型：地下井探测器</div>
        <div class="yujingone" v-else >设备类型：{{ yujingdata.detectorType }}</div>
        <div class="yujingone">预警信息：{{ yujingdata.statusName }}</div>
        <div class="yujingone" style="height: 30px">
          预警时间：{{ yujingdata.alarmTime }}
        </div>
        <div class="but_yujing" @click="closealways">永久关闭</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 引入基本模板
import * as echarts from "echarts";
import { alarmData, selectDeviceNum } from "@/api/detector/detectorInfo";
// 当不轮播时候的刷新时间
import { alarmtime } from "@/utils/mapClass/config";
import { getYHTJ } from "@/api/bigWindow/charsData.js";

export default {
  // components: {
  //     RightPic,
  // },

  data() {
    return {
      open: false,
      isopen: true,
      allNum: {},
      diviceNum: {
        baoNum: 0,
        changNum: 0,
        liNum: 0,
        userNum: 0,
      },
      zeroNum: {
        fajing: 0,
        stationNum: 0,
        tiaoya: 0,
        videoNum: 0,
      },
      enterpriseIds: {
        enterpriseId: "",
      },
      bingBottomData: {
        businessUser: 0,
        industrialUsers: 0,
        residentUsers: 52830,
        totalNumberUsers: 52830,
      },
      timer: null,
      // 与bigwindow的报警同步的定时器
      alarmTimer: null,
      // 滚动功能的容器大还是列表大
      changeTimer: false,

      repeatFinshed: false,
      tableHeight: 185,
      tableData: [
        // {
        //   unitName: 123,
        //   handledStatus: 123,
        //   statusName: 345,
        //   alarmTime: "2014-11-11 10:10:10",
        // },
        // {
        //   unitName: 456,
        //   handledStatus: 123,
        //   statusName: 345,
        //   alarmTime: "2014-11-11 10:10:10",
        // },
        // { unitName: 45446, alarmTime: "2014-11-11 10:10:10" },
        // { unitName: 45446, alarmTime: "2014-11-11 10:10:10" },
        // { unitName: 45446, alarmTime: "2014-11-11 10:10:10" },
        // { unitName: 45446, alarmTime: "2014-11-11 10:10:10" },
        // { unitName: 45446, alarmTime: "2014-11-11 10:10:10" },
      ],
      yujingdata: {
        unitName: "省移动",
        detectorType: "",
        statusName: "",
        alarmTime: "",
      },
      yujingdata2: {},
      scrollHeight: 0,
    };
  },
  mounted() {
    // this.$nextTick(()=>{
    //     this.getScrollHeight();
    // })
    this.getAlarm();
    this.init();
    this.timer2 = setInterval(() => {
      if (this.ws == null) {
        this.init();
        console.log("1");
      }
    }, 1000);
    selectDeviceNum(this.enterpriseIds).then((response) => {
      this.diviceNum = response.data;
      this.drawLine3();
    });
    this.getYHTJ();
  },
  beforeDestroy() {
    console.log("清空定时器");
    clearInterval(this.alarmTimer);
    clearInterval(this.timer2);
    this.ws.close();
  },
  methods: {
    init() {
      console.log("socket执行");
      this.ws = new WebSocket(
        "ws://"+ window.location.host + process.env.VUE_APP_BASE_API+ "/websocketServer"
      );
      this.ws.onopen = (evt) => {
        console.log("WebSockets开启");
      };
      this.ws.onmessage = (evt) => {
        // alarmData().then((response) => {
        //     this.tableData = response.data.pageData;
        //     this.yujingdata = response.data.pageData[0]
        // })
        console.log("推送", evt);
        const obj = JSON.parse(evt.data);
        this.yujingdata2 = obj;
        console.log(this.yujingdata2);

        if (this.isopen) {
          this.open = true;
          setTimeout(this.baojing,1500);
        }
        // const obj = JSON.parse(evt.data);
        // console.log("接受socketobj", obj);
      };
      this.ws.onclose = () => {
        console.log("ws协议关闭");
        this.ws = null;
      };
    },
    closealways() {
      this.open = false;
      this.isopen = false;
      this.stopbaojing();
    },
    cancel1() {
    },
    getAlarm() {
      return alarmData().then((response) => {
        // return;
        this.tableData = response.data.pageData;
        if (this.tableData.length > 0) {
          this.yujingdata = this.tableData[0];
        }
        // console.log(response.data)
        // this.user = response.data;
        this.$nextTick(() => {
          this.getScrollHeight();
        });
      });
    },
    // 中间饼图左边饼图
    getYHTJ() {
      getYHTJ().then((res) => {
        console.log("cccccccc", res);
        this.bingBottomData = res.data;
      });
    },
    getScrollHeight() {
      const selectWrap = this.$refs.table.$el.querySelector(
        ".el-table__body-wrapper"
      );
      // 列表
      const select = this.$refs.table.$el
        ?.querySelector(".el-table__body-wrapper")
        .querySelector(".el-table__body");

      setTimeout(() => {
        // 列表容器高度
        const { height: heightWrapper } = selectWrap.getBoundingClientRect();
        // 列表高度
        const { height: heightSelect } = select.getBoundingClientRect();
        // 滚动条的高度 = 列表高度-列表容器高度
        this.scrollHeight = heightSelect - heightWrapper;
        // 如果列表高度大于列表容器高度，就让轮播到底重新调接口，否则就跟bigwindow同步调取接口
        if (heightSelect > heightWrapper) {
          this.timerAni();
          console.log("滚动");
        } else {
          this.alarmTimerAni();
          console.log("不滚动-----------------------------");
        }
        // 列表大的时候鼠标移入移出就会触发暂停，否则就return
        this.changeTimer = heightSelect > heightWrapper;
      }, 1);
    },
    timerAni() {
      const selectWrap = this.$refs.table.$el.querySelector(
        ".el-table__body-wrapper"
      );
      clearInterval(this.timer);
      this.timer = setInterval(async () => {
        // console.log(selectWrap.scrollTop,this.scrollHeight)
        if (selectWrap.scrollTop >= this.scrollHeight) {
          clearInterval(this.timer);
          await this.getAlarm();
          selectWrap.scrollTop = 0;
        } else {
          selectWrap.scrollTop += 1;
        }
      }, 100);
    },
    // 与外界报警同步
    alarmTimerAni() {
      this.alarmTimer = setTimeout(() => {
        this.getAlarm();
      }, alarmtime);
    },
    tableEnter() {
      clearInterval(this.timer);
    },
    // 列表大的时候鼠标移入移出就会触发暂停，否则就啥也不干
    mouseover() {
      this.changeTimer && this.tableEnter();
    },
    mouseout() {
      this.changeTimer && this.timerAni();
    },
    choice(val) {
      this.getNum(val);
    },
    getNum(val) {
      if (val != null && val != "") {
        this.enterpriseIds.enterpriseId = val.toString();
        selectDeviceNum(this.enterpriseIds).then((response) => {
          console.log(response);
          this.allNum = response.data || {};
          this.drawLine();
        });
      } else {
        this.allNum = this.zeroNum;
        this.drawLine();
      }
    },
    // drawLine() {
    //   // 基于准备好的dom，初始化echarts实例
    //   let myChart1 = this.$echarts.init(document.getElementById("myChartone"));
    //   // 绘制图表
    //   myChart1.setOption({
    //     tooltip: {
    //       trigger: "item",
    //     },
    //     grid: {
    //       top: "8%",
    //       left: "8%",
    //       right: "4%",
    //       bottom: "10%",
    //       containLabel: true,
    //     },
    //     xAxis: {
    //       // data: ["阀井", "调压箱", "场站", "监控"],
    //       data: ["居民用户", "商业用户", "工业用户", "餐饮单位用户"],
    //       type: "category",
    //       // data: category,
    //       splitLine: { show: false },
    //       axisLine: {
    //         show: false,
    //         lineStyle: {
    //           color: "#bbb6b6",
    //         },
    //       },
    //       axisTick: {
    //         show: false,
    //       },
    //       offset: 10,
    //       nameTextStyle: {
    //         fontSize: 15,
    //       },
    //     },
    //     yAxis: {
    //       type: "value",
    //       axisLine: {
    //         show: false,
    //         lineStyle: {
    //           color: "#688AB6",
    //         },
    //       },
    //       axisTick: {
    //         show: false,
    //       },
    //       splitLine: {
    //         show: true,
    //         lineStyle: {
    //           type: "dashed",
    //           color: "#464646",
    //         },
    //       },
    //     },
    //     series: [
    //       {
    //         name: "资源数量统计",
    //         type: "bar",
    //         showSymbol: false,
    //         hoverAnimation: false,
    //         data: [
    //           this.allNum.fajing,
    //           this.allNum.tiaoya,
    //           this.allNum.stationNum,
    //           this.allNum.videoNum,
    //         ],
    //         barWidth: 18, //柱图宽度
    //         // barCategoryGap:'60%',
    //         itemStyle: {
    //           normal: {
    //             label: {
    //               show: true, //开启显示
    //               position: "top", //在上方显示
    //               textStyle: {
    //                 //数值样式
    //                 color: "#688AB6",
    //                 fontSize: 12,
    //               },
    //             },
    //             barBorderRadius: [5, 5, 0, 0], //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
    //             color: function (params) {
    //               //我这边就两个柱子，大体就两个柱子颜色渐变，所以数组只有两个值，多个颜色就多个值
    //               var colorList = [
    //                 ["#00ffff", "#00fbfb80", "#112238"],
    //                 ["#198EF0", "#198ef099", "#112238"],
    //               ];
    //               var index = params.dataIndex;
    //               if (params.dataIndex >= colorList.length) {
    //                 index = params.dataIndex - colorList.length;
    //               }

    //               return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    //                 { offset: 0, color: colorList[index][0] },
    //                 { offset: 0.5, color: colorList[index][1] },
    //                 { offset: 1, color: colorList[index][2] },
    //               ]);
    //             },
    //           },
    //         },
    //       },
    //       {
    //         name: "资源数量统计",
    //         tooltip: {
    //           show: true,
    //         },
    //         type: "bar",
    //         barWidth: 10,
    //       },
    //       {
    //         name: "b",
    //         tooltip: {
    //           show: false,
    //         },
    //       },
    //       {
    //         name: "d",
    //         tooltip: {
    //           show: false,
    //         },
    //       },
    //     ],
    //   });
    // },

    baojing(){
      console.log("--开始报警")
        var audio = document.getElementById("myAudio");
      console.log(audio)
        audio.loop = true; // 设置音频循环播放
        audio.play().catch(error => {
            console.error("播放音频时发生错误：", error);
        });
    },
    stopbaojing(){
      console.log("关闭报警")
      var audio = document.getElementById("myAudio");
      audio.pause(); // 暂停音频
    },

    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart1 = this.$echarts.init(document.getElementById("myChartone"));
      // 绘制图表
      myChart1.setOption({
        legend: {
          // top:"-10%",
          right: "5%",
          textStyle: {
            fontSize: 12, //字体大小
            color: "#ffffff", //字体颜色
          },
        },
        tooltip: {
          trigger: "item",
        },
        grid: {
          top: "25%",
          left: "3%",
          right: "4%",
          bottom: "5%",
          containLabel: true,
        },
        dataset: {
          source: [
            ["product", "总量", "在线数量"],
            ["阀井", this.allNum.fajing, this.allNum.fajing],
            ["调压箱", this.allNum.tiaoya, this.allNum.tiaoya],
            ["场站", this.allNum.stationNum, this.allNum.stationNum],
            ["监控", this.allNum.videoNum, this.allNum.videoNum],
          ],
        },

        xAxis: {
          data: ["阀井", "调压箱", "场站", "监控"],
          type: "category",
          // data: category,
          axisLabel: { interval: 0 },
          splitLine: { show: false },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#bbb6b6",
            },
          },
          axisTick: {
            show: false,
          },
          offset: 10,
          nameTextStyle: {
            fontSize: 15,
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
            lineStyle: {
              color: "#688AB6",
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#464646",
            },
          },
        },
        series: [
          {
            type: "bar",
            showSymbol: false,
            hoverAnimation: false,
            // data: [
            //   this.allNum.fajing,
            //   this.allNum.tiaoya,
            //   this.allNum.stationNum,
            //   this.allNum.videoNum,
            // ],
            barWidth: 18, //柱图宽度
            // barCategoryGap:'60%',
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "#fff",
                    fontSize: 10,
                  },
                },
                barBorderRadius: [5, 5, 0, 0], //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#00ffff" },
                  { offset: 0.5, color: "#00fbfb80" },
                  { offset: 1, color: "#112238" },
                ]),
              },
            },
          },
          {
            type: "bar",
            showSymbol: false,
            hoverAnimation: false,
            // data: [
            //   this.allNum.fajing,
            //   this.allNum.tiaoya,
            //   this.allNum.stationNum,
            //   this.allNum.videoNum,
            // ],
            barWidth: 18, //柱图宽度
            // barCategoryGap:'60%',
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "#fff",
                    fontSize: 10,
                  },
                },
                barBorderRadius: [5, 5, 0, 0], //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#198EF0" },
                  { offset: 0.5, color: "#198ef099" },
                  { offset: 1, color: "#112238" },
                ]),
              },
            },
          },
        ],
        // series: [
        //   {
        //     name: "资源数量统计",
        //     type: "bar",
        //     showSymbol: false,
        //     hoverAnimation: false,
        //     data: [
        //       this.allNum.fajing,
        //       this.allNum.tiaoya,
        //       this.allNum.stationNum,
        //       this.allNum.videoNum,
        //     ],
        //     barWidth: 18, //柱图宽度
        //     // barCategoryGap:'60%',
        //     itemStyle: {
        //       normal: {
        //         label: {
        //           show: true, //开启显示
        //           position: "top", //在上方显示
        //           textStyle: {
        //             //数值样式
        //             color: "#688AB6",
        //             fontSize: 12,
        //           },
        //         },
        //         barBorderRadius: [5, 5, 0, 0], //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
        //         color: function (params) {
        //           //我这边就两个柱子，大体就两个柱子颜色渐变，所以数组只有两个值，多个颜色就多个值
        //           var colorList = [
        //             ["#00ffff", "#00fbfb80", "#112238"],
        //             ["#198EF0", "#198ef099", "#112238"],
        //           ];
        //           var index = params.dataIndex;
        //           if (params.dataIndex >= colorList.length) {
        //             index = params.dataIndex - colorList.length;
        //           }

        //           return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //             { offset: 0, color: colorList[index][0] },
        //             { offset: 0.5, color: colorList[index][1] },
        //             { offset: 1, color: colorList[index][2] },
        //           ]);
        //         },
        //       },
        //     },
        //   },
        //   {
        //     name: "资源数量统计",
        //     tooltip: {
        //       show: true,
        //     },
        //     type: "bar",
        //     barWidth: 10,
        //   },
        //   {
        //     name: "b",
        //     tooltip: {
        //       show: false,
        //     },
        //   },
        //   {
        //     name: "d",
        //     tooltip: {
        //       show: false,
        //     },
        //   },
        // ],
      });
    },

    drawLine3() {
      // 基于准备好的dom，初始化echarts实例
      let myChart31 = echarts.init(document.getElementById("huanleft"));
      let myChart32 = echarts.init(document.getElementById("huanright"));
      // 绘制图表
      myChart31.setOption({
        color: ["#50c43d", "#1883dc", "#fa8167", "#1ccccc"],
        grid: {
          left: 0,
          // right: 0,
          bottom: 0,
          top: 0,
          containLabel: true,
        },
        // grid: {
        //     bottom: 150,
        //     left: 100,
        //     right: '10%'
        // },

        series: [
          // 主要展示层的
          {
            radius: ["80%", "65%"],
            center: ["50%", "50%"],
            type: "pie",
            itemStyle: {
              borderRadius: 5,
            },
            label: {
              normal: {
                show: false,
                textStyle: {
                  fontSize: 13,
                },
                position: "outside",
              },
              emphasis: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
                length: 20,
                length2: 35,
              },
              emphasis: {
                show: true,
              },
            },
            name: "民警训练总量",
            data: [
              // { name: "居民用户", value: this.diviceNum.juminNum },
              // { name: "商业用户", value: this.diviceNum.shangNum },
              // { name: "工业用户", value: this.diviceNum.gongNum },
              // { name: "餐饮单位用户", value: this.diviceNum.gongNum },
              { name: "居民用户", value: 1121 },
              { name: "商业用户", value: 41 },
              { name: "工业用户", value: 0 },
              { name: "液化气", value: 10 },
              // { name: "餐饮单位用户", value: 543 },
            ],
          },
          // 边框的设置
          // {
          //   name: "外边框",
          //   type: "pie",
          //   clockWise: false, //顺时加载
          //   hoverAnimation: false, //鼠标移入变大
          //   center: ["50%", "50%"],
          //   radius: ["80%", "80%"],
          //   label: {
          //     normal: {
          //       show: false,
          //     },
          //   },
          //   data: [
          //     {
          //       value: 9,
          //       name: "",
          //       itemStyle: {
          //         normal: {
          //           borderWidth: 2,
          //           borderColor: "#61bad3",
          //         },
          //       },
          //     },
          //   ],
          // },
        ],
      });
      myChart32.setOption({
        color: ["#FF4040", "#F0C41B", "#188DF0"],
        grid: {
          left: 0,
          // right: 0,
          bottom: 0,
          top: 0,
          containLabel: true,
        },
        // grid: {
        //     bottom: 150,
        //     left: 100,
        //     right: '10%'
        // },

        series: [
          // 主要展示层的
          {
            radius: ["80%", "65%"],
            center: ["50%", "50%"],
            type: "pie",
            itemStyle: {
              borderRadius: 5,
            },
            label: {
              normal: {
                show: false,
                textStyle: {
                  fontSize: 13,
                },
                position: "outside",
              },
              emphasis: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
                length: 20,
                length2: 35,
              },
              emphasis: {
                show: true,
              },
            },
            name: "民警训练总量",
            data: [
              // { name: "报警数量", value: this.diviceNum.baoNum },
              // { name: "离线数量", value: 95 },
              // { name: "在线数量", value: 1592 },
              { name: "报警数量", value: 0 },
              { name: "离线数量", value: 0 },
              { name: "在线数量", value: 0 },
            ],
          },
          // 边框的设置
          // {
          //   name: "外边框",
          //   type: "pie",
          //   clockWise: false, //顺时加载
          //   hoverAnimation: false, //鼠标移入变大
          //   center: ["50%", "50%"],
          //   radius: ["80%", "80%"],
          //   label: {
          //     normal: {
          //       show: false,
          //     },
          //   },
          //   data: [
          //     {
          //       value: 9,
          //       name: "",
          //       itemStyle: {
          //         normal: {
          //           borderWidth: 2,
          //           borderColor: "#61bad3",
          //         },
          //       },
          //     },
          //   ],
          // },
        ],
      });
      // myChart32.setOption({
      //     title: {
      //         text: '设备数量:'+data.deviceNum,
      //         left: 'center',
      //         textStyle: {
      //             color: "#0ff"
      //         }
      //     },
      //     tooltip: {
      //         trigger: 'item'
      //     },
      //     series: [
      //         {
      //             name: '设备概况',
      //             type: 'pie',
      //             radius: ['50%', '70%'],
      //             center: ['50%', '60%'],
      //             avoidLabelOverlap: false,
      //             label: {
      //                 show: false,
      //                 position: 'center'
      //             },
      //             emphasis: {
      //                 label: {
      //                     show: true,
      //                     fontSize: '40',
      //                     fontWeight: 'bold'
      //                 }
      //             },
      //             labelLine: {
      //                 show: false
      //             },
      //             data:data.divice,
      //             color:["#188df0","#ffff00","#FF4040"]
      //         }
      //     ]
      // });
    },
  },
};
</script>

<style lang="scss" scoped>
.rightb {
  width: 98%;
  height: 100%;
}
.rightbar1 {
  width: 80%;
  height: 21%;
  margin-left: 16%;
  pointer-events: auto;
}
.rightbar2 {
  width: 76%;
  height: 45%;
  padding-top: 30px;
  margin-left: 22%;
  pointer-events: auto;
}
.rightbar3 {
  width: 80%;
  height: 32%;
  padding-top: 15px;
  padding-bottom: 35px;
  margin-left: 15%;
  pointer-events: auto;
}
.rightline1 {
  width: 85%;
  height: 2px;
  float: left;
  background-image: linear-gradient(to right, #47a0ff, #ffffff00);

  margin-top: 2px;
  margin-left: 50px;
}
.rightline2 {
  width: 92%;
  height: 2px;
  float: left;
  background-image: linear-gradient(to right, #47a0ff, #ffffff00);

  margin-top: 10px;
}
.rightline3 {
  width: 95%;
  height: 2px;
  float: left;
  background-image: linear-gradient(to right, #47a0ff, #ffffff00);

  margin-top: 10px;
}
.titleTex {
  height: 30px;
  width: 100%;
  color: aqua;
  text-align: center;
  line-height: 30px;
  margin-top: 10px;
}
.divall {
  height: 100%;
  width: 100%;
}
.divfen {
  display: flex;
  justify-content: center;
  align-items: center;
}
.numdiv {
  background: #47aed5;
  color: white;
  width: 27px;
  font-size: 30px;
}
.item1 {
  width: 85%;
  height: 30px;
  font-size: 16px;
  font-weight: 700;
  margin-left: 5%;
  margin-top: 15px;
  line-height: 10px;
}
.item1 img {
  width: 100%;
}
.item2 {
  width: 85%;
  height: 30px;
  font-size: 16px;
  font-weight: 700;
  margin-left: 5%;
  margin-top: 15px;
}
.item3 {
  width: 85%;
  height: 30px;
  font-size: 16px;
  font-weight: 700;
  margin-left: 10%;
  margin-top: 15px;
  line-height: 10px;
}
.dot {
  display: inline-block;
  position: relative;
  width: 10px;
  height: 10px;
  background: rgb(30, 185, 190);
  border-radius: 50%;
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 2px;
}

.dot-inner {
  background: #44d7dc;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -webkit-animation: vabDot 1.2s ease-in-out infinite;
  animation: vabDot 1.2s ease-in-out infinite;
}
@-webkit-keyframes vabDot {
  0% {
    opacity: 0.6;
    transform: scale(0.8);
  }

  to {
    opacity: 0;
    transform: scale(2.4);
  }
}

@keyframes vabDot {
  0% {
    opacity: 0.6;
    transform: scale(0.8);
  }

  to {
    opacity: 0;
    transform: scale(2.4);
  }
}
.inuser {
  width: 100%;
  height: 82%;
}
.outuserleft {
  width: 50%;
  height: 100%;
  float: left;
}
.outuserright {
  width: 50%;
  height: 100%;
  float: right;
}
.outuserone {
  width: 100%;
  height: 20px;
  text-align: center;
  color: #cddbe4;
}
.outusertwo {
  width: 100%;
  height: 20px;
  text-align: center;
  color: #cddbe4;
}
.outuserspan {
  font-family: "arialbd";
  font-size: 28px;
  color: #00ffff;
  letter-spacing: 8px;
}
.usernum {
  width: 100%;
  text-align: center;
  margin-top:10px;
}
.usernumin {
  font-size: 15px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin-bottom: 15px;
}
.titletu {
  margin-left: 40px;
  width: 120px;
  text-align: left;
}
titletu2 {
  margin-left: 40px;
  width: 70px;
  text-align: left;
}
.in1 {
  color: #188df0;
}
.in2 {
  color: #f0c41b;
}
.in3 {
  color: #ff4040;
}
.in4 {
  color: #50c43d;
}
.in5 {
  color: #1883dc;
}
.in6 {
  color: #fa8167;
}
.in7 {
  color: #1ccccc;
}
.in8 {
  color: #40adf1;
}
.inyuan {
  width: 94px;
  height: 94px;
  border-radius: 50%;
  border: 2px solid #125c9b;
  position: fixed;
  margin-bottom: 10px;
  /* margin-top: -122px;
  margin-left: 62px; */
  margin-top: -122px;
  margin-left: 44px;
  font-size: 15px;
  color: #cddbe4;
  text-align: center;
  line-height: 20px;
  padding: 28px 0px 0px 0px;
  background-image: linear-gradient(to left, #112238, #003e8d, #112238);
}
.b_list {
  height: 100%;
  overflow: hidden;
}
.left {
  margin-top: 10px;
  width: 350px;
  height: 75%;
  margin-left: 35px;

  .right-bottom-data-left {
    height: 100%;
    // background: red;
  }
}
.yj {
  padding: 0px 10px;
}
.yujing {
  width: 33%;
  height: 100%;
  float: left;
}
.yujingtop {
  /* width: 70px;
  height: 90px; */
  float: left;
  margin-top: 15px;
  text-align: right;
}
.yujingbottom {
  float: left;
  color: #cddbe4;
  margin-left: 10px;
  line-height: 35px;
  padding: 10px 0 0 0;
}
.yujingbottom span {
  font-family: "arialbd";
  font-size: 25px;
  background-image: -webkit-linear-gradient(bottom, #f0c41b, #e4dbb7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.yujingtan {
  font-size: 18px;
}
.yujingone {
  height: 40px;
  color: #cccccc;
}
.but_yujing {
  cursor: pointer;
  width: 100px;
  border: 1px solid #cccccc;
  text-align: center;
  border-radius: 5px;
  height: 30px;
  margin-left: 360px;
  color: white;
}
</style>
<style lang="scss" scoped>
::v-deep .el-dialog {
  margin-top: 18vh !important;
}
::v-deep .el-dialog__header {
  background: #cc0000;
  border-bottom: 1px solid #181930;
}
::v-deep .el-dialog__title {
  color: white !important;
}
::v-deep .el-dialog__headerbtn .el-dialog__close {
  color: #ffffff;
}
::v-deep .el-dialog__body {
  background: rgba(9, 18, 32, 0.9);
}
</style>
