添加告警推送页面

zhangzengfei

2022-08-04 c746bd5e7640a2e7d0c29134d23ee266d8e68a52

添加告警推送页面

 src/router/index.js

@@ -1,144 +1,122 @@
import Vue from "vue";
import VueRouter from "vue-router";
import Vue from "vue"
import VueRouter from "vue-router"

Vue.use(VueRouter);
Vue.use(VueRouter)

const routes = [
  {
    path: "/",
    name: "index",
    component: () => import(/* webpackChunkName: "about" */ "../views/index"),
    component: () => import(/* webpackChunkName: "about" */ "../views/index")
  },
  {
    path: "/register",
    name: "register",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/register"),
    component: () => import(/* webpackChunkName: "about" */ "../views/register")
  },
  {
    path: "/register/success",
    component: () =>
      import(
        /* webpackChunkName: "about" */ "../views/register/registerSuccess"
      ),
    component: () => import(/* webpackChunkName: "about" */ "../views/register/registerSuccess")
  },
  {
    path: "/register/resetPassword",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/register/resetPassword"),
    component: () => import(/* webpackChunkName: "about" */ "../views/register/resetPassword")
  },
  {
    path: "/login",
    name: "login",
    component: () => import(/* webpackChunkName: "about" */ "../views/login"),
    component: () => import(/* webpackChunkName: "about" */ "../views/login")
  },
  {
    path: "/equipmentManagement",
    name: "equipmentManagement",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/equipmentManagement"),
    component: () => import(/* webpackChunkName: "about" */ "../views/equipmentManagement")
  },
  {
    path: "/equipmentList",
    name: "equipmentList",
    component: () =>
      import(
        /* webpackChunkName: "about" */ "../views/equipmentManagement/equipmentList"
      ),
    component: () => import(/* webpackChunkName: "about" */ "../views/equipmentManagement/equipmentList")
  },
  {
    path: "/personalCenter",
    name: "personalCenter",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/personalCenter"),
    component: () => import(/* webpackChunkName: "about" */ "../views/personalCenter")
  },
  {
    path: "/equipmentDetail",
    name: "equipmentDetail",
    component: () =>
      import(
        /* webpackChunkName: "about" */ "../views/equipmentManagement/equipmentDetail"
      ),
    component: () => import(/* webpackChunkName: "about" */ "../views/equipmentManagement/equipmentDetail")
  },
  {
    path: "/algorithmDetail",
    name: "algorithmDetail",
    component: () =>
      import(
        /* webpackChunkName: "about" */ "../views/equipmentManagement/algorithmDetail"
      ),
    component: () => import(/* webpackChunkName: "about" */ "../views/equipmentManagement/algorithmDetail")
  },
  {
    path: "/search",
    name: "search",
    component: () => import(/* webpackChunkName: "about" */ "../views/search"),
    component: () => import(/* webpackChunkName: "about" */ "../views/search")
  },
  {
    path: "/searchOpen",
    name: "searchOpen",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/search/searchOpen"),
    component: () => import(/* webpackChunkName: "about" */ "../views/search/searchOpen")
  },
  {
    path: "/GB28181Open",
    name: "GB28181Open",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/GB28181/GB28181Open"),
    component: () => import(/* webpackChunkName: "about" */ "../views/GB28181/GB28181Open")
  },
  {
    path: "/GB28181",
    name: "GB28181",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/GB28181/index"),
    component: () => import(/* webpackChunkName: "about" */ "../views/GB28181/index")
  },
  {
    path: "/product",
    name: "product",
    component: () => import(/* webpackChunkName: "about" */ "../views/product"),
    component: () => import(/* webpackChunkName: "about" */ "../views/product")
  },
  {
    path: "/productDetail",
    name: "productDetail",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/productDetail"),
    component: () => import(/* webpackChunkName: "about" */ "../views/productDetail")
  },
  {
    path: "/trialCenter",
    name: "trialCenter",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/trialCenter"),
    component: () => import(/* webpackChunkName: "about" */ "../views/trialCenter")
  },
  {
    path: "/connectUs",
    name: "connectUs",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/connectUs"),
    component: () => import(/* webpackChunkName: "about" */ "../views/connectUs")
  },

  {
    path: "/hashrate",
    name: "hashrate",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/hashrate"),
    component: () => import(/* webpackChunkName: "about" */ "../views/hashrate")
  },
  {
    path: "/hashrateDetail",
    name: "hashrateDetail",
    component: () =>
      import(
        /* webpackChunkName: "about" */ "../views/hashrate/hashrateDetail"
      ),
    component: () => import(/* webpackChunkName: "about" */ "../views/hashrate/hashrateDetail")
  },
  {
    path: "/manageCenter",
    name: "manageCenter",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/manageCenter"),
    component: () => import(/* webpackChunkName: "about" */ "../views/manageCenter")
  },
];
  {
    path: "/report",
    name: "report",
    component: () => import(/* webpackChunkName: "about" */ "../views/report")
  }
]

