增加施工安全距离

src/components/substation/powerWorkDetect.vue

@@ -1,44 +1,52 @@
 <template>
     <div class="hole-page">
         <div class="tower-detect">
-        <div class="inner-tit" style="display: flex; justify-content: space-between; align-items: center;">
+            <div
+                class="inner-tit"
+                style="
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                "
+            >
                 <div>
-            <img src="../../assets/img/lef-badge.png" alt="">
+                    <img src="../../assets/img/lef-badge.png" alt="" />
-            近电感应预警
+                    近电感应预警---
                 </div>
 
-          <el-button type="text"  style="font-size: 18px;" @click="handleSignUp">参数配置</el-button>
+                <el-button
+                    type="text"
+                    style="font-size: 18px"
+                    @click="handleSignUp"
+                    >参数配置</el-button
+                >
             </div>
             <el-form
-          style="width: 100%;"
+                style="width: 100%"
                 :model="queryParams"
                 ref="queryFormRef"
                 size="small"
                 :inline="true"
                 label-width="80px"
             >
-          <el-form-item
+                <el-form-item label="设备名称" prop="devName">
-              label="设备名称"
-              prop="devName"
-          >
                     <el-input
                         v-model="queryParams.devName"
                         placeholder="请输入设备名称"
-              clearable maxlength="20"
+                        clearable
-              style="width: 200px;"
+                        maxlength="20"
+                        style="width: 200px"
                     />
                 </el-form-item>
-          <el-form-item
+                <el-form-item label="预警时间" prop="warnTime">
-              label="预警时间"
-              prop="warnTime"
-          >
                     <el-date-picker
                         v-model="dateRange"
                         type="daterange"
                         range-separator="至"
                         start-placeholder="开始日期"
                         end-placeholder="结束日期"
-              style="background-color: #ECF3FE;">
+                        style="background-color: #ecf3fe"
+                    >
                     </el-date-picker>
                 </el-form-item>
                 <el-button
@@ -47,7 +55,8 @@
                     icon="el-icon-search"
                     size="mini"
                     @click="handleQuery"
-          >搜索</el-button>
+                    >搜索</el-button
+                >
             </el-form>
             <el-table
                 :data="tableList"
@@ -62,14 +71,14 @@
                     type="index"
                 >
                     <template slot-scope="scope">
-                    <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
+                        <span>{{
+                            (queryParams.pageNum - 1) * queryParams.pageSize +
+                            scope.$index +
+                            1
+                        }}</span>
                     </template>
                 </el-table-column>
-            <el-table-column
+                <el-table-column prop="devName" label="设备名称" align="center">
-              prop="devName"
-              label="设备名称"
-              align="center"
-            >
                 </el-table-column>
                 <el-table-column
                     prop="warnTime"
@@ -83,12 +92,14 @@
                     align="center"
                 >
                 </el-table-column>
-            <el-table-column
+                <el-table-column label="操作" align="center">
-                label="操作"
-                align="center"
-            >
                     <template slot-scope="scope">
-                    <el-button type="danger" size="mini" @click="handleWarn(scope.row)">删除</el-button>
+                        <el-button
+                            type="danger"
+                            size="mini"
+                            @click="handleWarn(scope.row)"
+                            >删除</el-button
+                        >
                     </template>
                 </el-table-column>
             </el-table>
@@ -97,13 +108,29 @@
                 :page.sync="queryParams.pageNum"
                 :limit.sync="queryParams.pageSize"
                 @pagination="getTableList"
-              style="background-color: #f3f7ff;"
+                style="background-color: #f3f7ff"
             />
         </div>
 
+        <div class="chart-box" id="Chart"> 图表区域 </div>
+
         <!-- 查看参数配置弹窗 -->
-        <el-dialog :title="title" :visible.sync="showConfig" width="800px" height="800px"  append-to-body @close="closeConfig">
+        <el-dialog
-          <el-form :model="queryConfig" ref="queryFormConfig" size="small" :inline="true" v-show="showSearch" label-width="120px">
+            :title="title"
+            :visible.sync="showConfig"
+            width="800px"
+            height="800px"
+            append-to-body
+            @close="closeConfig"
+        >
+            <el-form
+                :model="queryConfig"
+                ref="queryFormConfig"
+                size="small"
+                :inline="true"
+                v-show="showSearch"
+                label-width="120px"
+            >
                 <el-row :gutter="24">
                     <el-col :span="20">
                         <el-form-item label="线路属性：" prop="attribute">
