矩阵提醒一级页面开发及其接口联调

.env.development

@@ -16,7 +16,7 @@ VUE_APP_ALARM=http://10.220.1.5:6015
 
 
 # VUE_APP_API=http://10.220.1.5:6060
-VUE_APP_API=http://10.220.1.244:6060
+VUE_APP_API=http://10.220.1.245:6060
 
 
 VUE_APP_URL=https://10.220.1.5:5300

src/components/windDetail/index.vue

@@ -175,12 +175,19 @@
           >
             机舱信息
           </div>
-          <div
+          <!-- <div
             class="title-item part-right"
             :class="{ active: current === 'qt' }"
             @click="handleClick('qt')"
           >
             其他
+          </div> -->
+          <div
+            class="title-item part-right"
+            :class="{ active: current === 'zz' }"
+            @click="handleClick('zz')"
+          >
+            主轴
           </div>
         </div>
         <div class="part-imgs" v-if="otherInfo?.model == 'XE100-2000'">
@@ -305,29 +312,30 @@
             <div class="point point-right bottom"></div>
             <span style="font-size: 16px;position: relative;top: -5px;">故障分类</span>
             <div class="problemSeach">
-                <el-input v-model="inputcv" placeholder="请输入" />
-                <el-button
-                round
-                size="mini"
-                class="buttons"
-                @click="gerWxssl"
-                ><span class="button">搜索</span></el-button>
-                <el-button
-                round
-                size="mini"
-                class="buttons"
-                @click="gerWxssl"
-                ><span class="button">重置</span></el-button>
+                <el-input v-model="inputcv" clearable placeholder="请输入" />
+                <div class="seachBtn">
+                    <el-icon :size="18" :color="color">
+                        <Search />
+                    </el-icon>
+                </div>
             </div>
         </div>
         <div class="problemMain">
             <div class="problemWarn">
                 <div class="warn">
                     <div class="warnCom">
+                        <div class="circle-container">
+                            <svg class="circle-segment segment-1" viewBox="0 0 100 100">
+                                <circle cx="50" cy="50" r="40"></circle>
+                            </svg>
+                        </div>
                         <div class="warnComImg">
                             <img src="@/assets/imgs/danger.png" alt="">
                         </div>
-                        <div class="warnComNum"></div>
+                        <div class="warnComNum">
+                            <div class="numTop">42</div>
+                            <div class="numBot">总故障</div>
+                        </div>
                     </div>
                     <div class="warnItems" v-for="(it, index) in 7" :key="index">
                         <div class="warnItemLeft">20</div>
@@ -336,11 +344,41 @@
                 </div>
                 <div class="warn" v-for="(it, index) in 2" :key="index">
                     <div class="warnItems" v-for="(it, index) in 10" :key="index">
-                        <div class="warnItemLeft">20</div>
-                        <div class="warnItemRight">防雷保护类</div>
+                        <div class="warnItemLeft" :class="isRed(index)">20</div>
+                        <div class="warnItemRight" :class="isRed(index)">防雷保护类</div>
                     </div>
                 </div>
             </div>
+            <div class="warnTable">
+                <el-table
+                    size="mini"
+                    :data="tableData"
+                    style="width: 100%; height: calc(100% - 310px)"
+                    max-height="520px"
+                    stripe>
+                    <el-table-column
+                        v-for="item in tableHeader"
+                        :label="item.name"
+                        :prop="item.code"
+                        :key="item.code"
+                        :width="item.width || ''"
+                        show-overflow-tooltip
+                        header-align="center"
+                        align="center"
+                    >
+                    <template #default="scope">
+                        <span v-if="item.code == 'status'">
+                            <span :style="scope.row.status === 0 ? 'color: red' : ''">{{scope.row.status === 0 ? "异常" : "正常"}}</span>
+                        </span>
+                        <span v-else>
+                            {{
+                                scope.row[item.code] != "NULL" ? scope.row[item.code] : ""
+                            }}
+                        </span>
+                    </template>
+                    </el-table-column>
+                </el-table>
+            </div>
         </div>
     </div>
     <alarmDialog ref="alarmDialog" />