const router = new VueRouter({
  routes,
});
  routes
})

export default router;
export default router

 src/views/manageCenter/index.vue

@@ -15,12 +15,7 @@
      <div class="products">
        <div class="title">全部产品</div>
        <div class="productList">
          <div
            class="productItem"
            v-for="(item, index) in productList"
            :key="index"
            @click="jump(item)"
          >
          <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>
@@ -241,22 +236,22 @@
</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.initMap()
    //  this.initScatter();
    //   this.initPie();
  },
@@ -272,7 +267,7 @@
          icon: "/images/manageCenter/manage.png",
          openPath: "/equipmentManagement",
          path: "/equipmentList",
          permission: "deviceMng",
          permission: "deviceMng"
        },

        {
@@ -280,7 +275,7 @@
          icon: "/images/manageCenter/manage2.png",
          openPath: "/hashrate",
          path: "/hashrateDetail",
          permission: "analysisMng",
          permission: "analysisMng"
        },

        {
@@ -288,16 +283,16 @@
          icon: "/images/manageCenter/search.png",
          openPath: "/searchOpen",
          path: "/search",
          permission: "statisticMng",
          permission: "statisticMng"
        },

        /*  {
          name: "GB28181",
          icon: "/images/manageCenter/search.png",
          openPath: "/GB28181Open",
          path: "/GB28181Open",
          permission: "statisticMng",
        }, */
        {
          name: "告警管理",
          icon: "/images/manageCenter/manage2.png",
          openPath: "/report",
          path: "/report",
          permission: "statisticMng"
        }
      ],
      timeList: [
        { name: "20.103服务器", time: "9天12小时44分39秒" },
@@ -310,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: {
@@ -318,7 +313,7 @@
          y: "top",
          itemHeight: 12,
          itemWidth: 12,
          icon: "circle",
          icon: "circle"
        },
        tooltip: {},
        dataset: {
@@ -335,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.
@@ -382,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",
@@ -411,24 +406,24 @@
                {
                  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: {
@@ -436,30 +431,30 @@
          min: 0,
          max: 10,
          inRange: {
            color: ["#FCFDFF", "#0065FF"],
            color: ["#FCFDFF", "#0065FF"]
          },
          itemWidth: 56,
          itemHeight: 200,
          text: ["10", "0"],
          calculable: false,
          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: {
          //显示悬浮窗口
@@ -467,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: [
@@ -488,182 +483,182 @@
                import: 10,
                compare: 10,
                common: 40,
                specail: 20,
                specail: 20
              },
              {
                name: "北京",
                value: 0,
                value: 0
              },
              {
                name: "天津",
                value: 0,
                value: 0
              },
              {
                name: "上海",
                value: 0,
                value: 0
              },
              {
                name: "重庆",
                value: 0,
                value: 0
              },
              {
                name: "河北",
                value: 0,
                value: 0
              },
              {
                name: "河南",
                value: 0,
                value: 0
              },
              {
                name: "云南",
                value: 0,
                value: 0
              },
              {
                name: "辽宁",
                value: 0,
                value: 0
              },
              {
                name: "黑龙江",
                value: 0,
                value: 0
              },
              {
                name: "湖南",
                value: 0,
                value: 0
              },
              {
                name: "安徽",
                value: 0,
                value: 0
              },
              {
                name: "山东",
                value: 4,
                value: 4
              },
              {
                name: "新疆",
                value: 0,
                value: 0
              },
              {
                name: "江苏",
                value: 0,
                value: 0
              },
              {
                name: "浙江",
                value: 0,
                value: 0
              },
              {
                name: "江西",
                value: 0,
                value: 0
              },
              {
                name: "湖北",
                value: 0,
                value: 0
              },
              {
                name: "广西",
                value: 0,
                value: 0
              },
              {
                name: "甘肃",
                value: 0,
                value: 0
              },
              {
                name: "山西",
                value: 0,
                value: 0
              },
              {
                name: "内蒙古",
                value: 0,
                value: 0
              },
              {
                name: "陕西",
                value: 0,
                value: 0
              },
              {
                name: "吉林",
                value: 0,
                value: 0
              },
              {
                name: "福建",
                value: 0,
                value: 0
              },
              {
                name: "贵州",
                value: 0,
                value: 0
              },
              {
                name: "广东",
                value: 0,
                value: 0
              },
              {
                name: "青海",
                value: 0,
                value: 0
              },
              {
                name: "西藏",
                value: 0,
                value: 0
              },
              {
                name: "四川",
                value: 0,
                value: 0
              },
              {
                name: "宁夏",
                value: 0,
                value: 0
              },
              {
                name: "海南",
                value: 0,
                value: 0
              },
              {
                name: "台湾",
                value: 0,
                value: 0
              },
              {
                name: "香港",
                value: 0,
                value: 0
              },
              {
                name: "澳门",
                value: 0,
              },
            ],
          },
        ],
                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: [
@@ -691,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: [
@@ -705,7 +700,7 @@
          "rgb(255, 178, 36)",
          "rgb(0, 190, 231)",
          "rgb(255, 124, 31)",
          "rgb(165, 96, 255)",
          "rgb(165, 96, 255)"
        ],
        series: [
          {
@@ -715,7 +710,7 @@
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
              borderRadius: 8
            },
            data: [
              { value: 22.45, name: "离岗" },
@@ -723,10 +718,10 @@
              { value: 17.96, name: "车辆识别" },
              { value: 15.71, name: "睡岗" },
              { value: 12.86, name: "安全帽检测" },
              { value: 10.82, name: "个体静止" },
            ],
          },
        ],
              { value: 10.82, name: "个体静止" }
            ]
          }
        ]
      },
      dataList: [
        {
@@ -735,7 +730,7 @@
          mem: "78%",
          gpu: "60%",
          cpu: "23%",
          dist: "10%",
          dist: "10%"
        },
        {
          name: "2.154",
@@ -743,7 +738,7 @@
          mem: "78%",
          gpu: "60%",
          cpu: "23%",
          dist: "10%",
          dist: "10%"
        },
        {
          name: "2.154",
@@ -751,7 +746,7 @@
          mem: "78%",
          gpu: "60%",
          cpu: "23%",
          dist: "10%",
          dist: "10%"
        },
        {
          name: "2.154",
@@ -759,7 +754,7 @@
          mem: "78%",
          gpu: "60%",
          cpu: "23%",
          dist: "10%",
          dist: "10%"
        },
        {
          name: "2.154",
@@ -767,7 +762,7 @@
          mem: "78%",
          gpu: "60%",
          cpu: "23%",
          dist: "10%",
          dist: "10%"
        },
        {
          name: "2.154",
@@ -775,7 +770,7 @@
          mem: "78%",
          gpu: "60%",
          cpu: "23%",
          dist: "10%",
          dist: "10%"
        },
        {
          name: "2.154",
@@ -783,7 +778,7 @@
          mem: "78%",
          gpu: "60%",
          cpu: "23%",
          dist: "10%",
          dist: "10%"
        },
        {
          name: "2.154",
@@ -791,103 +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 userInfo = JSON.parse(sessionStorage.getItem("userInfo"))

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

<style lang="scss" scoped>
@@ -1039,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%);
      }
    }
  }
