From ea3eb0d0cabacd1dd3da28a36a7e353b144f56e5 Mon Sep 17 00:00:00 2001
From: Hobart <kolusai@hotmail.com>
Date: Tue, 21 Feb 2023 15:06:19 +0800
Subject: [PATCH] =?UTF-8?q?bug=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/management.js              |  13 ++
 src/components/chart/barChart.vue  | 107 ++++++++-------
 src/components/chart/lineChart.vue |   4 +-
 src/components/chart/pieChart.vue  | 121 ++++++++---------
 src/views/IdManagement.vue         | 203 ++++++++++++++---------------
 src/views/bounced/dataBoard.vue    | 135 +++++++++----------
 6 files changed, 285 insertions(+), 298 deletions(-)
 create mode 100644 src/api/management.js

diff --git a/src/api/management.js b/src/api/management.js
new file mode 100644
index 00000000..6be800b3
--- /dev/null
+++ b/src/api/management.js
@@ -0,0 +1,13 @@
+import axios from 'axios';
+import qs from 'qs';
+if (process.env.NODE_ENV === 'development') {
+    axios.defaults.baseURL = '/';
+} else if (process.env.NODE_ENV === 'production') {
+    axios.defaults.baseURL = '/';
+}
+//获取所有账号数据接口
+export const getZhanghData = params => {
+    return axios.get('api/GetZhangh', {
+        params
+    });
+};
diff --git a/src/components/chart/barChart.vue b/src/components/chart/barChart.vue
index c9b9398d..f65e9667 100644
--- a/src/components/chart/barChart.vue
+++ b/src/components/chart/barChart.vue
@@ -1,16 +1,14 @@
 <template>
-
     <div id="barChart" ref="barChart" style="width:100%;height:300px;"></div>
-
 </template>
-  
+
 <script>
 export default {
     name: 'barChart', //饼图组件
     props: {
         list: Array,
         default() {
-            return []
+            return [];
         },
         pageType: {
             type: String
@@ -27,59 +25,58 @@ export default {
         chartName: {
             type: String
         },
-        typeValue:{
-            type:Object
+        typeValue: {
+            type: Object
         }
     },
     data() {
         return {
             xData: [],
             yData: []
-        }
-    },
-    created() {
+        };
     },
+    created() {},
     methods: {
         drawBar() {
-     
-            let myChart = this.$echarts.getInstanceByDom(this.$refs.barChart)
+            console.log(this.yData, 222);
+            let myChart = this.$echarts.getInstanceByDom(this.$refs.barChart);
             if (myChart == null) {
-                myChart = this.$echarts.init(this.$refs.barChart)
+                myChart = this.$echarts.init(this.$refs.barChart);
             }
             let option = {
                 color: ['#7262FD', '#FC5A5A'],
-                title:{
-                    show:true,
-                    text:this.componentName + '-' + this.chartName + '-' + '柱状图',
-                    textStyle:{
-                        lineHeight:'30',
+                title: {
+                    show: true,
+                    text: this.componentName + '-' + this.chartName + '-' + '柱状图',
+                    textStyle: {
+                        lineHeight: '30'
                     }
                 },
                 tooltip: {
-                    confine: true,
+                    confine: true
                 },
                 grid: {
                     left: '2%',
                     right: '4%',
                     bottom: '10%',
                     top: '20%',
-                    containLabel: true,
+                    containLabel: true
                 },
                 xAxis: {
                     type: 'category',
                     data: this.xData,
                     axisLine: {
                         lineStyle: {
-                            color: '#000',
-                        },
+                            color: '#000'
+                        }
                     },
                     axisLabel: {
                         fontSize: 12,
-                        color: '#000',
+                        color: '#000'
                     },
                     axisTick: {
-                        show: false,
-                    },
+                        show: false
+                    }
                 },
                 yAxis: [
                     {
@@ -87,64 +84,64 @@ export default {
                         min: 0,
                         minInterval: 1,
                         splitArea: {
-                            show: false,
+                            show: false
                         },
 
                         axisLine: {
-                            show: true,
+                            show: true
                         },
                         axisTick: {
-                            show: false,
+                            show: false
                         },
                         splitLine: {
                             lineStyle: {
                                 color: '#eeebeb',
-                                type: 'dashed', // dotted 虚线
-                            },
+                                type: 'dashed' // dotted 虚线
+                            }
                         },
                         axisLabel: {
                             fontSize: 12,
                             color: '#000',
-                            fontFamily: 'Bebas',
-                        },
-                    }],
-                series: [{
-                    type: 'bar',
-                    barWidth: 20,
-                    itemStyle: { barBorderRadius: [5, 5, 0, 0], },
-                    name: '时间',
-                    data: this.yData
-                },
+                            fontFamily: 'Bebas'
+                        }
+                    }
                 ],
+                series: [
+                    {
+                        type: 'bar',
+                        barWidth: 20,
+                        itemStyle: { barBorderRadius: [5, 5, 0, 0] },
+                        name: '时间',
+                        data: this.yData
+                    }
+                ]
             };
-            myChart.setOption(option)
+            myChart.setOption(option);
             // window.onresize = () => {  // 根据窗口大小变化图表自适应
             //     myChart.resize();
             // };
-            window.addEventListener('resize', function () {
-                myChart.resize()
-            }
-            )
-        },
+            window.addEventListener('resize', function() {
+                myChart.resize();
+            });
+        }
     },
     mounted() {
-        this.drawBar()
+        this.drawBar();
     },
     watch: {
-       typeValue: {
+        typeValue: {
             handler(newVal) {
                 if (newVal) {
                     this.xData = newVal.type_data.map(ele => {
-                        return ele.name
-                    })
+                        return ele.name;
+                    });
                     this.yData = newVal.type_data.map(ele => {
-                        return ele.quantity
-                    })
-                    this.drawBar()
+                        return ele.quantity;
+                    });
+                    this.drawBar();
                 }
             }
