rightBar.vue

<template>
  <div style="height: 100%">
    <!-- 预警信息 -->
    <div>
      <div class="item1">
        <span class="dot">
          <span class="dot-inner"></span>
        </span>
        <span
          style="letter-spacing: 3px; color: #cddbe4; cursor: pointer"
          @click="$router.push('/operationMonitor/operationMonitor')"
          >预警信息</span
        >
        <div
          class="fong-div"
          style="
            width: 8px;
            height: 12px;
            background-color: #2c888899;
            float: right;
            margin-top: 10px;
            transform: skewX(-25deg);
          "
        ></div>
        <div
          class="fong-div"
          style="
            width: 8px;
            height: 12px;
            background-color: #24b1b1b3;
            float: right;
            margin-top: 10px;
            margin-right: 10px;
            transform: skewX(-25deg);
          "
        ></div>
        <div
          class="fong-div"
          style="
            width: 8px;
            height: 12px;
            background-color: #11e9e9b3;
            float: right;
            margin-top: 10px;
            margin-right: 10px;
            transform: skewX(-25deg);
          "
        ></div>
      </div>
    </div>
    <div class="" style="padding: 0px 10px">
      <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>2</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>2</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>2</span>
        </div>
      </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="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="140">
          </el-table-column>
          <el-table-column prop="handledStatus" label="状态">
            <template slot-scope="scope">
              <div class="zzz" :title="scope.row.handledStatus">
                {{ scope.row.handledStatus }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 用户安全监控设备 -->
    <div>
      <div class="item1">
        <span class="dot">
          <span class="dot-inner"></span>
        </span>
        <span style="letter-spacing: 3px; color: #cddbe4"
          >用户安全监控设备</span
        >
        <div
          class="fong-div"
          style="
            width: 8px;
            height: 12px;
            background-color: #2c888899;
            float: right;
            margin-top: 10px;
            transform: skewX(-25deg);
          "
        ></div>
        <div
          class="fong-div"
          style="
            width: 8px;
            height: 12px;
            background-color: #24b1b1b3;
            float: right;
            margin-top: 10px;
            margin-right: 10px;
            transform: skewX(-25deg);
          "
        ></div>
        <div
          class="fong-div"
          style="
            width: 8px;
            height: 12px;
            background-color: #11e9e9b3;
            float: right;
            margin-top: 10px;
            margin-right: 10px;
            transform: skewX(-25deg);
          "
        ></div>
      </div>
    </div>
    <div class="inuser">
      <div class="outuserleft">
        <div class="outuserone">
          <p>燃气用户数量</p>
          <!-- <span class="outuserspan">{{ diviceNum.userNum }}</span> -->
        </div>
        <div id="huanleft" style="width: 235px; height: 170px"></div>
        <div class="inyuan">
          <div style="letter-spacing: 2px">用户总数</div>
          <span
            style="
              font-family: 'arialbd';
              letter-spacing: 2px;
              color: #00ffff;
              font-size: 20px;
            "
            >{{
              diviceNum.juminNum + diviceNum.shangNum + diviceNum.gongNum
            }}</span
          >
        </div>
        <div class="usernum">
          <div class="usernumin in4">
            <span> ● </span>
            <span style="color: #cddbe4">居民用户 </span>
            <span style="font-family: 'arialbd'; letter-spacing: 2px">
              : {{ diviceNum.juminNum }}</span
            >
          </div>
          <div class="usernumin in5">
            <span> ● </span>
            <span style="color: #cddbe4">商业用户 </span>
            <span style="font-family: 'arialbd'; letter-spacing: 2px">
              : {{ diviceNum.shangNum }}</span
            >
          </div>
          <div class="usernumin in6">
            <span> ● </span>
            <span style="color: #cddbe4">工业用户 </span>
            <span style="font-family: 'arialbd'; letter-spacing: 2px">
              : {{ diviceNum.gongNum }}</span
            >
          </div>
        </div>
      </div>

      <div class="outuserright">
        <div class="outusertwo">
          <p>安全设备数量</p>
          <!-- <span class="outuserspan">{{
            diviceNum.baoNum + diviceNum.changNum + diviceNum.liNum
          }}</span> -->
        </div>
        <div id="huanright" style="width: 235px; height: 170px"></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
          >
        </div>
        <div class="usernum">
          <div class="usernumin in1">
            <span> ● </span>
            <span style="color: #cddbe4">在线 </span>
            <span style="font-family: 'arialbd'; letter-spacing: 2px">
              : {{ diviceNum.changNum }}</span
            >
          </div>
          <div class="usernumin in2">
            <span> ● </span>
            <span style="color: #cddbe4">离线 </span>
            <span style="font-family: 'arialbd'; letter-spacing: 2px">
              : {{ diviceNum.liNum }}</span
            >
          </div>
          <div class="usernumin in3">
            <span> ● </span>
            <span style="color: #cddbe4">报警 </span>
            <span style="font-family: 'arialbd'; letter-spacing: 2px">
              : {{ diviceNum.baoNum }}</span
            >
          </div>
        </div>
      </div>
    </div>

    <!-- 资源统计 -->
    <div>
      <div class="item1" style="margin-top: 15px">
        <span class="dot">
          <span class="dot-inner"></span>
        </span>
        <span
          style="letter-spacing: 3px; color: #cddbe4; cursor: pointer"
          @click="$router.push('/regulation/station')"
          >资源统计</span
        >
        <div
          class="fong-div"
          style="
            width: 8px;
            height: 12px;
            background-color: #2c888899;
            float: right;
            margin-top: 10px;
            transform: skewX(-25deg);
          "
        ></div>
        <div
          class="fong-div"
          style="
            width: 8px;
            height: 12px;
            background-color: #24b1b1b3;
            float: right;
            margin-top: 10px;
            margin-right: 10px;
            transform: skewX(-25deg);
          "
        ></div>
        <div
          class="fong-div"
          style="
            width: 8px;
            height: 12px;
            background-color: #11e9e9b3;
            float: right;
            margin-top: 10px;
            margin-right: 10px;
            transform: skewX(-25deg);
          "
        ></div>
      </div>
    </div>
    <div
      class="echarts-one"
      style="margin-top: 10px; width: 430px; margin-left: 10px"
    >
      <div id="myChartone" :style="{ width: '420px', height: '240px' }"></div>
    </div>
  </div>
</template>

<script>
// 引入基本模板
import * as echarts from "echarts";
import { alarmData, selectDeviceNum } from "@/api/detector/detectorInfo";
// 当不轮播时候的刷新时间
import { alarmtime } from "@/utils/mapClass/config";
export default {
  // components: {
  //     RightPic,
  // },
  data() {
    return {
      allNum: {},
      diviceNum: {
        baoNum: 0,
        changNum: 0,
        liNum: 0,
        userNum: 0,
      },
      zeroNum: {
        fajing: 0,
        stationNum: 0,
        tiaoya: 0,
        videoNum: 0,
      },
      enterpriseIds: {
        enterpriseId: "",
      },
      timer: null,
      // 与bigwindow的报警同步的定时器
      alarmTimer: null,
      // 滚动功能的容器大还是列表大
      changeTimer: false,

      repeatFinshed: false,
      tableHeight: 135,
      tableData: [],
      scrollHeight: 0,
    };
  },
  mounted() {
    // this.$nextTick(()=>{
    //     this.getScrollHeight();
    // })
    this.getAlarm();

    selectDeviceNum(this.enterpriseIds).then((response) => {
      this.diviceNum = response.data;
      this.drawLine3();
    });
  },
  beforeDestroy() {
    console.log("清空定时器");
    clearInterval(this.alarmTimer);
  },
  methods: {
    getAlarm() {
      return alarmData().then((response) => {
        this.tableData = response.data.pageData;
        // console.log(response.data)
        // this.user = response.data;
        this.$nextTick(() => {
          this.getScrollHeight();
        });
      });
    },
    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 () => {
        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: ["阀井", "调压箱", "场站", "监控"],
          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,
            },
          },
        ],
      });
    },

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

        series: [
          // 主要展示层的
          {
            radius: ["75%", "65%"],
            center: ["50%", "50%"],
            type: "pie",
            itemStyle: {
              borderRadius: 20,
            },
            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: "外边框",
            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: ["75%", "65%"],
            center: ["50%", "50%"],
            type: "pie",
            itemStyle: {
              borderRadius: 20,
            },
            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: this.diviceNum.liNum },
              { name: "在线数量", value: this.diviceNum.changNum },
            ],
          },
          // 边框的设置
          {
            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 scoped>
.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: 93%;
  height: 30px;
  font-size: 18px;
  line-height: 30px;
  padding-left: 10px;
  font-weight: 700;
  font-style: italic;
  margin-left: 10px;
  background-image: linear-gradient(
    to left,
    #112238,
    rgb(49 151 195 / 70%) 50%,
    #112238
  );
}
.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: 265px;
}
.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;
}
.usernumin {
  font-size: 15px;
}
.in1 {
  color: #188df0;
}
.in2 {
  color: #f0c41b;
}
.in3 {
  color: #ff4040;
}
.in4 {
  color: #91cc75;
}
.in5 {
  color: #5470c6;
}
.in6 {
  color: #fa8167;
}
.inyuan {
  width: 106px;
  height: 106px;
  border-radius: 50%;
  border: 2px solid #125c9b;
  position: fixed;
  margin-bottom: 10px;
  margin-top: -138px;
  margin-left: 64px;
  font-size: 15px;
  color: #cddbe4;
  text-align: center;
  line-height: 25px;
  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: 440px;
  margin-left: 20px;
}
.yj{
  padding: 0px 10px;
}
.yujing{
  width: 33%;
  height: 90px;
  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;
}
</style>