@@ -1258,4 +1228,4 @@
    }
  }
}
</style>
</style>

 src/views/report/components/Banner.vue

New file
@@ -0,0 +1,55 @@
<template>
  <div class="Banner">
    <div class="heart">
      <div class="title">GB28181配置</div>
      <div class="des">支持国标服务，接入国标摄像机。</div>
      <div class="button" @click="jump">立即开通</div>
    </div>
  </div>
</template>

<script>
import { enableMenu } from "@/api/user";

export default {
  methods: {
    async jump() {
      /*  console.log(JSON.parse(sessionStorage.getItem("userInfo")).id);
      await enableMenu({
        userId: JSON.parse(sessionStorage.getItem("userInfo")).id,
        menuId: "89098e9f-baaa-4a69-9e9b-26444dd69ff6",
      }); */
      this.$router.push("/GB28181");
    },
  },
};
</script>

<style scoped lang="scss">
.Banner {
  overflow: hidden;
  height: 480px;
  background-image: url("/images/hashrate/banner.png");
  color: #fff;

  .title {
    margin: 122px 0 10px 0;
    font-size: 48px;
  }

  .des {
    margin-bottom: 82px;
    width: 560px;
    font-size: 16px;
    line-height: 24px;
  }

  .button {
    width: 160px;
    height: 56px;
    background: #0065ff;
    text-align: center;
    line-height: 56px;
  }
}
</style>

 src/views/report/components/DevList.vue