-
         }
     }
-}
-</script>
\ No newline at end of file
+};
+</script>
diff --git a/src/components/chart/lineChart.vue b/src/components/chart/lineChart.vue
index 55a3ef27..68b84b8d 100644
--- a/src/components/chart/lineChart.vue
+++ b/src/components/chart/lineChart.vue
@@ -72,7 +72,7 @@ export default {
                         lineHeight: '30'
                     }
                 },
-                legend:{},
+                legend: {},
                 grid: {
                     left: '2%',
                     right: '4%',
@@ -265,7 +265,7 @@ export default {
                     }
                     if (this.$refs.lineChart) {
                         this.$nextTick(() => {
-                            this.drawLine();
+                            // this.drawLine();
                         });
                     }
                 }
diff --git a/src/components/chart/pieChart.vue b/src/components/chart/pieChart.vue
index 06ba3757..7fc2d8fc 100644
--- a/src/components/chart/pieChart.vue
+++ b/src/components/chart/pieChart.vue
@@ -1,15 +1,15 @@
 <template>
     <div id="pieChart" ref="pieChart" style="width:100%;height:300px;"></div>
 </template>
-  
+
 <script>
 export default {
-    name: 'pieChart',//饼图图组件
+    name: 'pieChart', //饼图图组件
     props: {
         list: {
             type: Array,
             default() {
-                return []
+                return [];
             }
         },
         componentName: {
@@ -21,10 +21,8 @@ export default {
         typeValue: {
             type: Object
         }
-
     },
     data() {
-
         return {
             // 图例数据
             legend: [],
@@ -37,88 +35,80 @@ export default {
                 {
                     name: '非机动车',
                     value: 0
-                }, {
+                },
+                {
                     name: '行人',
                     value: 0
                 }
             ]
-        }
-    },
-    created() {
-
+        };
     },
+    created() {},
     methods: {
         drawPie() {
-            let myChart = this.$echarts.getInstanceByDom(this.$refs.pieChart)
+            let myChart = this.$echarts.getInstanceByDom(this.$refs.pieChart);
             if (myChart == null) {
-                myChart = this.$echarts.init(this.$refs.pieChart)
+                myChart = this.$echarts.init(this.$refs.pieChart);
             }
-            var color = [
-                '#0CD2E6',
-                '#3751E6',
-                '#FFC722'
-            ];
+            var color = ['#0CD2E6', '#3751E6', '#FFC722'];
             let option = {
                 title: {
                     show: true,
                     text: this.componentName + '-' + this.chartName + '-' + '饼状图',
                     textStyle: {
-                        lineHeight: '30',
+                        lineHeight: '30'
                     }
                 },
                 color: color,
                 legend: {
                     top: 20,
                     right: 'center',
-                    textStyle: {
-
-                    },
-                    data: this.legend,
+                    textStyle: {},
+                    data: this.legend
                 },
                 tooltip: {},
-                series: [{
-                    type: 'pie',
-                    center: ['50%', '55%'],
-                    radius: '70%',
-                    label: {
-                        normal: {
-                            show: false,
+                series: [
+                    {
+                        type: 'pie',
+                        center: ['50%', '55%'],
+                        radius: '70%',
+                        label: {
+                            normal: {
+                                show: false
+                            }
                         },
-                    },
-                    labelLine: {
-                        show: false,
-                        length: 0,
-                        length2: 0,
-                    },
-                    label: {
-                        normal: {
-                            show: true,
-                            position: 'inside',
-                            formatter: '{value|{c}}',
-                            rich: {
-                                value: {
-                                    fontSize: 20,
-                                    color: '#ffffff',
-                                },
-                            },
-                        }
-                    },
-                    data: this.seriesData,
-                }],
+                        labelLine: {
+                            show: false,
+                            length: 0,
+                            length2: 0
+                        },
+                        label: {
+                            normal: {
+                                show: true,
+                                position: 'inside',
+                                formatter: '{value|{c}}',
+                                rich: {
+                                    value: {
+                                        fontSize: 20,
+                                        color: '#ffffff'
+                                    }
+                                }
+                            }
+                        },
+                        data: this.seriesData
+                    }
+                ]
             };
 
-            myChart.setOption(option)
-
+            myChart.setOption(option);
 
             // window.onresize = () => {  // 根据窗口大小变化图表自适应
             //     myChart.resize();
             // };
-            window.addEventListener('resize', function () {
-                myChart.resize()
-            }
-            )
-
-        },
+            window.addEventListener('resize', function() {
+                myChart.resize();
+            });
+        }
     },
     mounted() {
         this.drawPie();
@@ -128,21 +118,20 @@ export default {
             handler(newVal) {
                 if (newVal) {
                     this.legend = newVal.type_data.map(ele => {
-                        return ele.name
+                        return ele.name;
                     });
-                    this.seriesData = []
+                    this.seriesData = [];
                     newVal.type_data.forEach(ele => {
                         this.seriesData.push({
                             name: ele.name,
                             value: ele.quantity
-                        })
-                    })
-                    this.drawPie()
-
+                        });
+                    });
+                    // this.drawPie();
                 }
             }
         }
     }
