添加告警推送页面

zhangzengfei

2022-08-04 c746bd5e7640a2e7d0c29134d23ee266d8e68a52

 src/views/manageCenter/index.vue

@@ -5,7 +5,7 @@

    <div class="centerTitle">
      <div class="heart">
        <div class="welcome">{{ userName }},欢迎您贝思科管理中心.</div>
        <div class="welcome">{{ userName }}, 欢迎您回到管理中心。</div>
        <div class="time">{{ timeMsg }}</div>
      </div>
    </div>
@@ -15,20 +15,14 @@
      <div class="products">
        <div class="title">全部产品</div>
        <div class="productList">
          <div
            class="productItem"
            v-for="(item, index) in productList"
            :key="index"
          >
            <router-link :to="item.path">
              <img :src="item.icon" alt="" />
              <div class="name">{{ item.name }}</div>
            </router-link>
          <div class="productItem" v-for="(item, index) in productList" :key="index" @click="jump(item)">
            <img :src="item.icon" alt="" />
            <div class="name">{{ item.name }}</div>
          </div>
        </div>
      </div>

      <div class="equipmentInfo">
      <!--  <div class="equipmentInfo">
        <div class="equipmentCard">
          <div class="label">设备总量</div>
          <div class="number">
@@ -36,7 +30,7 @@
            <div class="upIcon iconfont">&#xe62e; 2</div>
          </div>

          <img src="/images/manageCenter/任务总数.png" alt="" />
          <img src="/images/manageCenter/total2.png" alt="" />
        </div>

        <div class="equipmentCard">
@@ -46,7 +40,7 @@
            <div class="upIcon iconfont">&#xe62e; 2</div>
          </div>

          <img src="/images/manageCenter/摄像机总数.png" alt="" />
          <img src="/images/manageCenter/total3.png" alt="" />
        </div>

        <div class="equipmentCard">
@@ -56,7 +50,7 @@
            <div class="downIcon iconfont">&#xe651; 2</div>
          </div>

          <img src="/images/manageCenter/算法总数.png" alt="" />
          <img src="/images/manageCenter/total4.png" alt="" />
        </div>

        <div class="equipmentCard">
@@ -66,7 +60,7 @@
            <div class="downIcon iconfont">&#xe651; 2</div>
          </div>

          <img src="/images/manageCenter/任务总数.png" alt="" />
          <img src="/images/manageCenter/total1.png" alt="" />
        </div>
      </div>

@@ -117,9 +111,9 @@
            </div>
          </div>
        </div>
      </div>
      </div> -->

      <div class="performence">
      <!-- <div class="performence">
        <div class="title">设备运行状态监测</div>
        <div class="control">
          <div
@@ -208,13 +202,13 @@
          ></el-pagination>
        </div>
      </div>

 -->
      <div class="map">
        <div class="title">算法预警数据占比</div>
        <div class="title">设备地图分布</div>
        <div id="mapChart"></div>
      </div>

      <div class="hashRate">
      <!--  <div class="hashRate">
        <div class="left">
          <div class="title">算法预警数据占比:</div>
          <div class="info">
@@ -233,7 +227,7 @@
          <div class="title">算法预警数据占比</div>
          <div id="pieChart"></div>
        </div>
      </div>
      </div> -->
    </div>

    <!-- 页尾 -->
@@ -242,24 +236,24 @@
</template>

<script>
import IndexHeader from "@/components/IndexHeader";
import Footer from "@/components/Footer";
import * as echarts from "echarts";
import "echarts/map/js/china.js";
import IndexHeader from "@/components/IndexHeader"
import Footer from "@/components/Footer"
import * as echarts from "echarts"
import "echarts/map/js/china.js"

