新增功能

.env.development

@@ -15,8 +15,8 @@ VUE_APP_DIALOG_POINT = contextmenu
 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.245:6060
+VUE_APP_API=http://10.220.1.5:6060
+# VUE_APP_API=http://10.220.1.245:6060
 
 
 VUE_APP_URL=https://10.220.1.5:5300

src/views/SandTable/SandTable.vue

@@ -21,7 +21,7 @@
                         <div class="exchange" @click="changeBjSwitch">
                             <span :class="bjSwitch ? 'gray' : 'white'">故障</span>
                             <i class="blue fa fa-exchange mg-l-8 mg-r-8"></i>
-                            <span :class="bjSwitch ? 'blue' : 'gray'">检修</span>
+                            <span :class="bjSwitch ? 'white' : 'gray'">检修</span>
                         </div>
                     </template>
                     <RankTable :data="sels" @rowClick="clickStopRow" height="20vh"></RankTable>
@@ -42,7 +42,7 @@
                 </PanelSandToolbar>
                 <PanelSandToolbar class="right-panel mg-t-16" title="非停时长占比" @click="clickTime" style="cursor: pointer">
                     <template v-slot:default>
-                        <RadarPieChart height="18vh" :list="warnChartData" title="预警隐患情况" />
+                        <RadarPieChartCom height="18vh" :list="warnChartData" title="非停时长占比" />
                     </template>
                 </PanelSandToolbar>
             </div>
@@ -76,10 +76,10 @@
                 </PanelSandToolbar> -->
                 <PanelSand class="left-panel" title="停机信息">
                     <template v-slot:tools>
-                        <div class="exchange" @click="changeBjSwitch">
-                            <span :class="bjSwitch ? 'gray' : 'white'">故障</span>
+                        <div class="exchange" @click="changeBjSwitch2">
+                            <span :class="bjSwitch2 ? 'gray' : 'white'">故障</span>
                             <i class="blue fa fa-exchange mg-l-8 mg-r-8"></i>
-                            <span :class="bjSwitch ? 'blue' : 'gray'">检修</span>
+                            <span :class="bjSwitch2 ? 'white' : 'gray'">检修</span>
                         </div>
                     </template>
                     <RankTable :data="sels" @rowClick="clickStopRow" height="20vh"></RankTable>
@@ -87,20 +87,20 @@
                 <PanelSandToolbar class="right-panel mg-t-16" title="预警情况">
                     <template v-slot:tools>
                         <div class="exchange">
-                            <span :class="warnSwitch === 'z' ? 'white' : 'gray'" @click="changeWarnSwitch('z')">周</span>
+                            <span :class="warnSwitch2 === 'z' ? 'white' : 'gray'" @click="changeWarnSwitch2('z')">周</span>
                             <i class="blue fa fa-exchange mg-l-8 mg-r-8"></i>
-                            <span :class="warnSwitch === 'y' ? 'white' : 'gray'" @click="changeWarnSwitch('y')">月</span>
+                            <span :class="warnSwitch2 === 'y' ? 'white' : 'gray'" @click="changeWarnSwitch2('y')">月</span>
                             <i class="blue fa fa-exchange mg-l-8 mg-r-8"></i>
-                            <span :class="warnSwitch === 'n' ? 'white' : 'gray'" @click="changeWarnSwitch('n')">年</span>
+                            <span :class="warnSwitch2 === 'n' ? 'white' : 'gray'" @click="changeWarnSwitch2('n')">年</span>
                         </div>
                     </template>
                     <template v-slot:default>
                         <RadarPieChart height="18vh" :list="warnChartData" title="预警隐患情况" />
                     </template>
                 </PanelSandToolbar>
-                <PanelSandToolbar class="right-panel mg-t-16" title="非停时长占比">
+                <PanelSandToolbar class="right-panel mg-t-16" title="非停时长占比" @click="clickTime">
                     <template v-slot:default>
-                        <RadarPieChart height="18vh" :list="warnChartData" title="预警隐患情况" />
+                        <RadarPieChartCom height="18vh" :list="warnChartData" title="非停时长占比" style="cursor: pointer" />
                     </template>
                 </PanelSandToolbar>
             </div>
@@ -111,7 +111,7 @@
                     class="cur"
                     style="width: 100%; height: 100%"
                     ></div>
-                    <div class="hidBtn" @click="showStHourDialog"></div>
+                    <div class="hidBtn" @click="clickTime"></div>
                 </div>
                 <div class="monthPower">
                     <div
