新增综合报警首页

src/components/windDetail/index.vue

@@ -412,8 +412,59 @@ export default {
       otherInfo: {},
       partAInfo: [],
       partDInfo: [],
-      partAInfos: [],
-      partDInfos: [],
+      partAInfos: [
+        [
+            {
+                "name": "AI值1",
+                "value": 10.2,
+                "valueUnit": "%"
+            },
+            {
+                "name": "AI值2",
+                "value": 23.4,
+                "valueUnit": "%"
+            },
+            {
+                "name": "AI值3",
+                "value": 32.5,
+                "valueUnit": "%"
+            },
+            {
+                "name": "AI值4",
+                "value": 54.5,
+                "valueUnit": "%"
+            },
+            {
+                "name": "AI值5",
+                "value": 14.5,
+                "valueUnit": "%"
+            },
+        ]
+      ],
+      partDInfos: [
+        [
+            {
+                "name": "DI值1",
+                "value": 10.2
+            },
+            {
+                "name": "DI值2",
+                "value": 23.4
+            },
+            {
+                "name": "DI值3",
+                "value": 32.5
+            },
+            {
+                "name": "DI值4",
+                "value": 54.5
+            },
+            {
+                "name": "DI值5",
+                "value": 14.5
+            },
+        ]
+      ],
       uniformcodesA: [],
       uniformcodesD: [],
       resA: [],

src/permission.js

@@ -1,12 +1,12 @@
 import router from "./router";
-import { getCookie } from "@/utills/auth"; // getToken from cookie
+import { getCookie,removeToken } from "@/utills/auth"; // getToken from cookie
 import { Base64 } from "js-base64";
 const whiteList = ["/login", "/logout"]; // 不重定向白名单
 import store from "@/store";
 router.beforeEach((to, from, next) => {
   if (getCookie("authToken")) {
-    if (to.path == "/login") {
-      next({ path: "/home" });
+    if (to.path == "/login" || to.path == "/") {
+      next({ path: "/integratedAlarm" });
     } else {
       next();
       //   if (store.getters.roles.length === 0) {

src/views/SandTable/SandTable.vue

@@ -1,11 +1,12 @@
 <template>
-    <div style="width: 100%;height:100%;padding: 0 10px;">
+<!-- padding: 0 10px; -->
+    <div style="width: 100%;height:100%;">
         <div class="sand-table" id="sandTable" v-if="$route.path === '/integratedAlarm'">
-            <img :src="require('@/assets/png/3dback.png')" class="i3dback" />
             <!-- <img :src="require('@assets/png/3dcloud.png')" class="i3dcloud" /> -->
             <StBack></StBack>
             <ThreeModel1 class="three-model-layer" :data="mapSource" @when="when" @clickMapItem="clickMapItem">
             </ThreeModel1>
+            <!-- <img :src="require('@/assets/png/3dback.png')" class="i3dback" /> -->
              <!-- v-if="showPanel" -->
             <!-- 第一机组 -->
             <div class="sand-table-left">
@@ -58,7 +59,8 @@
                         </div>
                     </template>
                     <template v-slot:default>
-                        <RadarPieChartCom height="18vh" :list="probChartData" title="故障情况" />
+                        <!-- <RadarPieChartCom height="18vh" :list="probChartData" title="故障情况" /> -->
+                        <RadarPieChart height="18vh" :list="probChartData" :title="probPC ? '故障频次情况' : '故障时长情况'" />
                     </template>
                 </PanelSandToolbar>
             </div>
@@ -115,7 +117,8 @@
                         </div>
                     </template>
                     <template v-slot:default>
-                        <RadarPieChartCom height="18vh" :list="probChartData" title="故障情况" style="cursor: pointer" />
+                        <!-- <RadarPieChartCom height="18vh" :list="probChartData" title="故障情况" style="cursor: pointer" /> -->
+                        <RadarPieChart height="18vh" :list="probChartData" :title="probPC ? '故障频次情况' : '故障时长情况'" />
                     </template>
                 </PanelSandToolbar>
             </div>
@@ -149,20 +152,17 @@
                         
                     </div>
                 </template>
-                <div class="allMsg">
-                    <div class="warnLine">
-                        <div
-                        id="problem3"
-                        class="cur"
-                        style="width: 100%; height: 100%"
-                        ></div>
-                    </div>
-                    <div class="warnPie">
-                        <div
-                        id="problem4"
-                        class="cur"
-                        style="width: 100%; height: 100%"
-                        ></div>
+                <div class="allStyle">
+                    <div class="allMain" v-for="it in 30" :key="it">
+                        <span class="mainTit">2025-01-{{it}}</span>
+                        <div class="allMsg">
+                            <div class="warnLine">
+                                <RadarLineChartCom width="45vw" height="50vh" :xAxis="problem3.xAxis" :series="problem3.series" />
+                            </div>
+                            <div class="warnPie">
+                                <RadarPieChartCom width="30vw" height="50vh" :list="probChartData" title="非停时长占比" style="cursor: pointer" />
+                            </div>
+                        </div>
                     </div>
                 </div>
                 <!-- <template #footer>
@@ -232,6 +232,7 @@
     import Ppanel from "./component/p-panel.vue";
     import RadarPieChart from "@com/chart/pie/radar-pie-chart.vue";
     import RadarPieChartCom from "./component/radar-pie-chart.vue";
+    import RadarLineChartCom from "./component/radar-line-chart.vue";
     import DoubleLineChart from "@com/chart/line/double-line-chart.vue";
     import Col from "@com/coms/grid/col.vue";
     import Row from "@com/coms/grid/row.vue";
@@ -264,7 +265,8 @@
             SvgIcon,
             hlsVideo,
             weatherDialog,
-            RadarPieChartCom
+            RadarPieChartCom,
+            RadarLineChartCom
         },
         // 数据
         data() {
@@ -272,7 +274,7 @@
             return {
                 problem1: null,
                 problem2: null,
-                problem3: null,
+                problem3: {},
                 videoShow: true,
                 showPanel: false,
                 bjSwitch: false,
@@ -1169,199 +1171,34 @@
                 let that = this
                 // 72小时功率曲线
                 if (res.data["72time"] && res.data["72time"].length > 0) {
-                let xAxis = [];
-                let seriesSpeed = [];
-                let seriesGl = []
-                res.data["72time"].forEach((it) => {
-                    xAxis.push(dayjs(it.time).format("MM-DD HH:mm"));
-                    seriesSpeed.push(it.speed);
-                    seriesGl.push(it.expectedpower);
-                });
-                let series = [
-                    {
-                        name: "故障次数",
-                        data: seriesSpeed,
-                        type: "line",
-                        symbol: "none",
-                    },
-                    {
-                        name: "故障时长",
-                        data: seriesGl,
-                        yAxisIndex: 1,
-                        type: "line",
-                        symbol: "none",
-                    },
-                ];
-                that.$nextTick(() =>{
-                     that.getPowerLine3(
-                        xAxis,
-                        series,
-                        "problem3"
-                    );
-                    that.getPowerPie4(
-                        "problem4"
-                    );
-                })
-               
-                }
-            },
-            getPowerLine3(
-                xAxis,
-                series,
-                name
-                ) {
-                let myChart;
-
-                let option = {
-                    title: {
-                        text: "故障次数时长",
-                        left: "5px",
-                        top: "5px",
-                        textStyle: {
-                            fontSize: "16",
-                            fontWeight: 400,
-                            color: "#fff",
-                        },
-                    },
-                    tooltip: {
-                    trigger: "axis",
-                    },
-                    color: ["#7981AF", "#1C99FF", "#E57F25", "#f25656"],
-                    legend: {
-                        right: "25",
-                        top: "5",
-                        itemWidth: 5,
-                        itemHeight: 5,
-                        data: ["故障次数", "故障时长"],
-                        textStyle: {
-                            color: "#fff",
-                        },
-                    },
-                    xAxis: {
-                    type: "category",
-                    boundaryGap: false,
-                    data: xAxis,
-                    axisLine: {
-                        lineStyle: {
-                        color: "#fff", // 修改为需要的颜色
-                        },
-                    },
-                    },
-                    yAxis: [
-                    {
-                        type: "value",
-                        splitLine: {
-                        lineStyle: {
-                            color: "#ccc",
-                            type: "dashed", // 修改为虚线
-                            opacity: 0.2,
-                        },
-                        },
-                        name: "单位：次",
-                        axisLine: {
-                        lineStyle: {
-                            color: "#fff",
-                        },
-                        },
-                        axisLabel: {
-                        formatter(value) {
-                            return parseFloat(value.toFixed(1));
-                        },
-                        },
-                    },
-                    {
-                        type: "value",
-                        splitLine: {
-                        lineStyle: {
-                            color: "#ccc",
-                            type: "dashed", // 修改为虚线
-                            opacity: 0.2,
-                        },
-                        },
-                        name: "单位：时长",
-                        axisLine: {
-                        lineStyle: {
-                            color: "#fff",
-                        },
-                        },
-                        axisLabel: {
-                        formatter(value) {
-                            return parseFloat(value.toFixed(1));
-                        },
-                        },
-                    },
-                    ],
-                    series: series,
-                };
-                // 基于准备好的dom，初始化echarts实例
-                let dom = document.getElementById(name);
-                dom && dom.removeAttribute("_echarts_instance_");
-
-                myChart = this.$echarts.init(dom);
-                this.problem3 = myChart;
-
-                myChart.setOption(option);
-
-                window.addEventListener("resize", () => {
-                    myChart.resize();
-                });
-            },
-            getPowerPie4(name) {
-                let option = {
-                    backgroundColor: "",
-                    title: {
-                        text: "非停时长占比",
-                        left: "5px",
-                        top: "5px",
-                        textStyle: {
-                            fontSize: "16",
-                            fontWeight: 400,
-                            color: "#fff",
-                        },
-                    },
-                    tooltip: {
-                        trigger: 'item'
-                    },
-                    legend: {
-                        right: "25",
-                        top: "5",
-                        itemWidth: 5,
-                        itemHeight: 5,
-                        textStyle: {
-                            color: "#fff",
+                    let xAxis = [];
+                    let seriesSpeed = [];
+                    let seriesGl = []
+                    res.data["72time"].forEach((it) => {
+                        xAxis.push(dayjs(it.time).format("MM-DD HH:mm"));
+                        seriesSpeed.push(it.speed);
+                        seriesGl.push(it.expectedpower);
+                    });
+                    let series = [
+                        {
+                            name: "故障次数",
+                            data: seriesSpeed,
+                            type: "line",
+                            symbol: "none",
                         },
-                    },
-                    series: [
                         {
-                        name: '非停时长',
-                        type: 'pie',
-                        radius: '50%',
-                        data: [
-                            { value: 1048, name: '其他他故障' },
-                            { value: 735, name: '机械故障' },
-                            { value: 580, name: '电器故障' }
-                        ],
-                        // emphasis: {
-                        //     itemStyle: {
-                        //     shadowBlur: 10,
-                        //     shadowOffsetX: 0,
-                        //     shadowColor: 'rgba(0, 0, 0, 0.5)'
-                        //     }
-                        // }
-                        }
-                    ]
-                    };
-                // 基于准备好的dom，初始化echarts实例
-                let dom = document.getElementById(name);
-                dom && dom.removeAttribute("_echarts_instance_");
-
-                let myChart = this.$echarts.init(dom);
-
-                myChart.setOption(option);
-
-                window.addEventListener("resize", () => {
-                    myChart.resize();
-                });
+                            name: "故障时长",
+                            data: seriesGl,
+                            yAxisIndex: 1,
+                            type: "line",
+                            symbol: "none",
+                        },
+                    ];
+                    this.problem3 = {
+                        xAxis: xAxis,
+                        series: series
+                    }
+                }
             }
         },
         // 生命周期钩子
@@ -1419,6 +1256,7 @@
         // height: 91.667vh;
         height: 100%;
         position: relative;
+        background-image: url("../../assets/png/3dback.png");
 
         .i3dback {
             position: fixed;
@@ -1747,19 +1585,33 @@
         .el-overlay-dialog{
             .el-dialog{
                 .el-dialog__body{
-                    .allMsg{
-                        width: 100%;
-                        height: 500px;
-                        display: flex;
-                        .warnLine{
-                            width: 60%;
-                            height: 100%;
-                        } 
-                        .warnPie{
-                            width: 40%;
-                            height: 100%;
+                    .allStyle{
+                        max-height: 55vh;
+                        overflow: auto;
+                        .allMain{
+                            .mainTit{
+                                display: inline-block;
+                                margin-left: 10px;
+                                font-size: 20px;
+                                color: #fff;
+                                margin-bottom: 10px;
+                            }
+                            .allMsg{
+                                width: 100%;
+                                height: 500px;
+                                display: flex;
+                                .warnLine{
+                                    width: 60%;
+                                    height: 100%;
+                                } 
+                                .warnPie{
+                                    width: 40%;
+                                    height: 100%;
+                                }
+                            }
                         }
                     }
+                    
                 }
             }
         }

src/views/SandTable/component/dataBJJson.json

@@ -80,7 +80,7 @@
                 },
                 {
                     "code": "1002",
-                    "selsTime": "82.4",
+                    "selsTime": "71.4",
                     "stopHours": "9.9",
                     "isCloseName": "检修"
                 },
@@ -92,7 +92,7 @@
                 },
                 {
                     "code": "1004",
-                    "selsTime": "54.4",
+                    "selsTime": "17.4",
                     "stopHours": "15.9",
                     "isCloseName": "检修"
                 },

src/views/SandTable/component/radar-line-chart.vue

@@ -0,0 +1,155 @@
+<template>
+    <div class="chart" :id="id"></div>
+</template>
+
+<script>
+    import util from "@/helper/util.js";
+    import partten from "@/helper/partten.js";
+    import * as echarts from "echarts";
+
+    export default {
+        name: "radar-pie",
+        componentName: "radar-pie",
+        props: {
+            width: {
+                type: String,
+                default: "100%",
+            },
+            height: {
+                type: String,
+                default: "18.519vh",
+            },
+            title: {
+                type: String,
+                default: "title",
+            },
+            xAxis: {
+                type: Array,
+                default: () => []
+            },
+            series: {
+                type: Array,
+                default: () => []
+            }
+        },
+        data() {
+            return {
+                id: "",
+                chart: null,
+            };
+        },
+        computed: {},
+        methods: {
+            initChart() {
+                let option = {
+                    title: {
+                        text: "故障次数时长",
+                        left: "5px",
+                        top: "5px",
+                        textStyle: {
+                            fontSize: "16",
+                            fontWeight: 400,
+                            color: "#fff",
+                        },
+                    },
+                    tooltip: {
+                    trigger: "axis",
+                    },
+                    color: ["#7981AF", "#1C99FF", "#E57F25", "#f25656"],
+                    legend: {
+                        right: "25",
+                        top: "5",
+                        itemWidth: 5,
+                        itemHeight: 5,
+                        data: ["故障次数", "故障时长"],
+                        textStyle: {
+                            color: "#fff",
+                        },
+                    },
+                    xAxis: {
+                        type: "category",
+                        boundaryGap: false,
+                        data: this.xAxis,
+                        axisLine: {
+                            lineStyle: {
+                            color: "#fff", // 修改为需要的颜色
+                            },
+                        },
+                    },
+                    yAxis: [
+                    {
+                        type: "value",
+                        splitLine: {
+                        lineStyle: {
+                            color: "#ccc",
+                            type: "dashed", // 修改为虚线
+                            opacity: 0.2,
+                        },
+                        },
+                        name: "单位：次",
+                        axisLine: {
+                        lineStyle: {
+                            color: "#fff",
+                        },
+                        },
+                        axisLabel: {
+                        formatter(value) {
+                            return parseFloat(value.toFixed(1));
+                        },
+                        },
+                    },
+                    {
+                        type: "value",
+                        splitLine: {
+                        lineStyle: {
+                            color: "#ccc",
+                            type: "dashed", // 修改为虚线
+                            opacity: 0.2,
+                        },
+                        },
+                        name: "单位：时长",
+                        axisLine: {
+                        lineStyle: {
+                            color: "#fff",
+                        },
+                        },
+                        axisLabel: {
+                        formatter(value) {
+                            return parseFloat(value.toFixed(1));
+                        },
+                        },
+                    },
+                    ],
+                    series: this.series
+                };
+
+                this.chart.setOption(option);
+            },
+        },
+        created() {
+            this.id = "pie-chart-" + util.newGUID();
+        },
+        mounted() {
+            this.$el.style.width = this.width;
+            this.$el.style.height = this.height;
+            this.chart = echarts.init(this.$el);
+            this.initChart();
+        },
+        updated() {
+            this.initChart();
+        },
+        watch: {
+            "$store.state.themeName"() {
+                this.initChart();
+            },
+        },
+    };
+</script>
+
+<style lang="less">
+    .chart {
+        width: 100%;
+        height: 100%;
+        display: inline-block;
+    }
+</style>

src/views/SandTable/component/radar-pie-chart.vue

@@ -60,49 +60,207 @@
         methods: {
             initChart() {
                 let option = {
-                    backgroundColor: "",
-                    tooltip: {
-                        trigger: 'item'
+                    title: {
+                        text: this.title,
+                        left: "5px",
+                        top: "5px",
+                        textStyle: {
+                            fontSize: "16",
+                            fontWeight: 400,
+                            color: "#fff",
+                        },
                     },
-                    grid: {
-                        left: "10%",
+                    color: [
+                        "#3e73e9",
+                        "#4fa6e8",
+                        "#70d0f4",
+                        "#ffc149",
+                        "#ff7a87",
+                        "#70d0f4",
+                        "#cff4d8",
+                    ],
+                    tooltip: {
+                        trigger: "item",
+                        backgroundColor: this.$store.state.themeName === "dark" ?
+                            "rgba(0,0,0,0.4)" :
+                            "rgba(255,255,255,0.4)",
+                        borderColor: this.$store.state.themeName === "dark" ?
+                            partten.getColor("gray") :
+                            "#000",
+                        textStyle: {
+                            color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
+                            fontSize: util.vh(16),
+                        },
                     },
+                    // grid: {
+                    //     top: 8,
+                    //     left: 8,
+                    //     right: 8,
+                    //     bottom: 8,
+                    //     containLabel: true,
+                    // },
                     legend: {
-                        orient: 'vertical',
-                        right: "0",
-                        top: "5",
-                        itemWidth: 10,
-                        itemHeight: 10,
+                        icon: "circle",
+                        orient: "vertical",
+                        top: "center",
+                        right: 10,
+                        align: "left",
                         textStyle: {
-                            color: "#fff",
+                            color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
                         },
+                        itemGap: 8,
+                    },
+                    radar: {
+                        center: ["40%", "50%"],
+                        radius: "80%",
+                        startAngle: 90,
+                        splitNumber: 8,
+                        shape: "circle",
+                        splitArea: {
+                            areaStyle: {
+                                color: ["transparent"],
+                            },
+                        },
+                        axisLabel: {
+                            show: false,
+                            fontSize: 18,
+                            color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
+                            fontStyle: "normal",
+                            fontWeight: "normal",
+                        },
+                        axisLine: {
+                            show: true,
+                            lineStyle: {
+                                color: "#606769", //
+                            },
+                        },
+                        splitLine: {
+                            show: true,
+                            lineStyle: {
+                                color: "#606769", //
+                            },
+                        },
+                        indicator: [{
+                                name: "",
+                                max: 100,
+                            },
+                            {
+                                name: "",
+                                max: 100,
+                            },
+                            {
+                                name: "",
+                                max: 100,
+                            },
+                            {
+                                name: "",
+                                max: 100,
+                            },
+                            {
+                                name: "",
+                                max: 100,
+                            },
+                            {
+                                name: "",
+                                max: 100,
+                            },
+                            {
+                                name: "",
+                                max: 100,
+                            },
+                            {
+                                name: "",
+                                max: 100,
+                            },
+                            {
+                                name: "",
+                                max: 100,
+                            },
+                            {
+                                name: "",
+                                max: 100,
+                            },
+                            {
+                                name: "",
+                                max: 100,
+                            },
+                            {
+                                name: "",
+                                max: 100,
+                            },
+                            {
+                                name: "",
+                                max: 100,
+                            },
+                            {
+                                name: "",
+                                max: 100,
+                            },
+                            {
+                                name: "",
+                                max: 100,
+                            },
+                            {
+                                name: "",
+                                max: 100,
+                            },
+                            {
+                                name: "",
+                                max: 100,
+                            },
+                            {
+                                name: "",
+                                max: 100,
+                            },
+                            {
+                                name: "",
+                                max: 100,
+                            },
+                            {
+                                name: "",
+                                max: 100,
+                            },
+                            {
+                                name: "",
+                                max: 100,
+                            },
+                            {
+                                name: "",
+                                max: 100,
+                            },
+                            {
+                                name: "",
+                                max: 100,
+                            },
+                            {
+                                name: "",
+                                max: 100,
+                            },
+                        ],
                     },
                     series: [{
-                        name: '非停时长',
-                        type: 'pie',
-                        radius: '70%',
-                        center: ['30%', '50%'], // 左右偏移
-                        // data: [{
-                        //         value: 1048,
-                        //         name: '其他他故障'
-                        //     },
-                        //     {
-                        //         value: 735,
-                        //         name: '机械故障'
-                        //     },
-                        //     {
-                        //         value: 580,
-                        //         name: '电器故障'
-                        //     }
-                        // ],
+                        name: this.title,
+                        type: "pie",
+                        clockwise: false,
+                        startAngle: 90,
+                        radius: "70%",
+                        center: ["40%", "50%"],
+                        hoverAnimation: false,
+                        roseType: "radius", //area
                         data: this.list,
                         label: {
-                            show: false // 取消显示文字
+                            show: false,
                         },
                         labelLine: {
-                            show: false // 取消显示连线
-                        }
-                    }]
+                            normal: {
+                                length: 20,
+                                length2: 30,
+                                lineStyle: {
+                                    width: 1,
+                                },
+                            },
+                        },
+                    }, ],
                 };
 
                 this.chart.setOption(option);

src/views/SandTable/component/rank-table.vue

@@ -158,9 +158,15 @@
             rankcolSty(col, row) {
                 if (col.name === '状态') {
                     if (row[col.field] === '故障' || row[col.field] === '检修') {
-                        return 'rankcol0'
+                        if (row.selsTime > 72) {
+                            return 'rankcol0'
+                        } else if (row.selsTime > 24 && row.selsTime < 72) {
+                            return 'rankcol1'
+                        } else if (row.selsTime < 24) {
+                            return 'rankcol2'
+                        }
                     } else {
-                        return 'rankcol1'
+                        return 'rankcol3'
                     }
                 }
             },
@@ -276,8 +282,14 @@
         .rank .rankcol0 {
             color: #f56c6c;
         }
-
         .rank .rankcol1 {
+            color: #f5a16c;
+        }
+        .rank .rankcol2 {
+            color: #f5f36c;
+        }
+
+        .rank .rankcol3 {
             color: #05bb4c;
         }