export default {
  components: {
    IndexHeader,
    Footer,
    Footer
  },
  created() {
    this.getInfo();
    this.getInfo()
  },
  mounted() {
    this.initBar();
    this.initMap();
    this.initScatter();
    this.initPie();
    //  this.initBar();
    this.initMap()
    //  this.initScatter();
    //   this.initPie();
  },
  data() {
    return {
@@ -270,21 +264,35 @@
      productList: [
        {
          name: "设备管理",
          icon: "/images/manageCenter/设备管理.png",
          path: "/equipmentManagement",
          icon: "/images/manageCenter/manage.png",
          openPath: "/equipmentManagement",
          path: "/equipmentList",
          permission: "deviceMng"
        },

        {
          name: "算力管理",
          icon: "/images/manageCenter/算力管理.png",
          path: "/hashrate",
          icon: "/images/manageCenter/manage2.png",
          openPath: "/hashrate",
          path: "/hashrateDetail",
          permission: "analysisMng"
        },

        {
          name: "统计查询",
          icon: "/images/manageCenter/算力管理.png",
          path: "/",
          icon: "/images/manageCenter/search.png",
          openPath: "/searchOpen",
          path: "/search",
          permission: "statisticMng"
        },

        {
          name: "告警管理",
          icon: "/images/manageCenter/manage2.png",
          openPath: "/report",
          path: "/report",
          permission: "statisticMng"
        }
      ],
      timeList: [
        { name: "20.103服务器", time: "9天12小时44分39秒" },
@@ -297,7 +305,7 @@
        { name: "20.103服务器", time: "9天12小时44分39秒" },
        { name: "20.103服务器", time: "9天12小时44分39秒" },
        { name: "20.103服务器", time: "9天12小时44分39秒" },
        { name: "20.103服务器", time: "9天12小时44分39秒" },
        { name: "20.103服务器", time: "9天12小时44分39秒" }
      ],
      barOption: {
        legend: {
@@ -305,7 +313,7 @@
          y: "top",
          itemHeight: 12,
          itemWidth: 12,
          icon: "circle",
          icon: "circle"
        },
        tooltip: {},
        dataset: {
@@ -322,37 +330,37 @@
            ["16:00", 850, 30],
            ["18:00", 980, 0],
            ["20:00", 750, 130],
            ["22:00", 750, 130],
          ],
            ["22:00", 750, 130]
          ]
        },
        xAxis: {
          type: "category",
          axisTick: {
            show: false,
            show: false
          },
          axisLabel: {
            color: "#666",
          },
            color: "#666"
          }
        },
        yAxis: {
          axisTick: {
            show: false,
            show: false
          },
          axisLine: {
            //y轴
            show: false,
            show: false
          },
          axisLabel: {
            color: "#666",
            color: "#666"
          },
          splitLine: {
            //网格线
            lineStyle: {
              color: "rgb(230, 230, 230)",
              type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
              type: "dashed" //设置网格线类型 dotted：虚线   solid:实线
            },
            show: true, //隐藏或显示
          },
            show: true //隐藏或显示
          }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
@@ -369,22 +377,22 @@
                {
                  offset: 0,
                  color: "#0066FF", // 0% 处的颜色
                  radius: ["50%", "80%"],
                  radius: ["50%", "80%"]
                },
                {
                  offset: 1,
                  color: "rgba(0, 102, 255, 0.25)", // 100% 处的颜色
                },
                  color: "rgba(0, 102, 255, 0.25)" // 100% 处的颜色
                }
              ],
              global: false, // 缺省为 false
              global: false // 缺省为 false
            },
            itemStyle: {
              //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
              normal: {
                //柱形图圆角，初始化效果
                barBorderRadius: [15, 15, 0, 0],
              },
            },
                barBorderRadius: [15, 15, 0, 0]
              }
            }
          },
          {
            type: "bar",
@@ -398,55 +406,55 @@
                {
                  offset: 0,
                  color: "#FF4B33", // 0% 处的颜色
                  radius: ["50%", "80%"],
                  radius: ["50%", "80%"]
                },
                {
                  offset: 1,
                  color: "rgba(255,75,51,0.25)", // 100% 处的颜色
                },
                  color: "rgba(255,75,51,0.25)" // 100% 处的颜色
                }
              ],
              global: false, // 缺省为 false
              global: false // 缺省为 false
            },
            itemStyle: {
              //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
              normal: {
                //柱形图圆角，初始化效果
                barBorderRadius: [15, 15, 0, 0],
              },
            },
          },
        ],
                barBorderRadius: [15, 15, 0, 0]
              }
            }
          }
        ]
      },
      mapOption: {
        visualMap: {
          left: "right",
          min: 0,
          max: 100,
          max: 10,
          inRange: {
            color: ["#FCFDFF", "#0065FF"],
            color: ["#FCFDFF", "#0065FF"]
          },
          itemWidth: 56,
          itemHeight: 200,
          text: ["100", "0"],
          calculable: false,
          text: ["10", "0"],
          calculable: false
        },
        geo: {
          //中国地图设置
          map: "china",
          scaleLimit: {
            min: 1,
            max: 2,
            max: 2
          },
          zoom: 1,
          top: 120,
          label: {
            normal: {
              show: false,
              show: false
            },
            emphasis: {
              show: false,
            },
          },
              show: false
            }
          }
        },
        tooltip: {
          //显示悬浮窗口
@@ -454,12 +462,12 @@
          backgroundColor: "#FFFFFF",
          textStyle: {
            color: "#0064FF",
            fontSize: "14",
            fontSize: "14"
          },
          formatter: function (params) {
            const msg = params.data.name + ":" + params.data.value;
            return msg;
          },
          formatter: function(params) {
            const msg = params.data.name + ":" + params.data.value
            return msg
          }
        },

        series: [
@@ -475,182 +483,182 @@
                import: 10,
                compare: 10,
                common: 40,
                specail: 20,
                specail: 20
              },
              {
                name: "北京",
                value: 99,
                value: 0
              },
              {
                name: "天津",
                value: 26,
                value: 0
              },
              {
                name: "上海",
                value: 44,
                value: 0
              },
              {
                name: "重庆",
                value: 0,
                value: 0
              },
              {
                name: "河北",
                value: 0,
                value: 0
              },
              {
                name: "河南",
                value: 0,
                value: 0
              },
              {
                name: "云南",
                value: 55,
                value: 0
              },
              {
                name: "辽宁",
                value: 19,
                value: 0
              },
              {
                name: "黑龙江",
                value: 0,
                value: 0
              },
              {
                name: "湖南",
                value: 0,
                value: 0
              },
              {
                name: "安徽",
                value: 60,
                value: 0
              },
              {
                name: "山东",
                value: 39,
                value: 4
              },
              {
                name: "新疆",
                value: 4,
                value: 0
              },
              {
                name: "江苏",
                value: 0,
                value: 0
              },
              {
                name: "浙江",
                value: 0,
                value: 0
              },
              {
                name: "江西",
                value: 36,
                value: 0
              },
              {
                name: "湖北",
                value: 52,
                value: 0
              },
              {
                name: "广西",
                value: 0,
                value: 0
              },
              {
                name: "甘肃",
                value: 7,
                value: 0
              },
              {
                name: "山西",
                value: 5,
                value: 0
              },
              {
                name: "内蒙古",
                value: 0,
                value: 0
              },
              {
                name: "陕西",
                value: 22,
                value: 0
              },
              {
                name: "吉林",
                value: 4,
                value: 0
              },
              {
                name: "福建",
                value: 18,
                value: 0
              },
              {
                name: "贵州",
                value: 5,
                value: 0
              },
              {
                name: "广东",
                value: 98,
                value: 0
              },
              {
                name: "青海",
                value: 1,
                value: 0
              },
              {
                name: "西藏",
                value: 0,
                value: 0
              },
              {
                name: "四川",
                value: 44,
                value: 0
              },
              {
                name: "宁夏",
                value: 4,
                value: 0
              },
              {
                name: "海南",
                value: 22,
                value: 0
              },
              {
                name: "台湾",
                value: 3,
                value: 0
              },
              {
                name: "香港",
                value: 5,
                value: 0
              },
              {
                name: "澳门",
                value: 555,
              },
            ],
          },
        ],
                value: 0
              }
            ]
          }
        ]
      },
      scatterOption: {
        xAxis: {
          axisTick: {
            show: false,
            show: false
          },
          axisLine: {
            //y轴
            show: false,
            show: false
          },
          splitLine: {
            //网格线
            lineStyle: {
              color: "rgb(230, 230, 230)",
              type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
              type: "dashed" //设置网格线类型 dotted：虚线   solid:实线
            },
            show: true, //隐藏或显示
          },
            show: true //隐藏或显示
          }
        },
        yAxis: {
          axisTick: {
            show: false,
            show: false
          },
          axisLine: {
            //y轴
            show: false,
            show: false
          },
          splitLine: {
            //网格线
            lineStyle: {
              color: "rgb(230, 230, 230)",
              type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
              type: "dashed" //设置网格线类型 dotted：虚线   solid:实线
            },
            show: true, //隐藏或显示
          },
            show: true //隐藏或显示
          }
        },

        series: [
@@ -678,12 +686,12 @@
              [12.0, 6.26],
              [12.0, 8.84],
              [7.08, 5.82],
              [5.02, 5.68],
              [5.02, 5.68]
            ],
            color: "rgba(0, 101, 255, 0.5)",
            type: "scatter",
          },
        ],
            type: "scatter"
          }
        ]
      },
      pieOption: {
        color: [
@@ -692,7 +700,7 @@
          "rgb(255, 178, 36)",
          "rgb(0, 190, 231)",
          "rgb(255, 124, 31)",
          "rgb(165, 96, 255)",
          "rgb(165, 96, 255)"
        ],
        series: [
          {
@@ -702,7 +710,7 @@
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
              borderRadius: 8
            },
            data: [
              { value: 22.45, name: "离岗" },
@@ -710,10 +718,10 @@
              { value: 17.96, name: "车辆识别" },
              { value: 15.71, name: "睡岗" },
              { value: 12.86, name: "安全帽检测" },
              { value: 10.82, name: "个体静止" },
            ],
          },
        ],
              { value: 10.82, name: "个体静止" }
            ]
          }
        ]
      },
      dataList: [
        {
@@ -722,7 +730,7 @@
          mem: "78%",
          gpu: "60%",
          cpu: "23%",
          dist: "10%",
          dist: "10%"
        },
        {
          name: "2.154",
@@ -730,7 +738,7 @@
          mem: "78%",
          gpu: "60%",
          cpu: "23%",
          dist: "10%",
          dist: "10%"
        },
        {
          name: "2.154",
@@ -738,7 +746,7 @@
          mem: "78%",
          gpu: "60%",
          cpu: "23%",
          dist: "10%",
          dist: "10%"
        },
        {
          name: "2.154",
@@ -746,7 +754,7 @@
          mem: "78%",
          gpu: "60%",
          cpu: "23%",
          dist: "10%",
          dist: "10%"
        },
        {
          name: "2.154",
@@ -754,7 +762,7 @@
          mem: "78%",
          gpu: "60%",
          cpu: "23%",
          dist: "10%",
          dist: "10%"
        },
        {
          name: "2.154",
@@ -762,7 +770,7 @@
          mem: "78%",
          gpu: "60%",
          cpu: "23%",
          dist: "10%",
          dist: "10%"
        },
        {
          name: "2.154",
@@ -770,7 +778,7 @@
          mem: "78%",
          gpu: "60%",
          cpu: "23%",
          dist: "10%",
          dist: "10%"
        },
        {
          name: "2.154",
@@ -778,84 +786,102 @@
          mem: "78%",
          gpu: "60%",
          cpu: "23%",
          dist: "10%",
        },
          dist: "10%"
        }
      ],
      page: 1,
      size: 5,
      total: 30,
    };
      total: 30
    }
  },
  methods: {
    getInfo() {
      if (sessionStorage.getItem("userInfo")) {
        this.userName = JSON.parse(sessionStorage.getItem("userInfo")).username;
        this.userName = JSON.parse(sessionStorage.getItem("userInfo")).username
      }

      let date = new Date();
      let year = date.getFullYear(); //获取完整的年份(4位)
      let month = date.getMonth() + 1; //获取当前月份(0-11,0代表1月)
      let day = date.getDate(); //获取当前月份(0-11,0代表1月)
      let weekDay = "";
      let date = new Date()
      let year = date.getFullYear() //获取完整的年份(4位)
      let month = date.getMonth() + 1 //获取当前月份(0-11,0代表1月)
      let day = date.getDate() //获取当前月份(0-11,0代表1月)
      let weekDay = ""
      switch (date.getDay()) {
        case 0:
          weekDay = "星期日";
          break;
          weekDay = "星期日"
          break

        case 1:
          weekDay = "星期一";
          break;
          weekDay = "星期一"
          break

        case 2:
          weekDay = "星期二";
          break;
          weekDay = "星期二"
          break

        case 3:
          weekDay = "星期三";
          break;
          weekDay = "星期三"
          break

        case 4:
          weekDay = "星期四";
          break;
          weekDay = "星期四"
          break

        case 5:
          weekDay = "星期五";
          break;
          weekDay = "星期五"
          break

        case 6:
          weekDay = "星期六";
          break;
          weekDay = "星期六"
          break
      }
      this.timeMsg =
        "今日, " + year + "年" + month + "月" + day + "日" + weekDay;
      this.timeMsg = "今日, " + year + "年" + month + "月" + day + "日" + weekDay
    },
    select(value, type) {
      this[type] = value;
      this[type] = value
    },
    initBar() {
      let bartDom = document.getElementById("bar");
      let myChart = echarts.init(bartDom);
      myChart.setOption(this.barOption);
      let bartDom = document.getElementById("bar")
      let myChart = echarts.init(bartDom)
      myChart.setOption(this.barOption)
    },
    initMap() {
      let mapDom = document.getElementById("mapChart");
      let myChart = echarts.init(mapDom);
      myChart.setOption(this.mapOption);
      let mapDom = document.getElementById("mapChart")
      let myChart = echarts.init(mapDom)
      myChart.setOption(this.mapOption)
    },
    initScatter() {
      let scatterDom = document.getElementById("scatterChart");
      let myChart = echarts.init(scatterDom);
      myChart.setOption(this.scatterOption);
      let scatterDom = document.getElementById("scatterChart")
      let myChart = echarts.init(scatterDom)
      myChart.setOption(this.scatterOption)
    },
    initPie() {
      let pieDom = document.getElementById("pieChart");
      let myChart = echarts.init(pieDom);
      myChart.setOption(this.pieOption);
      let pieDom = document.getElementById("pieChart")
      let myChart = echarts.init(pieDom)
      myChart.setOption(this.pieOption)
    },
    jump(route) {
      const userInfo = JSON.parse(sessionStorage.getItem("userInfo"))

      const val = userInfo.permissions.find((item) => {
        return item == route.permission
      })
      if (val) {
        if (route.path === "/search") {
          const { href } = this.$router.resolve({
            path: "/search"
          })
          window.open(href, "_blank")
          return
        }
        this.$router.push(route.path)
      } else if (!userInfo.parentId) {
        this.$router.push(route.openPath)
      }
    },
    refrash() {},
    handleSizeChange() {},
  },
};
    handleSizeChange() {}
  }
}
</script>