@@ -119,7 +119,7 @@
                     class="cur"
                     style="width: 100%; height: 100%"
                     ></div>
-                    <div class="hidBtn" @click="showYfdlDialog"></div>
+                    <div class="hidBtn" @click="clickTime"></div>
                 </div>
             </div>
 
@@ -158,200 +158,6 @@
                     </div>
                 </template> -->
             </el-dialog>
-            <!-- <el-dialog title="" :custom-class="tableDialogClass" v-model="showHealthDialog" width="80%"
-                :destroy-on-close="true" :before-close="
-            (done) => {
-            tableDialogClass = 'modal animated a1 fadeOutLeftBig';
-            delaylyFn(450, done);
-            }
-        " @closed="
-            dialogVideoUrl = '';
-            tableDialogClass = 'modal animated a1 fadeInLeftBig';
-        ">
-                <template #title>
-                    <div class="dialogTitle">
-                        健康推荐详情
-                        <i class="jumpBtn el-icon-more" @click="jumpUrl('/health/frist')"></i>
-                    </div>
-                </template>
-                <el-form style="margin: 30px 0" label-width="120px" inline>
-                    <el-form-item label="风机ID" style="width: 45%; margin-bottom: 25px">
-                        <el-input v-model="tableItem.wtId" readonly></el-input>
-                    </el-form-item>
-                    <el-form-item label="检修类型" style="width: 45%; margin-bottom: 25px">
-                        <el-input v-model="tableItem.operation" readonly></el-input>
-                    </el-form-item>
-                    <el-form-item label="推荐理由" style="width: 45%; margin-bottom: 25px">
-                        <el-input v-model="tableItem.reason" readonly></el-input>
-                    </el-form-item>
-                    <el-form-item label="推荐日期" style="width: 45%; margin-bottom: 25px">
-                        <el-input v-model="tableItem.recodedate" readonly></el-input>
-                    </el-form-item>
-                    <el-form-item label="风速" style="width: 45%; margin-bottom: 25px">
-                        <el-input v-model="tableItem.speed" readonly></el-input>
-                    </el-form-item>
-                    <el-form-item label="预警名称" style="width: 45%; margin-bottom: 25px">
-                        <el-input v-model="tableItem.typename" readonly></el-input>
-                    </el-form-item>
-                </el-form>
-            </el-dialog> -->
-            <!-- <el-dialog title="" :custom-class="tableDialogClass" v-model="showTableDialog" width="80%"
-                :destroy-on-close="true" :before-close="
-            (done) => {
-            tableDialogClass = 'modal animated a1 fadeOutLeftBig';
-            delaylyFn(450, done);
-            }
-        " @closed="
-            dialogVideoUrl = '';
-            tableDialogClass = 'modal animated a1 fadeInLeftBig';
-        ">
-                <template #title>
-                    <div class="dialogTitle">
-                        停机详情
-                        <i class="jumpBtn el-icon-more" @click="jumpUrl('/health/gzzd/malfunctionRecall')"></i>
-                    </div>
-                </template>
-                <el-form style="margin: 30px 0" label-width="120px" inline>
-                    <el-form-item label="风机ID" style="width: 45%; margin-bottom: 25px">
-                        <el-input v-model="tableItem.windTurbineId" readonly></el-input>
-                    </el-form-item>
-                    <el-form-item label="所属风场" style="width: 45%; margin-bottom: 25px">
-                        <el-input v-model="tableItem.wpName" readonly></el-input>
-                    </el-form-item>
-                    <el-form-item label="停机类型" style="width: 45%; margin-bottom: 25px">
-                        <el-input v-model="tableItem.statusName" readonly></el-input>
-                    </el-form-item>
-                    <el-form-item label="停机时间" style="width: 45%; margin-bottom: 25px">
-                        <el-input v-model="tableItem.stopTime" readonly></el-input>
-                    </el-form-item>
-                    <el-form-item label="恢复时间" style="width: 45%; margin-bottom: 25px">
-                        <el-input v-model="tableItem.startTime" readonly></el-input>
-                    </el-form-item>
-                    <el-form-item label="停机时长(小时)" style="width: 45%; margin-bottom: 25px">
-                        <el-input v-model="tableItem.stopHours" readonly></el-input>
-                    </el-form-item>
-                </el-form>
-            </el-dialog> -->
-            <!-- <el-dialog title="天气详情" :custom-class="tableDialogClass" v-model="showWeatherDialog" width="80%"
-                :destroy-on-close="true" :before-close="
-            (done) => {
-            tableDialogClass = 'modal animated a1 fadeOutLeftBig';
-            delaylyFn(450, done);
-            }
-        " @closed="tableDialogClass = 'modal animated a1 fadeInLeftBig'">
-                <div class="weatherBox">
-                    <div class="l">
-                        <DoubleLineChart :height="'100%'" :list="weatherChart" />
-                    </div>
-                    <div class="r">
-                        <el-collapse style="height: 400px; overflow-y: scroll" v-model="weathercollapse" accordion>
-                            <el-collapse-item :name="index" v-for="(item, index) in tqmap5" :key="index">
-                                <template #title>
-                                    <div class="collapseItemTitle">
-                                        {{ item.time }}
-                                        <div style="
-                        display: flex;
-                        justify-content: start;
-                        align-items: center;
-                        ">
-                                            <div class="icon svg-icon svg-icon-white">
-                                                <SvgIcon class="svg" :svgid="'svg-' + item.tqtp" />
-                                            </div>
-                                            <div class="info">{{ item.sd }}% / {{ item.wd }}°C</div>
-                                        </div>
-                                        <div class="otherWea">{{ item.tqmc }}</div>
-                                    </div>
-                                </template>
-                                <div class="other-info">
-                                    <Row>
-                                        <Col>
-                                        <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
-                                            <svg-icon svgid="svg-能见度" />
-                                        </div>
-                                        <div class="value">{{ item.qxd }}</div>
-                                        <div class="text">能见度</div>
-                                        </Col>
-                                        <Col>
-                                        <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
-                                            <svg-icon svgid="svg-湿度" />
-                                        </div>
-                                        <div class="value">{{ item.sd }}</div>
-                                        <div class="text">湿度</div>
-                                        </Col>
-                                        <Col>
-                                        <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
-                                            <svg-icon svgid="svg-气压" />
-                                        </div>
-                                        <div class="value">{{ item.dqyl }}</div>
-                                        <div class="text">气压</div>
-                                        </Col>
-                                        <Col>
-                                        <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
-                                            <svg-icon svgid="svg-日出" />
-                                        </div>
-                                        <div class="value">{{ item.richushijian }}</div>
-                                        <div class="text">日出时间</div>
-                                        </Col>
-                                        <Col>
-                                        <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
-                                            <svg-icon svgid="svg-日落" />
-                                        </div>
-                                        <div class="value">{{ item.riluoshijian }}</div>
-                                        <div class="text">日落时间</div>
-                                        </Col>
-                                    </Row>
-                                </div>
-                            </el-collapse-item>
-                        </el-collapse>
-                    </div>
-
-                </div>
-            </el-dialog> -->
-
-            <!-- <weather-dialog ref="weatherDia"></weather-dialog> -->
-
-            <!-- <el-dialog top="50px" title="查看视频" :custom-class="videoDialogClass" v-model="showVideoDialog" width="80%"
-                :destroy-on-close="true" :before-close="(done) => {
-                    videoDialogClass = 'modal animated a1 bounceOut';
-                    delaylyFn(450, done);
-                }
-                " @closed="
-                    dialogVideoUrl = '';
-                    videoDialogClass = 'modal animated a1 bounceIn';
-                ">
-                <hlsVideo class="videoBoxiframe" width="95%" height="800px" :code="dialogVideoUrl" />
-            </el-dialog> -->
-            <!-- <el-dialog title="场站综合评分" :class="mainInfoDialogClass" v-model="showMainInfoDialog" width="80%"
-                :destroy-on-close="true" :before-close="
-            (done) => {
-            mainInfoDialogClass = 'modal curModal animated a1 fadeOutUpBig';
-            delaylyFn(450, done);
-            }
-        " @closed="mainInfoDialogClass = 'modal curModal animated a0 fadeInDown'">
-                <div v-for="(item, index) in mainInfo" :key="index">
-                    <el-divider content-position="center">{{ item.name }}</el-divider>
-                    <el-form style="margin: 30px 0" label-width="120px" inline>
-                        <el-form-item label="风能利用率" style="width: 45%; margin-bottom: 25px">
-                            <el-input v-model="item.actualpower" readonly></el-input>
-                        </el-form-item>
-                        <el-form-item label="综合厂用电率(%)" style="width: 45%; margin-bottom: 25px">
-                            <el-input v-model="item.comprehensiverate" readonly></el-input>
-                        </el-form-item>
-                        <el-form-item label="利用小时(小时)" style="width: 45%; margin-bottom: 25px">
-                            <el-input v-model="item.utilizationhours" readonly></el-input>
-                        </el-form-item>
-                        <el-form-item label="设备可利用率(%)" style="width: 45%; margin-bottom: 25px">
-                            <el-input v-model="item.availability" readonly></el-input>
-                        </el-form-item>
-                        <el-form-item label="MTBF(小时)" style="width: 45%; margin-bottom: 25px">
-                            <el-input v-model="item.mtbf" readonly></el-input>
-                        </el-form-item>
-                        <el-form-item label="MTTR(小时)" style="width: 45%; margin-bottom: 25px">
-                            <el-input v-model="item.mttr" readonly></el-input>
-                        </el-form-item>
-                    </el-form>
-                </div>
-            </el-dialog> -->
         </div>
         <router-view v-else />
     </div>