@@ -112,30 +139,50 @@
                                     v-for="(radioItem, radioIndex) in radioList"
                                     :key="radioIndex"
                                     :label="radioItem.value"
-                    >{{ radioItem.label }}</el-radio>
+                                    >{{ radioItem.label }}</el-radio
+                                >
                             </el-radio-group>
                         </el-form-item>
                     </el-col>
                 </el-row>
                 <el-row :gutter="24">
                     <el-col :span="20">
-                  <el-form-item label="电压等级：" label-width="195px" prop="elecLevel" style="display: flex;margin-bottom: 30px;" >
+                        <el-form-item
-                    <el-radio-group v-model="queryConfig.elecLevel" style="display: flex; flex-wrap: wrap;  gap: 10px;margin-top: 0px;align-items: center;">
+                            label="电压等级："
+                            label-width="195px"
+                            prop="elecLevel"
+                            style="display: flex; margin-bottom: 30px"
+                        >
+                            <el-radio-group
+                                v-model="queryConfig.elecLevel"
+                                style="
+                                    display: flex;
+                                    flex-wrap: wrap;
+                                    gap: 10px;
+                                    margin-top: 0px;
+                                    align-items: center;
+                                "
+                            >
                                 <el-radio
-                      v-for="(radioItem, radioIndex) in radioLevelList"
+                                    v-for="(
+                                        radioItem, radioIndex
+                                    ) in radioLevelList"
                                     :key="radioIndex"
                                     :label="radioItem.value"
                                     class="radioLevelType"
-                    >{{ radioItem.label }}</el-radio>
+                                    >{{ radioItem.label }}</el-radio
+                                >
                             </el-radio-group>
-
                         </el-form-item>
                     </el-col>
                 </el-row>
                 <el-row :gutter="24">
                     <el-col :span="20">
                         <el-form-item label="距离：" prop="attribute">
-                  <el-input placeholder="请输入距离" v-model="queryConfig.distance" ></el-input>
+                            <el-input
+                                placeholder="请输入距离"
+                                v-model="queryConfig.distance"
+                            ></el-input>
                         </el-form-item>
                     </el-col>
                 </el-row>
@@ -157,7 +204,6 @@
                 >
             </div>
         </el-dialog>
-
     </div>
 </template>
 
@@ -165,6 +211,7 @@
 import { dialogConfig } from './config-sign'
 import { commonMixin } from '@/views/mixins/common'
 import TableSign from './subComp/table-sign.vue'