New file
@@ -0,0 +1,211 @@
<template>
  <div class="event-list">
    <div class="title">告警推送配置</div>
    <div class="empty" v-if="eventList.length === 0">
      <img src="/images/search/1.png" alt="" />
      <div class="des">您还未添加添加告警事件推送任务</div>
      <div class="button add" @click="showSettingBox = true">
        立即添加
      </div>
    </div>
    <div class="list scroll">
      <el-table :data="eventList" style="width: 100%">
        <el-table-column label="序号" width="180"> </el-table-column>
        <el-table-column label="事件名称" width="180"> </el-table-column>
        <el-table-column label="事件等级" width="180"> </el-table-column>
        <el-table-column label="关联区域" width="180"> </el-table-column>
        <el-table-column label="责任人" width="180"> </el-table-column>
        <el-table-column label="推送方式" width="180"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="devItem" v-for="(item, index) in clusterList" :key="index">
        <div class="mainInfo">
          <img src="/images/hashrate/cluster.png" alt="" />

          <div class="right">
            <div class="name">{{ item.cluster_name }}</div>
            <div class="ip">{{ item.virtual_ip }}</div>
            <div class="number">设备总量:{{ item.nodeNum }}</div>
          </div>

          <div class="button set" @click="setting({ clusterId: item.cluster_id }, item.nodeList)">
            配置
          </div>
        </div>
      </div>
      <div class="devItem" v-for="(item, index) in devList" :key="index + 'dev'">
        <div class="mainInfo">
          <img src="/images/hashrate/equipment.png" alt="" />

          <div class="right">
            <div class="name">{{ item.devName }}</div>
            <div class="ip">{{ item.devIp }}</div>
          </div>

          <div class="button set" @click="setting({ devId: item.devId })">
            配置
          </div>
        </div>
      </div> -->
    </div>

    <SettingBox v-if="showSettingBox" @close="showSettingBox = false" :id="idObj" :nodeList="nodeList"></SettingBox>
  </div>
</template>

<script>
import SettingBox from "@/views/report/components/SettingBox"
import { getClusterDevList } from "@/api/clusterManage"