@@ -367,6 +173,7 @@
     import RankTable from "./component/rank-table.vue";
     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 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";
@@ -398,7 +205,8 @@
             Row,
             SvgIcon,
             hlsVideo,
-            weatherDialog
+            weatherDialog,
+            RadarPieChartCom
         },
         // 数据
         data() {
@@ -410,7 +218,9 @@
                 videoShow: true,
                 showPanel: false,
                 bjSwitch: false,
+                bjSwitch2: false,
                 warnSwitch: 'z',
+                warnSwitch2: 'z',
                 timmer1: null,
                 showWeatherDialog: false,
                 showTableDialog: false,
@@ -649,30 +459,30 @@
                 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.getPowerLine(
-                    xAxis,
-                    series,
-                    "problem1"
-                );
-                that.getPowerLine2(
-                    xAxis,
-                    series,
-                    "problem2"
-                );
+                    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.getPowerLine(
+                        xAxis,
+                        series,
+                        "problem1"
+                    );
+                    that.getPowerLine2(
+                        xAxis,
+                        series,
+                        "problem2"
+                    );
                 }
             },
             getPowerLine(
@@ -1183,20 +993,16 @@
 
             changeBjSwitch() {
                 this.bjSwitch = !this.bjSwitch;
-                // if (this.bjSwitch) {
-                //     this.getRecordMGT();
-                // } else {
-                //     this.getRepertoryMGT();
-                // }
+            },
+            changeBjSwitch2() {
+                this.bjSwitch2 = !this.bjSwitch2;
             },
 
             changeWarnSwitch(val) {
                 this.warnSwitch = val
-                // if (this.warnSwitch) {
-                //     this.getStopMGT();
-                // } else {
-                //     this.getWarnMGT();
-                // }
+            },
+            changeWarnSwitch2(val) {
+                this.warnSwitch2 = val
             },
             clickTime() {
                 let res = jsonData

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

@@ -0,0 +1,136 @@
+<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",
+            },
+            // 百分比值
+            // 外部饼图数据
+            list: {
+                type: Array,
+                default: () => [{
+                        value: 310,
+                        name: "邮件营销",
+                    },
+                    {
+                        value: 234,
+                        name: "联盟广告",
+                    },
+                    {
+                        value: 335,
+                        name: "视频广告",
+                    },
+                    {
+                        value: 548,
+                        name: "百度",
+                    },
+                    {
+                        value: 351,
+                        name: "谷歌",
+                    },
+                ],
+            },
+            title: {
+                type: String,
+                default: "title",
+            },
+        },
+        data() {
+            return {
+                id: "",
+                chart: null,
+            };
+        },
+        computed: {},
+        methods: {
+            initChart() {
+                let option = {
+                    backgroundColor: "",
+                    tooltip: {
+                        trigger: 'item'
+                    },
+                    grid: {
+                        left: "10%",
+                    },
+                    legend: {
+                        orient: 'vertical',
+                        right: "0",
+                        top: "5",
+                        itemWidth: 10,
+                        itemHeight: 10,
+                        textStyle: {
+                            color: "#fff",
+                        },
+                    },
+                    series: [{
+                        name: '非停时长',
+                        type: 'pie',
+                        radius: '70%',
+                        center: ['30%', '50%'], // 左右偏移
+                        data: [{
+                                value: 1048,
+                                name: '其他他故障'
+                            },
+                            {
+                                value: 735,
+                                name: '机械故障'
+                            },
+                            {
+                                value: 580,
+                                name: '电器故障'
+                            }
+                        ],
+                        label: {
+                            show: false // 取消显示文字
+                        },
+                        labelLine: {
+                            show: false // 取消显示连线
+                        }
+                    }]
+                };
+
+                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>