-}
+};
 </script>
-<style scoped></style>
\ No newline at end of file
+<style scoped></style>
diff --git a/src/views/IdManagement.vue b/src/views/IdManagement.vue
index 239d0471..bd89e5cd 100644
--- a/src/views/IdManagement.vue
+++ b/src/views/IdManagement.vue
@@ -1,118 +1,113 @@
 <template>
-  <div class="content-box">
-    <div class="container">
-      <p class="title">账号管理</p>
-      <!-- <div class="test-div">
-      <i class="el-icon-edit"></i>
-      <i class="el-icon-share"></i>
-      <i class="el-icon-delete"></i>
-    </div> -->
-      <el-button @click="addAccountDialog = true" type="primary" style="margin-bottom: 10px;"><i
-          class="el-icon-circle-plus-outline" style="margin-right: 3px;"></i>新增</el-button>
-
-      <el-table :data="tableData" :height="tableHeight" border style="width: 100%">
-        <el-table-column align="center" prop="name" label="用户名称" width="180"></el-table-column>
-        <el-table-column align="center" prop="account" label="用户账号" width="180"></el-table-column>
-        <el-table-column align="center" prop="role" label="角色"></el-table-column>
-        <el-table-column align="center" prop="jurisdiction" label="权限"></el-table-column>
-        <el-table-column align="center" label="操作" width="160">
-          <template slot-scope="scope">
-            <el-button @click="edit(scope.row)" type="text" size="small" class="">编辑</el-button>
-            <el-button @click="showView(scope.row)" type="text" size="small" class="el-icon-view"></el-button>
-            <el-button @click="clickDelete(scope.row)" type="text" size="small" class="el-icon-delete"></el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
-        :current-page.sync="currentPage" :page-sizes="[100, 200, 300, 400]" :page-size="pageSize"
-        layout="sizes, prev, pager, next" :total="totalNumber" style="padding-top: 10px;">
-      </el-pagination>
-      <div class="dialog">
-        <el-dialog :title="dialogTitle" :visible.sync="addAccountDialog" width="30%">
-          <el-form label-position="left" label-width="80px" :model="formLabelAlign">
-            <el-form-item label="名称：">
-              <el-input v-model="formLabelAlign.name"></el-input>
-            </el-form-item>
-            <el-form-item label="账号：">
-              <el-input v-model="formLabelAlign.account"></el-input>
-            </el-form-item>
-            <el-form-item label="角色：">
-              <el-input v-model="formLabelAlign.role"></el-input>
-            </el-form-item>
-            <el-form-item label="权限：">
-              <el-input v-model="formLabelAlign.jurisdiction"></el-input>
-            </el-form-item>
-          </el-form>
-          <span slot="footer" class="dialog-footer">
-            <el-button type="primary" @click="addAccountDialog = false">确 定</el-button>
-          </span>
-        </el-dialog>
-      </div>
+    <div class="content-box">
+        <div class="container">
+            <p class="title">账号管理</p>
+            <el-button @click="addAccountDialog = true" type="primary" style="margin-bottom: 10px;"
+                ><i class="el-icon-circle-plus-outline" style="margin-right: 3px;"></i>新增</el-button
+            >
+            <el-table :data="tableData" :height="tableHeight" border style="width: 100%">
+                <el-table-column align="center" prop="userName" label="用户名称" width="180"></el-table-column>
+                <el-table-column align="center" prop="account" label="用户账号" width="180"></el-table-column>
+                <el-table-column align="center" prop="roleName" label="角色"></el-table-column>
+                <el-table-column align="center" label="权限">
+                    <template slot-scope="scope">
+                        <span>{{ scope.row.isEnable === '1' ? '启用' : '禁用' }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column align="center" label="操作" width="160">
+                    <template slot-scope="scope">
+                        <el-button @click="edit(scope.row)" type="text" size="small" class="">编辑</el-button>
+                        <!-- <el-button @click="showView(scope.row)" type="text" size="small" class="el-icon-view"></el-button> -->
+                        <el-button @click="clickDelete(scope.row)" type="text" size="small">删除</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <div class="dialog">
+                <el-dialog :title="dialogTitle" :visible.sync="addAccountDialog" width="30%">
+                    <el-form label-position="left" label-width="80px" :model="formLabelAlign">
+                        <el-form-item label="名称：">
+                            <el-input v-model="formLabelAlign.name"></el-input>
+                        </el-form-item>
+                        <el-form-item label="账号：">
+                            <el-input v-model="formLabelAlign.account"></el-input>
+                        </el-form-item>
+                        <el-form-item label="角色：">
+                            <el-input v-model="formLabelAlign.role"></el-input>
+                        </el-form-item>
+                        <el-form-item label="权限：">
+                            <el-input v-model="formLabelAlign.jurisdiction"></el-input>
+                        </el-form-item>
+                    </el-form>
+                    <span slot="footer" class="dialog-footer">
+                        <el-button type="primary" @click="addAccountDialog = false">确 定</el-button>
+                    </span>
+                </el-dialog>
+            </div>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
+import { getZhanghData } from '@/api/management';
 export default {
-  data() {
-    return {
-      addAccountDialog: false,
-      formLabelAlign: {
-        name: '',
-        account: '',
-        role: '',
-        jurisdiction: ''
-      },
-      tableData: [
-        {
-          name: 'admin',
-          account: '',
-          role: 'admin',
-          jurisdiction: '超级管理员'
+    data() {
+        return {
+            addAccountDialog: false,
+            formLabelAlign: {
+                name: '',
+                account: '',
+                role: '',
+                jurisdiction: ''
+            },
+            tableData: [],
+            tableHeight: 0,
+            currentPage: 1,
+            pageSize: 100,
+            totalNumber: 1000,
+            tableHeight: 0,
+            dialogTitle: '新增'
+        };
+    },
+    created() {
+        let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
+        this.tableHeight = windowHeight - 280;
+        this.getData();
+    },
+    methods: {
+        getData() {
+            getZhanghData().then(res => {
+                console.log(res);
+                this.tableData = res.data.data;
+            });
+        },
+        edit(scope) {
+            console.log(scope, '编辑');
+            this.dialogTitle = '编辑';
+            this.addAccountDialog = true;
+        },
+        showView(scope) {
+            console.log(scope, '查看');
+            this.dialogTitle = '查看';
+            this.addAccountDialog = true;
+        },
+        clickDelete(scope) {
+            console.log(scope, '删除');
+        },
+        handleSizeChange(val) {
+            console.log(`每页 ${val} 条`);
+        },
+        handleCurrentChange(val) {
+            console.log(`当前页: ${val}`);
         }
-      ],
-      tableHeight: 0,
-      currentPage: 1,
-      pageSize: 100,
-      totalNumber: 1000,
-      tableHeight: 0,
-      dialogTitle: '新增'
     }
-  },
-  created() {
-    let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
-    this.tableHeight = windowHeight - 220;
-  },
-  methods: {
-    edit(scope) {
-      console.log(scope, '编辑');
-      this.dialogTitle = '编辑';
-      this.addAccountDialog = true;
-    },
-    showView(scope) {
-      console.log(scope, '查看');
-      this.dialogTitle = '查看';
-      this.addAccountDialog = true;
-    },
-    clickDelete(scope) {
-      console.log(scope, '删除');
-    },
-    handleSizeChange(val) {
-      console.log(`每页 ${val} 条`);
-    },
-    handleCurrentChange(val) {
-      console.log(`当前页: ${val}`);
-    }
-  }
-}
+};
 </script>
 
 <style scoped>
 .test-div i {
-  font-size: 25px;
+    font-size: 25px;
 }
-.dialog .el-form-item{
-  margin-bottom: 20px;
+.dialog .el-form-item {
+    margin-bottom: 20px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/bounced/dataBoard.vue b/src/views/bounced/dataBoard.vue
index ec725325..bf705e56 100644
--- a/src/views/bounced/dataBoard.vue
+++ b/src/views/bounced/dataBoard.vue
@@ -3,11 +3,15 @@
         <el-empty v-show="componentList.length == 0" :image-size="400"></el-empty>
         <!-- <p class="title" style="margin-bottom: 20px;font-size: 20px;font-weight: 400;">数据看板</p> -->
         <el-scrollbar class="scrollbar">
-            <div class="dataBoard" ref='dataBoard' v-if="activeName == 'second'">
+            <div class="dataBoard" ref="dataBoard" v-if="activeName == 'second'">
                 <!-- 断面 -->
                 <div class="plate1" ref="plate1">
-                    <div :class="sectionData.length <= 2 ? 'sectionBox' : 'section'" ref="section"
-                        v-for="(s, i) in sectionData" :key="s.analogAreaComponentId">
+                    <div
+                        :class="sectionData.length <= 2 ? 'sectionBox' : 'section'"
+                        ref="section"
+                        v-for="(s, i) in sectionData"
+                        :key="s.analogAreaComponentId"
+                    >
                         <template>
                             <div ref="sectionContent">
                                 <div>
@@ -17,17 +21,27 @@
                                     <span class="downPull1" data-num="1" @click="sectionHandle(i)"></span>
                                 </div>
                                 <div v-for="o in s.children" :key="o.analogAreaComponentId">
-
-                                    <OD v-if="o.componentName.includes('OD')" :pageType="o.graphicType" triggerType="触发"
-                                        :componentName="o.componentName" :echartArr="o.presentationForm"
-                                        :dataArr="o.trigger" :title="o.componentName.split('_')[0]"
-                                        :chartName='o.combinationName' />
-                                    <typeChart v-else :pageType="o.graphicType" :triggerType="o.timeMode"
+                                    <OD
+                                        v-if="o.componentName.includes('OD')"
+                                        :pageType="o.graphicType"
+                                        triggerType="触发"
+                                        :componentName="o.componentName"
+                                        :echartArr="o.presentationForm"
+                                        :dataArr="o.trigger"
+                                        :title="o.componentName.split('_')[0]"
+                                        :chartName="o.combinationName"
+                                    />
+                                    <typeChart
+                                        v-else
+                                        :pageType="o.graphicType"
+                                        :triggerType="o.timeMode"
                                         :componentName="o.componentName"
                                         :dataArr="o.timeMode == '触发' ? o.trigger : o.cycleTimeData"
-                                        :echartArr="o.presentationForm" :title="o.componentName.split('_')[0]"
-                                        :chartName='o.combinationName'
-                                        :typeValue="o.timeMode == '触发' ? typeValue : typeCycleTimeData" />
+                                        :echartArr="o.presentationForm"
+                                        :title="o.componentName.split('_')[0]"
+                                        :chartName="o.combinationName"
+                                        :typeValue="o.timeMode == '触发' ? typeValue : typeCycleTimeData"
+                                    />
                                 </div>
                                 <!-- :data="triggerList.length != 0 ? triggerList : tableData" -->
                             </div>
@@ -37,9 +51,9 @@
             </div>
         </el-scrollbar>
         <!-- 详情框 -->
-</div>
+    </div>
 </template>
- <!-- :data="triggerList.length != 0 ? tripHandle(o) : tableData" -->
+<!-- :data="triggerList.length != 0 ? tripHandle(o) : tableData" -->
 <script>
 import typeChart from '../../components/target/typeChart.vue';
 import OD from '../../components/target/OD.vue';
@@ -80,7 +94,7 @@ export default {
             default() {
                 return [];
             }
-        },
+        }
     },
     data() {
         return {
@@ -302,8 +316,6 @@ export default {
                 }
             ],
 
-
-
             idVal: '',
             //组件数组
             componentList: [],
@@ -312,16 +324,12 @@ export default {
 
             sectionData: [],
 
-
-
             // 单个区域或者断面的表格触发数据
             tableList: [],
 
-
             // 路线数据
             headWay: [],
 
-
             tripData: [],
 
             sectionArr: [],
@@ -334,11 +342,11 @@ export default {
     },
     created() {
         this.idVal = this.$route.query.id;
-        getComponentSection({ VideoId: this.idVal }).then((res) => {
+        getComponentSection({ VideoId: this.idVal }).then(res => {
             if (res.data.code == 200) {
                 console.log(res.data.data, '11111111111111111');
-                this.componentList = res.data.data
-                this.siftData()
+                this.componentList = res.data.data;
+                this.siftData();
                 // 处理获取过来的数据
                 // this.componentList.forEach((val) => {
                 //     this.sectionArr.push(val.combinationName);
@@ -357,18 +365,16 @@ export default {
             } else if (res.data.code == 404) {
             }
         });
-
     },
     methods: {
-
         siftData() {
-            this.componentList.forEach((val) => {
+            this.componentList.forEach(val => {
                 this.sectionArr.push(val.combinationName);
                 this.sectionArr = Array.from(new Set(this.sectionArr));
             });
-            this.sectionData = this.sectionArr.map((item) => {
+            this.sectionData = this.sectionArr.map(item => {
                 item = { title: item, children: [] };
-                this.componentList.forEach((val) => {
+                this.componentList.forEach(val => {
                     if (item.title == val.combinationName) {
                         item.children.push(val);
                     }
@@ -390,60 +396,48 @@ export default {
                 if (sectionBox[i] != undefined) {
                     sectionBox[i].style.height = 'auto';
                 }
-
             } else {
                 downPulls1[i].style.cssText = 'transition: all 0.5s linear;';
                 sections[i].style.height = '500px';
                 if (sectionBox[i] != undefined) {
-                    sectionBox[i].style.height = '48vh'
+                    sectionBox[i].style.height = '48vh';
                 }
-
-
             }
-        },
-
+        }
 
         // 触发数据的类型数值
-
-    },
-    mounted() {
     },
+    mounted() {},
     watch: {
-
         // 触发的原始数据
         triggerData: {
-            handler(newVal, oldVal) {
-            },
+            handler(newVal, oldVal) {},
             immediate: true
         },
 
         // 处理过的触发数据
         triggerListData: {
             handler(newVal) {
-                this.triggerList = newVal
-                // 触发数据
-                console.log(newVal, 'triggerlistData');
-
+                this.triggerList = newVal;
                 this.componentList.forEach(ele => {
                     if (ele.trigger == undefined && ele.timeMode == '触发') {
-                        ele.trigger = []
+                        ele.trigger = [];
                     }
                     newVal.forEach(item => {
                         if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '触发') {
                             if (ele.trigger.length == 10) {
-                                ele.trigger.pop()
-
+                                ele.trigger.pop();
                             } else {
                                 // 该时间的触发数据
                                 if (item.type_data != null) {
                                     // console.log(item,'461461');
-                                    this.typeValue = item
+                                    this.typeValue = item;
                                 }
-                                ele.trigger.unshift(item)
+                                ele.trigger.unshift(item);
                             }
                         }
-                    })
-                })
+                    });
+                });
             },
             immediate: true
         },
@@ -455,38 +449,38 @@ export default {
                 if (newVal.length != 0) {
                     this.componentList.forEach(ele => {
                         if (ele.cycleTimeData == undefined && ele.timeMode == '周期时刻') {
-                            ele.cycleTimeData = []
+                            ele.cycleTimeData = [];
                         }
                         newVal.forEach(item => {
-                            if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '周期时刻' && ele.analogAreaGraphId == item.graphical_id) {
+                            if (
+                                ele.analogAreaComponentId == item.component_id &&
+                                ele.timeMode == '周期时刻' &&
+                                ele.analogAreaGraphId == item.graphical_id
+                            ) {
                                 if (ele.cycleTimeData.length == 10) {
-                                    ele.cycleTimeData.slice(ele.cycleTimeData.length-1,0)
+                                    ele.cycleTimeData.slice(ele.cycleTimeData.length - 1, 0);
                                 } else {
-                                    if(item.type_data!=null){
+                                    if (item.type_data != null) {
                                         // 周期时刻的类型数据
-                                        this.typeCycleTimeData = item
+                                        this.typeCycleTimeData = item;
                                     }
-                                    ele.cycleTimeData.unshift(item)
+                                    ele.cycleTimeData.unshift(item);
                                 }
                             }
-                        })
-                    })
+                        });
+                    });
                     console.log(this.sectionData, '455');
                 }
             },
             immediate: true
         },
         // 周期统计数据
-        cycleStatistics:{
-            handler(newVal){
-                console.log(newVal,'周期统计');
+        cycleStatistics: {
+            handler(newVal) {
+                console.log(newVal, '周期统计');
             }
         }
-
-    },
-
-
-
+    }
 };
 </script>
 
@@ -506,7 +500,7 @@ export default {
 
 /deep/ .el-scrollbar__view {
     display: inline-block !important;
-    width: 100%
+    width: 100%;
 }
 
 /deep/ .el-scrollbar__wrap {
@@ -520,7 +514,6 @@ export default {
     .dataBoard {
         height: 100%;
     }
-
 }
 
 .dataBoard .region,
@@ -610,4 +603,4 @@ export default {
 .active {
     transition: all 0.5s linear;
 }
-</style>
\ No newline at end of file
+</style>