@@ -395,6 +433,124 @@ export default {
             name: "防雷保护类",
             value: 10
         }
+      ],
+      tableData: [
+        {
+            code: "1000",
+            name: "变桨电池充电故障",
+            message: "error_battery_charger",
+            status: 1
+        },
+        {
+            code: "1002",
+            name: "转子侧变流器电流故障",
+            message: "error_converter_error_inu_flag",
+            status: 0
+        },
+        {
+            code: "1000",
+            name: "变桨电池充电故障",
+            message: "error_battery_charger",
+            status: 1
+        },
+        {
+            code: "1002",
+            name: "转子侧变流器电流故障",
+            message: "error_converter_error_inu_flag",
+            status: 0
+        },
+
+        {
+            code: "1000",
+            name: "变桨电池充电故障",
+            message: "error_battery_charger",
+            status: 1
+        },
+        {
+            code: "1002",
+            name: "转子侧变流器电流故障",
+            message: "error_converter_error_inu_flag",
+            status: 0
+        },
+        {
+            code: "1000",
+            name: "变桨电池充电故障",
+            message: "error_battery_charger",
+            status: 1
+        },
+        {
+            code: "1002",
+            name: "转子侧变流器电流故障",
+            message: "error_converter_error_inu_flag",
+            status: 0
+        },
+        {
+            code: "1000",
+            name: "变桨电池充电故障",
+            message: "error_battery_charger",
+            status: 1
+        },
+        {
+            code: "1002",
+            name: "转子侧变流器电流故障",
+            message: "error_converter_error_inu_flag",
+            status: 0
+        },
+        {
+            code: "1000",
+            name: "变桨电池充电故障",
+            message: "error_battery_charger",
+            status: 1
+        },
+        {
+            code: "1002",
+            name: "转子侧变流器电流故障",
+            message: "error_converter_error_inu_flag",
+            status: 0
+        },
+        {
+            code: "1000",
+            name: "变桨电池充电故障",
+            message: "error_battery_charger",
+            status: 1
+        },
+        {
+            code: "1002",
+            name: "转子侧变流器电流故障",
+            message: "error_converter_error_inu_flag",
+            status: 0
+        },
+        {
+            code: "1000",
+            name: "变桨电池充电故障",
+            message: "error_battery_charger",
+            status: 1
+        },
+        {
+            code: "1002",
+            name: "转子侧变流器电流故障",
+            message: "error_converter_error_inu_flag",
+            status: 0
+        },
+
+      ],
+      tableHeader: [
+        {
+            code: "code",
+            name: "报警编号"
+        },
+        {
+            code: "name",
+            name: "PCL变量名"
+        },
+        {
+            code: "message",
+            name: "报警文字信息"
+        },
+        {
+            code: "status",
+            name: "报警状态"
+        },
       ]
     };
   },
@@ -480,6 +636,11 @@ export default {
       //   console.log(wind);
       this.$refs.powerAndSpeed && this.$refs.powerAndSpeed.init(wind);
     },