+import * as echarts from 'echarts'
 import {
     queryWarnElectListApi,
     delWarnElect,
@@ -173,14 +220,14 @@ import {
 } from '@/api/substation/substation'
 export default {
     components: {
-    TableSign
+        TableSign,
     },
-  mixins: [ commonMixin ],
+    mixins: [commonMixin],
     props: {
         sendMsg: {
             type: Object,
-      default: null
+            default: null,
-    }
+        },
     },
     name: 'powerWorkDetect',
     data() {
@@ -189,9 +236,9 @@ export default {
             showConfig: false,
             sendId: undefined,
             queryConfig: {
-        attribute: "",
+                attribute: '',
-        elecLevel: "",
+                elecLevel: '',
-        distance:""
+                distance: '',
             },
             title: '参数配置',
             radioList: [
@@ -228,12 +275,11 @@ export default {
         }
     },
     computed: {},
-  created() {
+    created() {},
-
-  },
     mounted() {
         this.sendId = this.sendMsg.projectId
         this.getWarnElectList(this.sendMsg.projectId)
+        this.initChart()
     },
     methods: {
         //获取近电感应预警表格
@@ -247,10 +293,11 @@ export default {
 
         async getTableList() {
             this.queryParams.proId = this.sendMsg.projectId
-            if (this.dateRange!=null&&this.dateRange.length>0) {
+            if (this.dateRange != null && this.dateRange.length > 0) {
                 const dateStart = new Date(this.dateRange[0])
                 const dateEnd = new Date(this.dateRange[1])
-            this.queryParams.startTime = dateStart.toLocaleDateString('en-CA')
+                this.queryParams.startTime =
+                    dateStart.toLocaleDateString('en-CA')
                 this.queryParams.endTime = dateEnd.toLocaleDateString('en-CA')
             } else {
                 this.queryParams.startTime = null
@@ -269,18 +316,22 @@ export default {
         /** 删除按钮操作 */
         handleWarn(row) {
             const id = row.id
-        this.$modal.confirm('是否确认删除该条数据').then(function() {
+            this.$modal
-            return delWarnElect({'id':id});
+                .confirm('是否确认删除该条数据')
-        }).then(() => {
+                .then(function () {
+                    return delWarnElect({ id: id })
+                })
+                .then(() => {
                     this.getTableList()
-            this.$modal.msgSuccess("删除成功");
+                    this.$modal.msgSuccess('删除成功')
-        }).catch(() => {})
+                })
+                .catch(() => {})
         },
 
         // 查看参数配置
         async handleSignUp() {
             const res = await getWarnElectConfigApi({
-        proId: this.sendMsg.projectId
+                proId: this.sendMsg.projectId,
             })
             console.log('2222222', res)
             this.queryConfig.attribute = res.data.configElectValue
@@ -298,17 +349,17 @@ export default {
                 configLevelValue: this.queryConfig.elecLevel,
                 distance: this.queryConfig.distance,
             }
-      editConfig(config).then(response => {
+            editConfig(config).then((response) => {
-        this.$modal.msgSuccess("修改成功");
+                this.$modal.msgSuccess('修改成功')
-            this.showConfig = false;
+                this.showConfig = false
-      });
+            })
         },
         closeClick() {
             this.showConfig = false
         },
 
         rowStyle(scope) {
-      if(scope.rowIndex % 2 === 0) {
+            if (scope.rowIndex % 2 === 0) {
                 return {
                     background: '#EAF5FF',
                 }
@@ -318,19 +369,120 @@ export default {
                 }
             }
         },
+
+        initChart() {
+            const COXList = [
+                '5',
+                '10',
+                '15',
+                '20',
+                '25',
+                '30',
+                '35',
+                '40',
+                '45',
+                '50',
+                '55',
+                '60',
+                '65',
+                '70',
+                '75',
+                '80',
+                '85',
+                '90',
+                '95',
+                '100',
+            ]
+            const Y_data = []
+
+            for (let i = 0; i < 20; i++) {
+                Y_data.push(Math.floor(Math.random() * 10))
             }
+            let COOption = {
+                title: {
+                    top: 0,
+                    left: 0,
+                    text: '施工安全距离',
+                    // subtext: '',
+                    textStyle: {
+                        color: '#000',
+                        fontSize: 16,
+                    },
+                },
+                grid: {
+                    left: '2%', // 左侧留白从默认10%减少到5%
+                    right: '5%',
+                    top: '15%',
+                    bottom: '5%',
+                    containLabel: true, // 包含标签空间
+                },
+                yAxis: {
+                    type: 'value',
+                    name: '距离',
+                    nameLocation: 'end',
+                    axisLabel: {
+                        width: 30,
+                    },
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow',
+                    },
+                    valueFormatter: (value) => {
+                        return value + ' 距离'
+                    },
+                },
+                xAxis: {
+                    type: 'category',
+                    data: COXList,
+                    name: '时间',
+                },
+                series: [
+                    {
+                        name: '时间',
+                        data: Y_data,
+                        type: 'line',
+                        smooth: true,
+                        lineStyle: {
+                            color: '#FE8511',
+                        },
+                        itemStyle: {
+                            normal: {
+                                color: '#FE8511',
+                            },
+                        },
+                        areaStyle: {
+                            color: {
+                                x: 0,
+                                y: 0,
+                                x2: 0,
+                                y2: 1,
+                                type: 'linear',
+                                colorStops: [
+                                    { offset: 0, color: '#F5CC91' },
+                                    { offset: 1, color: '#F8F6F6' },
+                                ],
+                            },
+                        },
+                    },
+                ],
+            }
+            let Chart = echarts.init(document.querySelector('#Chart'))
+            Chart.setOption(COOption)
+        },
+    },
 }
 </script>
 
-<style lang='less' scoped>
+<style lang="less" scoped>
-
 /deep/ .el-collapse-item__header {
     background-color: transparent !important;
     box-sizing: border-box;
     padding-left: 15px;
     font-size: 18px;
     font-weight: bold;
-  border-bottom: 1px solid #BAC4CD;
+    border-bottom: 1px solid #bac4cd;
 }
 
 /deep/ .el-collapse-item__content {
@@ -342,77 +494,66 @@ export default {
     background-color: transparent;
 }
 
-
-
 @font-face {
     font-family: 'YouShe';
-  src: url("../../assets/iconfont/YouSheBiaoTiHei.ttf");
+    src: url('../../assets/iconfont/YouSheBiaoTiHei.ttf');
 }
 
 .el-input__inner {
-    background-color: #FFFF;
+    background-color: #ffff;
 }
 
-.hole-page{
+.hole-page {
-
     width: 100%;
     height: 100%;
     display: flex;
+    flex-direction: column;
     justify-content: space-between;
-  .tower-detect{
+    .tower-detect {
-
         width: 100%;
-    height: 100%;
+        height: 50%;
-    background-color: #F3F7FF;
+        background-color: #f3f7ff;
         box-sizing: border-box;
         padding: 15px 20px;
         border-radius: 5px;
-    border: 1px solid #EFF2FC;
+        border: 1px solid #eff2fc;
-    box-shadow: 2px 2px 2px #D9E0F3;
+        box-shadow: 2px 2px 2px #d9e0f3;
-    display: flex;
+        // display: flex;
-    flex-direction: column;
+        // flex-direction: column;
         margin-right: 20px;
+        overflow: auto;
 
-    .inner-tit{
+        .inner-tit {
-
             width: 100%;
             box-sizing: border-box;
             padding: 10px 20px;
-      background-color: #EFF4FE;
+            background-color: #eff4fe;
             display: flex;
             align-items: center;
             color: #000;
             font-size: 20px;
             font-family: 'YouShe', sans-serif;
-      box-shadow: -3px -3px 2px #CBDCF6,
+            box-shadow: -3px -3px 2px #cbdcf6, 2px 2px 2px #f8f9fe,
-      2px 2px 2px #F8F9FE,
+                -2px -2px 2px #cbdcf6, 2px 2px 2px #f8f9fe;
-        -2px -2px 2px #CBDCF6,
-      2px 2px 2px #F8F9FE;
             margin-bottom: 15px;
 
-      img{
+            img {
-
                 margin-right: 10px;
-
+            }
         }
 
-    }
+        .tower-info {
-
-    .tower-info{
-
             flex: 1;
             display: flex;
 
-      .tower-lef{
+            .tower-lef {
-
                 width: 100%;
                 height: 100%;
                 margin-right: 15px;
                 display: flex;
                 flex-direction: column;
 
-        .lef-spin{
+                .lef-spin {
-
                     width: 100%;
                     height: 4%;
                     display: flex;
@@ -421,34 +562,26 @@ export default {
                     font-size: 16px;
                     margin-bottom: 15px;
 
-          div{
+                    div {
-
                         display: flex;
                         align-items: center;
                         margin-right: 12px;
 
-            h4{
+                        h4 {
-
                             width: 15px;
                             height: 15px;
                             margin-right: 12px;
-
+                        }
+                    }
                 }
 
-          }
+                span {
-
-        }
-
-        span{
-
                     padding: 15px 0;
                     color: #000;
                     font-size: 16px;
-
                 }
 
-        .lef-tower-pic{
+                .lef-tower-pic {
-
                     width: 100%;
                     height: 350px;
                     box-sizing: border-box;
@@ -458,8 +591,7 @@ export default {
                     flex-wrap: wrap;
                     overflow-y: auto;
 
-          .single-tower{
+                    .single-tower {
-
                         width: 40%;
                         height: 100px;
                         display: flex;
@@ -468,11 +600,9 @@ export default {
                         justify-content: center;
                         align-items: center;
 
-            img{
+                        img {
-
                             width: 60%;
                             height: 70%;
-
                         }
                         .dev-name {
                             text-align: center; /* 文本居中对齐 */
@@ -480,24 +610,24 @@ export default {
                             font-size: 16px;
                             color: #000;
                         }
-
                     }
 
-          .isActive{
+                    .isActive {
-
+                        background: linear-gradient(
-            background: linear-gradient(135deg, #EEF7FF, #DDEDFF, #C2DCFF);
+                            135deg,
-            border: 1px solid #B8D2ED;
+                            #eef7ff,
-
+                            #ddedff,
+                            #c2dcff
+                        );
+                        border: 1px solid #b8d2ed;
+                    }
                 }
-
             }
-
         }
-
-
     }
-
-}
 }
 
+.chart-box {
+    height: 50%;
+}
 </style>