export default {
  components: {
    SettingBox
  },
  created() {
    this.getClusterDevList()
  },
  data() {
    return {
      eventList: [],
      clusterList: [],
      devList: [],
      showSettingBox: false,
      idObj: {},
      nodeList: []
    }
  },
  methods: {
    async getClusterDevList() {
      const res = await getClusterDevList()
      if (res && res.success) {
        this.clusterList = res.data.clusterList
        this.devList = res.data.devList
      }
    },
    setting(id, nodeList) {
      this.idObj = id
      this.nodeList = nodeList ? nodeList : []
      this.showSettingBox = true
    },
    handleEdit(idx, row) {},
    handleDelete(idx, row) {}
  }
}
</script>

<style lang="scss" scoped>
.event-list {
  position: relative;
  box-sizing: border-box;
  padding: 20px;
  width: 1280px;
  height: 770px;
  background-color: #fff;
  margin: 0 auto;

  .title {
    margin-bottom: 20px;
    height: 20px;
    padding-left: 20px;
    font-weight: 700;
    font-size: 16px;
    border-left: 4px solid #0065ff;
  }

  .empty {
    text-align: center;

    img {
      width: 260px;
    }

    .des {
      margin-bottom: 30px;
      font-size: 14px;
    }

    .add {
      margin: 0 auto;
      width: 112px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      color: #fff;
      background-color: #0065ff;
    }
  }

  .list {
    display: flex;
    flex-wrap: wrap;
    overflow-y: auto;
    height: 710px;

    .devItem {
      position: relative;
      margin: 0 15px 20px 0;
      width: 295px;
      height: 150px;
      border: 1px solid #c0c5cc;
      border-radius: 5px;

      .mainInfo {
        display: flex;
        padding: 20px;

        img {
          margin-right: 20px;
          width: 88px;
        }
      }

      .right {
        .name {
          margin-bottom: 6px;
          font-size: 16px;
          font-weight: 700;
        }

        .ip,
        .number {
          margin-bottom: 2px;
          font-size: 12px;
          color: #666;
        }
      }

      .set {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border: 1px solid #c0c5cc;
        font-size: 16px;
        color: #0065ff;
      }

      &:nth-child(4n) {
        margin-right: 0;
      }

      &:hover {
        box-shadow: 0px 2px 16px 0px rgba(0, 43, 106, 0.25);

        .set {
          color: #fff;
          background-color: #0065ff;
          border-color: #0065ff;
        }
      }
    }
  }
}
</style>

 src/views/report/components/Flow.vue

New file
@@ -0,0 +1,68 @@
<template>
  <div class="Flow heart">
    <div class="title">算力管理的使用流程</div>

    <div class="flowList">
      <div class="flowItem" v-for="(item, index) in flowList" :key="index">
        <img :src="item.img" alt="" />
        <div class="flowTitle">{{ item.title }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flowList: [
        {
          img: "/images/search/1.png",
          title: "开通统计查询",
        },
        { img: "/images/search/3.png", title: "数据查看" },
        {
          img: "/images/search/2.png",
          title: "录像查看",
        },
        {
          img: "/images/search/4.png",
          title: "数据实时监控",
        },
      ],
    };
  },
};
</script>

<style scoped lang="scss">
.Flow {
  overflow: hidden;
  height: 540px;
  text-align: center;

  .title {
    margin: 60px 0;
    font-size: 28px;
    color: #3d3d3d;
  }

  .flowList {
    display: flex;

    .flowItem {
      width: 260px;
      margin-right: 80px;

      &:last-child {
        margin-right: 0;
      }

      .flowTitle {
        margin-top: 20px;
        font-size: 16px;
      }
    }
  }
}
</style>

 src/views/report/components/FormArea.vue

