Merge branch 'master' of http://222.243.138.146:2000/hmy/DCS

src/myConfig/config.js

@@ -1,5 +1,5 @@
 export default {
-    fluxDB_IP: '10.147.17.35',
+    fluxDB_IP: '192.168.110.83',
     //监控视频地址
     monitorUrl:'http://222.243.138.146:9090/#/play/wasm/ws%3A%2F%2F222.243.138.146%3A9092%2Frtp%2F35020000001320000001_35020000001320000002.live.flvs',
     //8组设备的bucket名称
@@ -10,13 +10,5 @@ export default {
     WD_Code:['1-1', '1-2', '1-3', '1-4', '2-1', '2-2', '2-3', '2-4', '3-1', '3-2', '3-3', '3-4', '4-1', '4-2', '4-3', '4-4', '5-1', '5-2', '5-3', '5-4', '6-1', '6-2', '6-3', '6-4', '7-1', '7-2', '7-3', '7-4', '8-1', '8-2', '8-3', '8-4', '9-1', '9-2', '9-3', '9-4', '10-1', '10-2', '10-3', '10-4'],
     //token
     token:'9UK55wEJCPvmaxML0TcA2QVjizAlephnzfffsY_7jo2STG6sOfs9rekA3r3ETznbY16pF9kOQOHq_iTmjWl0uQ==',
-    //header
-    getHeaders() {
-        return {
-            isToken: false,
-            repeatSubmit: false,
-            Authorization: 'Token ' + this.token, // 使用this.token来引用token值
-            'Content-Type': 'application/json' // 确保设置正确的 Content-Type
-        };
-    }
+    
 }

src/views/dcs/homePage/index.vue

@@ -10,7 +10,6 @@
                 <el-row :gutter="20">
                     <el-col :span="8" class="el_col_box">
                         <dv-border-box-1>
-                            <!-- <div class="el_col_box_title">设备状态</div> -->
                             <div class="chart">
                                 <div ref="chartLeftTop" class="chart_left_top chart_content" />
                             </div>
@@ -24,44 +23,50 @@
                     </el-col>
                 </el-row>
             </div>
+
             <div class="el_second_row">
-                <el-row :gutter="20">
-                    <el-col :span="8" class="el_col_box">
-                        <dv-border-box-1></dv-border-box-1>
-                    </el-col>
-                    <el-col :span="8" class="el_col_box">
+                <div class="chart_box">
+                    <dv-border-box-1>
+                        <div class="chart">
 
-                    </el-col>
-                    <el-col :span="8" class="el_col_box">
-                        <dv-border-box-1>
-                            <div class="chart">
-                                <!-- 设备状态 -->
-                                <div ref="chartRightMiddle" style="width: 100%; height: 300px;" />
-                            </div>
-                        </dv-border-box-1>
-                    </el-col>
-                </el-row>
+                        </div>
+                    </dv-border-box-1>
+                </div>
+                <div class="chart_box">
+                    <dv-border-box-1>
+                        <div class="chart">
+                            <div ref="chartRightMiddle" style="width: 100%; height: 300px;" />
+                        </div>
+                    </dv-border-box-1>
+                </div>
             </div>
             <div class="el_third_row">
-                <el-row :gutter="20">
-                    <el-col :span="8" class="el_col_box">
-                        <dv-border-box-1></dv-border-box-1>
-                    </el-col>
-                    <el-col :span="8" class="el_col_box">
+                <div class="chart_box">
+                    <dv-border-box-1>
+                        <div class="chart">
 
-                    </el-col>
-                    <el-col :span="8" class="el_col_box">
-                        <dv-border-box-1></dv-border-box-1>
-                    </el-col>
-                </el-row>
+                        </div>
+                    </dv-border-box-1>
+                </div>
+                <div class="chart_box">
+                    <!-- 设备预警信息表 -->
+                    <dv-border-box-1>
+                        <div class="chart_box_title">设备预警信息表</div>
+                        <div class="chart">
+                            <dv-scroll-board :config="alarmConfig" style="width:605px;height:250px"
+                                ref="alarmScrollBoard" />
+                        </div>
+                    </dv-border-box-1>
+                </div>
             </div>
         </div>
     </div>
 </template>
 <script>
 import '@/css/dcs/style.css'
+import config from '@/myConfig/config';
 import * as echarts from 'echarts'
-import { getHourFlowData } from '@/api/dcs/dcs'
+import { getHourFlowData, getEqTempData, getAlarmData } from '@/api/dcs/dcs'
 
 export default {
     components: {},
@@ -71,9 +76,11 @@ export default {
             time: '',// 时间
             week: '',// 星期
             timeInterval: null,
+            updateChartInterval: null,
 
             chartInstance: null, // ECharts 实例对象
             chartRightMiddle: null, // 右中ECharts 实例对象
+            alarmScrollBoard: null, // 设备预警信息表实例对象
 
             options: {
                 dataset: {
@@ -91,6 +98,9 @@ export default {
                     }
                 },
                 legend: {//图例组件
+                    textStyle: {
+                        color: '#fff'
+                    }
                 },
                 xAxis: [
                     {
@@ -116,16 +126,24 @@ export default {
 
             // 设备状态
             datasetSource2: [
-                ['eqName', '空闲', '故障', '生产'],
-                ['eq1', 10, 20, 30],
-                ['eq2', 15, 25, 35],
-                ['eq3', 20, 30, 40],
-                ['eq4', 25, 35, 45],
-                ['eq5', 30, 40, 50],
-                ['eq6', 35, 45, 55],
-                ['eq7', 40, 50, 60],
-                ['eq8', 45, 55, 65],
+                ['设备名称', '空闲', '生产', '故障'],
+                [config.eqGroupNames[0], 0, 0, 0],
+                [config.eqGroupNames[1], 0, 0, 0],
+                [config.eqGroupNames[2], 0, 0, 0],
+                [config.eqGroupNames[3], 0, 0, 0],
+                [config.eqGroupNames[4], 0, 0, 0],
+                [config.eqGroupNames[5], 0, 0, 0],
+                [config.eqGroupNames[6], 0, 0, 0],
+                [config.eqGroupNames[7], 0, 0, 0],
             ],
+            // 设备预警信息表
+            alarmConfig: {
+                columnWidth: [70],//列宽
+                waitTime: 2000,//等待时间
+                // carousel: 'page',
+                header: ['设备组', '设备名', '预警信息', '时间'],
+                data: []
+            }
         }
 
     },
@@ -133,9 +151,11 @@ export default {
         this.setIntervalTime()// 时间显示
         this.getWeek()// 星期显示
         this.initChart()// 初始化图表 
+        this.setIntervalUpdateChart()// 图表数据更新
     },
     beforeDestroy() {
         this.clearIntervalTime()
+        this.clearIntervalUpdateChart()
     },
 
     methods: {
@@ -145,6 +165,16 @@ export default {
                 this.time = new Date().toLocaleString()
             }, 1000)
         },
+        setIntervalUpdateChart() {
+            this.updateChartInterval = setInterval(() => {
+                this.updateChartRightMiddle()
+                this.updateChartRightBottom()
+            }, 2000)
+        },
+        clearIntervalUpdateChart() {
+            clearInterval(this.updateChartInterval)
+        },
+        // 清除时间显示
         clearIntervalTime() {
             clearInterval(this.timeInterval)
         },
@@ -156,8 +186,9 @@ export default {
         },
         // 初始化图表
         initChart() {
-            this.initchartLeftTop()
+            // this.initchartLeftTop()
             this.initchartRightMiddle()
+            this.initChartRightBottom()
 
         },
         //初始化左上图表
@@ -182,6 +213,23 @@ export default {
         },
         //初始化右中图表
         initchartRightMiddle() {
+            // 数据初始化·
+            let datasetSource2 = this.datasetSource2
+            // getEqTempData().then(res => {
+            //     // console.log('getEqTempData: ', this.convertData(res))
+            //     const data = this.convertData(res)
+            //     const valueIndex = data[0].indexOf('_value')
+            //     const tableIndex = data[0].indexOf('table')
+            //     for (let i = 1; i < data.length; i++) {
+            //         const index = parseInt(data[i][tableIndex])
+            //         if (data[i][valueIndex] >= 60) {
+            //             datasetSource2[index + 1][2]++
+            //         } else if (data[i][valueIndex] < 45) {
+            //             datasetSource2[index + 1][1]++
+            //         } else {
+            //             datasetSource2[index + 1][3]++
+            //         }
+            //     }
             const chart = echarts.init(this.$refs.chartRightMiddle);
             this.chartRightMiddle = chart;
             const series = [
@@ -200,20 +248,109 @@ export default {
             this.chartRightMiddle.setOption({
                 ...this.options,
                 dataset: {
-                    source: this.datasetSource2,
+                    source: datasetSource2,
                 },
                 series: series,
             })
+            // })
+
+        },
+        //初始化右下图表
+        initChartRightBottom() {
+            //实例化右下图表
+            this.alarmScrollBoard = this.$refs.alarmScrollBoard
+        },
+        // 更新右下图表
+        updateChartRightBottom() {
+            getAlarmData().then(res => {
+                const data = this.convertData(res)
+                // const valueIndex = data[0].indexOf('_value')
+                const nameIndex = data[0].indexOf('_field')
+                const BucketIndex = data[0].indexOf('_bucket')
+                const timeIndex = data[0].indexOf('_time')
+                let alarmData = []
+                for (let i = 1; i < data.length; i++) {
+                    let dataArr = []
+                    //根据桶名找到对应的设备组名
+                    dataArr.push(config.eqGroupNames[config.eqBucketNames.indexOf(data[i][BucketIndex])])
+                    dataArr.push(data[i][nameIndex])
+                    dataArr.push('温度超过阈值，请及时查看')
+                    dataArr.push(new Date(data[i][timeIndex]).toLocaleString())
+                    alarmData.push(dataArr)
+                }
+                this.alarmConfig.data = alarmData
+                this.alarmScrollBoard.updateRows(alarmData)
+            })
+        },
+        // 右中图表数据更新
+        updateChartRightMiddle() {
+            if (this.chartRightMiddle) {
+                const chart = this.chartRightMiddle
+                // 数据初始化·
+                let datasetSource2 = [
+                    ['设备名称', '空闲', '生产', '故障'],
+                    [config.eqGroupNames[0], 0, 0, 0],
+                    [config.eqGroupNames[1], 0, 0, 0],
+                    [config.eqGroupNames[2], 0, 0, 0],
+                    [config.eqGroupNames[3], 0, 0, 0],
+                    [config.eqGroupNames[4], 0, 0, 0],
+                    [config.eqGroupNames[5], 0, 0, 0],
+                    [config.eqGroupNames[6], 0, 0, 0],
+                    [config.eqGroupNames[7], 0, 0, 0],
+                ]
+                // console.log('updateChartRightMiddle', this.datasetSource2)
+                getEqTempData().then(res => {
+                    // console.log('getEqTempData: ', res)
+                    // console.log('getEqTempData: ', this.convertData(res))
+
+                    const data = this.convertData(res)
+                    const valueIndex = data[0].indexOf('_value')
+                    // const tableIndex = data[0].indexOf('table')
+
+                    const rangeIndex = data[0].indexOf('temp_range')
+                    const BucketIndex = data[0].indexOf('_bucket')
+                    for (let i = 1; i < data.length; i++) {
+                        const index1 = config.eqBucketNames.indexOf(data[i][BucketIndex]) + 1
+                        const index2 = parseInt(data[i][rangeIndex])
+                        datasetSource2[index1][index2] = data[i][valueIndex]
+                    }
+                    // for (let i = 1; i < data.length; i++) {
+                    //     const index = parseInt(data[i][tableIndex])
+                    //     if (data[i][valueIndex] >= 60) {
+                    //         datasetSource2[index + 1][2]++
+                    //     } else if (data[i][valueIndex] < 45) {
+                    //         datasetSource2[index + 1][1]++
+                    //     } else {
+                    //         datasetSource2[index + 1][3]++
+                    //     }
+                    // }
+                    this.updateChartData(chart, datasetSource2)
+                })
+            }
+
         },
         //图表数据更新
-        updateChartData(ref, data) {
-            ref.setOption({
+        updateChartData($ref, data) {
+            $ref.setOption({
                 dataset: {
                     source: data,
                 },
             })
         },
-
+        // 转换数据格式
+        convertData(input) {
+            // 去除可能存在的多余空格，并按行分割输入字符串
+            const lines = input.trim().split('\n').map(line => line.trim());
+            // 获取列名（标题）
+            const headers = lines[0].split(',');
+            const result = lines.map(line => {
+                // 按逗号分割当前行的数据
+                const values = line.split(',');
+                // 将每行数据与对应的列名组合起来形成对象，然后转换成所需格式
+                return headers.map((header, index) => values[index]);
+            });
+            return result;
+        }
     }
 }
 </script>
@@ -281,30 +418,53 @@ export default {
                 text-align: center;
                 height: 300px;
 
-                .el_col_box_title {
-                    color: #FFFFFF;
-                    font-size: 24px;
-                    font-weight: bold;
-                    // padding-top: 15px;
-                }
-
-
             }
+
         }
 
         .el_second_row {
-            .el_col_box {
+            display: flex;
+            justify-content: space-between;
+
+            // align-items: center;
+            // margin-top: 50px;
+            .chart_box {
+                width: 626px;
                 text-align: center;
                 height: 300px;
 
+
             }
         }
 
         .el_third_row {
-            .el_col_box {
+            display: flex;
+            justify-content: space-between;
+
+            // align-items: center;
+            // margin-top: 50px;
+            .chart_box {
+                width: 626px;
                 text-align: center;
                 height: 300px;
+                .chart_box_title{
+                    font-size: 24px;
+                    font-weight: 500;
+                    color: #fff;
+                }
 
+                .chart {
+                    // width: 80%;
+                    margin-left: 10px;
+                    background: rgba($color: #0c2839, $alpha: 0.3);
+                    .dv-scroll-board{
+                        // padding-top: 12px;
+                        //透明度
+                        opacity: 0.8;
+                        // border-radius: 4px;
+                        box-sizing: border-box;
+                    }
+                }
             }
         }
     }