+    isRed(val) {
+        if (val === 2 || val === 6) {
+            return 'redsty'
+        }
+    },
     cancle() {
       this.windInfo = {};
       this.windname = "";
@@ -1080,6 +1241,24 @@ export default {
                 top: -4px;
                 margin-right: 5px;
             }
+            .seachBtn{
+                width: 30px;
+                height: 30px;
+                background: rgba(0, 70, 199, 0.48);
+                border-radius: 30px;
+                position: relative;
+                margin-left: 5px;
+                cursor: pointer;
+                .el-icon{
+                    position: absolute;
+                    top: 6px;
+                    left: 7px;
+                }
+                &:hover {
+                    background-color: rgba(16, 81, 219, 0.5);
+                    color: #ffffff;
+                }
+            }
             .buttons {
                 background-color: rgba(5, 187, 76, 0.2);
                 border: 1px solid #3b6c53;
@@ -1118,6 +1297,73 @@ export default {
                 margin-bottom: 5px;
                 box-shadow: inset 0px 0px 40px 0px red;
                 animation: flash 1s infinite alternate; /* 闪烁动画 */
+                .warnComImg{
+                    width: 50px;
+                    height: 50px;
+                    text-align: center;
+                    border-radius: 50px;
+                    border: 1px solid rgba(255,0,0,.3);
+                    position: relative;
+                    top: -74px;
+                    left: 22px;
+                    img{
+                        position: relative;
+                        top: 5px;
+                    }
+                }
+                .warnComNum{
+                    position: relative;
+                    top: -119px;
+                    left: 88px;
+                    width: 55px;
+                    .numTop{
+                        font-size: 22px;
+                        font-weight: bold;
+                        color: red;
+                        text-align: end;
+                    }
+                    .numBot{
+                        font-size: 14px;
+                        color: rgb(136, 136, 136);
+                        position: absolute;
+                        right: 0;
+                        top: 21px;
+                    }
+                }
+                .circle-container {
+                    width: 100px;
+                    height: 100px;
+                    position: relative;
+                }
+                .circle-segment {
+                    position: absolute;
+                    top: 20%;
+                    left: 17%;
+                    width: 60px;
+                    height: 60px;
+                    transform-origin: center;
+                    transform: translate(-50%, -50%);
+                    stroke-width: 5;
+                    fill: none;
+                    stroke-dasharray: 50, 30; /* 圆周长三分之一加间隔 */
+                    stroke-dashoffset: 0;
+                    animation: rotate 4s linear infinite;
+
+                }
+                .segment-1 { 
+                    stroke: red;
+                    transform: rotate(0deg);
+                }
+
+                @keyframes rotate {
+                    from {
+                    transform: rotate(0deg);
+                    }
+                    to {
+                    transform: rotate(360deg);
+                    }
+                }
+                
             }
             @keyframes flash {
                 from {
@@ -1147,8 +1393,16 @@ export default {
                     border: 1px solid #817c7c;
                     padding-left: 5px;
                 }
+                
+                .redsty{
+                    border: 1px solid red;
+                    color: red;
+                }
             }
         }
+        .warnTable{
+            margin-top: 10px;
+        }
     }
   }
 }

src/nxfStyle.less

@@ -798,6 +798,39 @@
         }
     }
 