New file
@@ -0,0 +1,315 @@
<template>
  <div class="FormArea">
    <el-form
      :model="gb28181"
      :rules="rules"
      label-position="left"
      label-width="90px"
      class="alarmSetting"
      ref="gb28181"
    >
      <el-form-item class="selectItem" label="事件名称">
        <el-select class="h32" v-model="locationCity.province" size="small" placeholder="请选择事件">
          <el-option
            v-for="item in eventsOptions"
            :key="item.value"
            :label="item.label"
            size="small"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="selectItem" label="事件等级">
        <el-select
          class="h32"
          v-model="locationCity.level"
          size="small"
          placeholder="请选择"
          :disabled="gb28181.idType === 0"
        >
          <el-option
            v-for="item in levelOptions"
            :key="item.value"
            :label="item.label"
            size="small"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="关联区域">
        <el-input
          class="h32"
          v-model="gb28181.PublicId"
          placeholder="请输入"
          size="small"
          :disabled="gb28181.idType === 1"
        ></el-input>
      </el-form-item>

      <el-form-item label="责任人" prop="GbServerPort">
        <el-input
          class="h32"
          v-model.number="gb28181.GbServerPort"
          placeholder="请输入"
          size="small"
          style="width: 200px"
        ></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="GbServerPort">
        <el-input
          class="h32"
          v-model.number="gb28181.GbServerPort"
          placeholder="请输入"
          size="small"
          style="width: 200px"
        ></el-input>
      </el-form-item>

      <el-form-item label="推送方式">
        <el-input
          class="h32"
          v-model="gb28181.Password"
          placeholder="请输入"
          size="small"
          :disabled="!gb28181.IsAuth"
        ></el-input>
      </el-form-item>
    </el-form>

    <div class="btnArea">
      <div class="button cancel" @click="$emit('close')">取消</div>
      <div class="button submit" @click="submitGB28281">保存</div>
    </div>
  </div>
</template>

<script>
import { getGB28181Config, saveGB28181Config, getGb28181AreaList, newGb28181ID } from "@/api/Gb28181"
import { isPort, isIPv4 } from "@/scripts/validate"