<style lang="scss" scoped>
@@ -1007,43 +1033,19 @@
      }

      &:nth-child(1) {
        background: linear-gradient(
          108deg,
          #0065ff -8%,
          #0065ff -8%,
          #99cfff 100%,
          #99cfff 100%
        );
        background: linear-gradient(108deg, #0065ff -8%, #0065ff -8%, #99cfff 100%, #99cfff 100%);
      }

      &:nth-child(2) {
        background: linear-gradient(
          108deg,
          #ff6a00 0%,
          #ff6a00 0%,
          #ffb599 100%,
          #ffb599 100%
        );
        background: linear-gradient(108deg, #ff6a00 0%, #ff6a00 0%, #ffb599 100%, #ffb599 100%);
      }

      &:nth-child(3) {
        background: linear-gradient(
          108deg,
          #6d44e5 1%,
          #6d44e5 1%,
          #b299ff 100%,
          #b299ff 100%
        );
        background: linear-gradient(108deg, #6d44e5 1%, #6d44e5 1%, #b299ff 100%, #b299ff 100%);
      }

      &:nth-child(4) {
        background: linear-gradient(
          108deg,
          #40b63a 0%,
          #40b63a 0%,
          #89e5bc 100%,
          #89e5bc 100%
        );
        background: linear-gradient(108deg, #40b63a 0%, #40b63a 0%, #89e5bc 100%, #89e5bc 100%);
      }
    }
  }
@@ -1209,7 +1211,7 @@

      .item {
        display: flex;
        justify-content: end;
        justify-content: flex-end;
        align-items: center;

        .label {
@@ -1226,4 +1228,4 @@
    }
  }
}
</style>
</style>