+    .warnTable{
+        .el-table{
+            .el-table__header-wrapper{
+                .el-table__header{
+                    thead{
+                        tr{
+                            th{
+                                background: #242833;
+                            }
+                        }
+                    }
+                }
+            }
+            .el-table__body-wrapper{
+                .el-table__body{
+                    tbody{
+                        .el-table__row{
+                            .el-table__cell{
+                                background: #16181e;
+                                color: #989898;
+                            }
+                        }
+                        .el-table__row--striped{
+                            .el-table__cell{
+                                background: #202329;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
     .el-cascader__dropdown {
 
         .el-cascader-node {

src/views/IntegratedAlarm/DetailMatrix/index.vue

@@ -1767,8 +1767,8 @@
                                     position: absolute;
                                     left: 3px;
                                     top: 3px;
-                                    width: 10px;
-                                    height: 10px;
+                                    width: 8px;
+                                    height: 8px;
                                     background: #ffd700;
                                     border-radius: 20px;
                                 }

src/views/SandTable/SandTable.vue

@@ -125,23 +125,38 @@
 
             <el-dialog
                 v-model="noTimeDialog"
+                :custom-class="noTimeDialogsc"
                 width="80%"
             >
                 <template #title>
                     <div class="dialogTitle">
-                        非停时长占比
-                        <i class="jumpBtn el-icon-more" @click="jumpUrl('/health/frist')"></i>
+                        非停时长占比与故障次数
                     </div>
                 </template>
-                <span>This is a message</span>
-                <template #footer>
-                <div class="dialog-footer">
-                    <el-button @click="dialogVisible = false">Cancel</el-button>
-                    <el-button type="primary" @click="dialogVisible = false">
-                    Confirm
-                    </el-button>
+                <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>
                 </div>
-                </template>
+                <!-- <template #footer>
+                    <div class="dialog-footer">
+                        <el-button @click="dialogVisible = false">Cancel</el-button>
+                        <el-button type="primary" @click="dialogVisible = false">
+                        Confirm
+                        </el-button>
+                    </div>
+                </template> -->
             </el-dialog>
             <!-- <el-dialog title="" :custom-class="tableDialogClass" v-model="showHealthDialog" width="80%"
                 :destroy-on-close="true" :before-close="
@@ -391,6 +406,7 @@
             return {
                 problem1: null,
                 problem2: null,
+                problem3: null,
                 videoShow: true,
                 showPanel: false,
                 bjSwitch: false,
@@ -1183,8 +1199,174 @@
                 // }
             },
             clickTime() {
+                let res = jsonData
                 this.noTimeDialog = true
-                console.log("cscscs===>>>>", "cscs")
+                let that = this
+                // 72小时功率曲线
+                if (res.data["72time"] && res.data["72time"].length > 0) {
+                let xAxis = [];
+                let seriesSpeed = [];
+                res.data["72time"].forEach((it) => {
+                    xAxis.push(dayjs(it.time).format("MM-DD HH:mm"));
+                    seriesSpeed.push(it.speed);
+                });
+                let series = [
+                    {
+                    name: "故障次数",
+                    data: seriesSpeed,
+                    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));
+                        },
+                        },
+                    },
+                    ],
+                    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",
+                        },
+                    },
+                    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();
+                });
             }
         },
         // 生命周期钩子
@@ -1564,4 +1746,26 @@
             }
         }
     }
+
+    .el-overlay{
+        .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%;
+                        }
+                    }
+                }
+            }
+        }
+    }
 </style>

src/views/economicsOperation/windAnalyse/qxpclfx/dataJson.json

@@ -7,35 +7,35 @@
         "column": [
             {
                 "name": "风机",
-                "field": "wtCode",
+                "field": "windturbineid",
                 "is_num": false,
                 "is_light": false,
                 "sortable": "thermometerVue"
             },
             {
                 "name": "实际 / 保证（%）",
-                "field": "deviationRate2",
+                "field": "deviationrate2",
                 "is_num": false,
                 "is_light": false,
                 "sortable": true
             },
             {
                 "name": "环比",
-                "field": "monthDeviationRate",
+                "field": "monthdeviationrate",
                 "is_num": false,
                 "is_light": false,
                 "sortable": true
             },
             {
                 "name": "同比",
-                "field": "yearDeviationRate",
+                "field": "yeardeviationrate",
                 "is_num": false,
                 "is_light": false,
                 "sortable": true
             },
             {
                 "name": "比标杆风机",
-                "field": "standardDeviationRate",
+                "field": "standarddeviationrate",
                 "is_num": false,
                 "is_light": false,
                 "sortable": true

src/views/economicsOperation/windAnalyse/qxpclfx/index.vue

@@ -60,13 +60,28 @@
       <div class="leftContent">
         <span>{{ showTitle }}</span>
       </div>
-      <ComTable
+      <!-- <ComTable
         :data="tableData"
         :pageSize="20"
         v-loading="tableLoading"
         element-loading-text="拼命加载中.."
         element-loading-background="rgba(0, 0, 0, 0.8)"
-      ></ComTable>
+      ></ComTable> -->
+      <el-table
+        size="mini"
+        :data="tableData.data"
+        style="width: 100%;"
+        max-height="780px"
+        stripe>
+        <el-table-column
+            v-for="item in tableData.column"
+            :label="item.name"
+            :prop="item.field"
+            :key="item.field"
+            header-align="center"
+            align="center"
+        />
+    </el-table>
     </div>
   </div>
 </template>