export default {
  props: {
    id: {}
  },
  created() {
    this.initGB28181Conf()
  },
  data() {
    return {
      gb28181: {},
      rules: {
        ip: [
          {
            required: true,
            message: "请输入IP地址",
            trigger: "change"
          },
          { validator: isIPv4, trigger: "change" }
        ],
        ServerIp: [
          {
            required: true,
            message: "请输入IP地址",
            trigger: "change"
          },
          { validator: isIPv4, trigger: "change" }
        ],
        ServerPort: [
          {
            required: true,
            message: "请输入端口",
            trigger: "change"
          },
          { validator: isPort, trigger: "change" }
        ],
        GbServerPort: [
          {
            required: true,
            message: "请输入端口",
            trigger: "change"
          },
          { validator: isPort, trigger: "change" }
        ]
      },
      locationCity: {
        province: "",
        city: "",
        county: "",
        provinceOptions: [],
        cityOptions: [],
        countyOptions: []
      },
      eventsOptions: [
        { value: "fire", label: "明 火" },
        { value: "smoke", label: "烟 雾" },
        { value: "work", label: "未穿工服" },
        { value: "head", label: "未戴安全帽" },
        { value: "dowork", label: "离岗" },
        { value: "juji", label: "人员聚集" }
      ],
      levelOptions: [
        { value: "1", label: "一级" },
        { value: "2", label: "二级" },
        { value: "3", label: "三级" },
        { value: "4", label: "四级" },
        { value: "5", label: "五级" }
      ]
    }
  },
  methods: {
    initGB28181Conf() {
      getGB28181Config(this.id).then((rsp) => {
        if (rsp && rsp.success) {
          this.gb28181 = rsp.data
          //this.gb28181.idType = 0;

          this.$set(this.gb28181, "idType", 0)
          this.$refs["gb28181"].resetFields()
        }
      })
      getGb28181AreaList().then((rsp) => {
        if (rsp && rsp.success) {
          this.locationCity.provinceOptions = rsp.data.list
        }
      })
    },
    submitGB28281() {
      this.$refs["gb28181"].validate((valid) => {
        if (valid) {
          saveGB28181Config(this.gb28181).then((rsp) => {
            if (rsp && rsp.success) {
              console.log("1212112")
              this.$notify({
                type: "success",
                message: "GB28181设置保存成功"
              })
            }
          })
        } else {
          console.log("error submit!!")
          return false
        }
      })
    },
    changeProvince() {
      let pid = this.locationCity.province
      getGb28181AreaList({ parentId: pid }).then((rsp) => {
        if (rsp && rsp.success) {
          this.locationCity.cityOptions = rsp.data.list
          this.locationCity.city = this.locationCity.cityOptions[0].id
          this.changeCity()
        }
      })
    },
    changeCity() {
      let pid = this.locationCity.city
      getGb28181AreaList({ parentId: pid }).then((rsp) => {
        if (rsp && rsp.success) {
          this.locationCity.countyOptions = rsp.data.list
          this.locationCity.county = this.locationCity.countyOptions[0].id
        }
      })
    },
    newGBID() {
      let cCode = this.locationCity.county + ""
      newGb28181ID({ code: cCode }).then((rsp) => {
        if (rsp && rsp.success) {
          this.gb28181.PublicId = rsp.data.code
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.FormArea {
  position: relative;
  height: 565px;
  .el-form {
    padding: 20px;
    padding-top: 34px;

    .el-form-item {
      margin-bottom: 34px;
    }

    .h32 {
      border-radius: 3px;

      ::v-deep input {
        border-radius: 3px;
        border-color: #c0c5cc;
      }
    }

    .el-input {
      width: 410px;
    }

    .el-radio-group {
      margin-bottom: 34px;

      ::v-deep .el-radio__label {
        color: #3d3d3d;
      }
    }

    .selectItem ::v-deep {
      .el-form-item__content {
        display: flex;

        .el-select {
          margin-right: 10px;
          width: 200px;
        }

        .button {
          margin-left: 10px;
          line-height: 32px;
          color: #0065ff;
        }
      }
    }
  }

  .el-form-item.is-required {
    ::v-deep .el-form-item__label:before {
      display: none;
    }

    ::v-deep .el-form-item__label::after {
      content: "*";
      color: #f52323;
      margin-right: 4px;
    }
  }

  .btnArea {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px 0;
    border-top: 1px solid #e9ebee;
    display: flex;
    justify-content: flex-end;
    text-align: center;

    .cancel {
      margin-right: 10px;
      padding: 6px 16px;
      border: 1px solid #0065ff;
      color: #0065ff;
    }

    .submit {
      padding: 6px 16px;
      border: 1px solid #0065ff;
      color: #fff;
      background-color: #0065ff;
    }
  }
}
</style>

 src/views/report/components/SettingBox.vue

New file
@@ -0,0 +1,89 @@
<template>
  <div class="SettingBox" :class="{ large: activeTab === 2 }">
    <div class="title">事件推送配置</div>
    <div class="close iconfont" @click="$emit('close')">&#xe60f;</div>
    <div class="content">
      <FormArea :id="id" @close="$emit('close')" v-if="activeTab === 0"></FormArea>
    </div>
  </div>
</template>

<script>
import FormArea from "@/views/report/components/FormArea"

export default {
  components: {
    FormArea
  },
  props: {
    id: {},
    nodeList: {}
  },
  data() {
    return {
      activeTab: 0
    }
  }
}
</script>

<style lang="scss" scoped>
.SettingBox {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -354px;
  margin-left: -500px;
  width: 1000px;
  height: 708px;
  background-color: #fff;
  box-shadow: 0px 2px 16px 0px rgba(0, 43, 106, 0.25);
  z-index: 2;

  &.large {
    margin-top: -477px;
    margin-left: -719px;
    width: 1438px;
    height: 953px;
  }

  .title {
    box-sizing: border-box;
    padding: 20px;
    height: 64px;
    border-bottom: 1px solid #e9ebee;
    font-size: 18px;
    font-weight: 700;
  }

  .close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 12px;
    color: #666;
    cursor: pointer;
  }

  .content {
    padding: 20px;

    .tabs {
      display: flex;
      border-bottom: 1px solid #e9ebee;

      .tab {
        transform: translateY(1px);
        padding: 16px 24px;
        cursor: pointer;
        border-bottom: 2px solid rgba(255, 255, 255, 0);

        &.active {
          border-color: #0065ff;
          color: #0065ff;
        }
      }
    }
  }
}
</style>

 src/views/report/components/TableArea.vue

New file
@@ -0,0 +1,145 @@
<template>
  <div class="TableArea">
    <div class="content">
      <el-table
        :data="subDevTable"
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="80"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="名称"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="publicid"
          label="ID"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column prop="ip" label="IP"></el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <span
              :style="scope.row.alive ? `color:#36B24A` : 'color:#FF4B33;'"
              >{{ scope.row.alive ? "在线" : "离线" }}</span
            >
          </template>
        </el-table-column>
        <el-table-column prop="corp" label="备注"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getAllSubServer } from "@/api/Gb28181";

export default {
  props: {
    id: {},
  },
  created() {
    this.getList();
  },
  data() {
    return {
      subDevTable: [],
    };
  },
  methods: {
    async getList() {
      let params = {};
      if (this.id.clusterId) {
        params = {
          clusterId: this.id.clusterId,
          devId: "",
        };
      } else {
        params = {
          clusterId: "",
          devId: this.id.devId,
        };
      }
      const res = await getAllSubServer(params);
      if (res && res.success) {
        this.subDevTable = res.data;
      }
    },
  },
};
</script>

<style lang="scss" scoped >
.TableArea {
  padding: 30px 0;
  .content {
    height: 500px;
  }
  .el-table ::v-deep {
    background-color: rgb(233, 235, 238);
    padding: 1px;

    &::after {
      display: none;
    }

    td.index .cell {
      padding-left: 16px;
      padding-right: 4px;
    }

    .has-gutter tr th {
      background: #f0f3f5;
      font-size: 16px;
      color: #3d3d3d;
      font-weight: 700;
    }

    td .cell {
      color: #3d3d3d;
    }

    tr:hover > td.el-table__cell {
      background-color: #fff;
    }

    .el-table__row--striped .el-table__cell {
      background-color: #f0f5fa !important;
    }
    tr:hover > td.el-table__cell {
      background-color: #fff;
    }

    .el-table__row--striped .el-table__cell {
      background-color: #f0f5fa !important;
    }

    .status {
      color: #ff4b33;

      &.green {
        color: #36b24a;
      }
    }

    .option {
      margin-right: 10px;
      font-size: 24px;
      color: rgb(0, 101, 255);
      cursor: pointer;

      &.disable {
        color: #666;
        cursor: default;
      }
    }
  }
}
</style>

 src/views/report/index.vue

New file
@@ -0,0 +1,59 @@
<template>
  <div class="GB28181">
    <!-- 页头 -->
    <IndexHeader :opacity="false"></IndexHeader>
    <!-- 面包屑 -->
    <div class="heart">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/manageCenter' }">管理中心</el-breadcrumb-item>
        <el-breadcrumb-item>告警管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 主要内容 -->
    <DevList></DevList>

    <!-- 页尾 -->
    <Footer :isBlack="true"></Footer>
  </div>
</template>

<script>
import IndexHeader from "@/components/IndexHeader"
import DevList from "@/views/report/components/DevList"
// import SettingBox from "@/views/report/components/SettingBox"
import Footer from "@/components/Footer"

export default {
  components: {
    IndexHeader,
    DevList,
    // SettingBox,
    Footer
  }
}
</script>

<style lang="scss" scoped>
.GB28181 {
  background-color: rgb(243, 245, 248);
  position: relative;
  min-height: 100vh;

  .el-breadcrumb {
    margin-top: 48px;
    margin-bottom: 24px;

    ::v-deep span {
      color: #666;
    }
  }

  .Footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
  }
}
</style>