From 6e6127068f03a7fe655f1fd504c488f20683039f Mon Sep 17 00:00:00 2001
From: web <candymxq888@outlook.com>
Date: 星期二, 15 七月 2025 18:28:02 +0800
Subject: [PATCH] fix:数据

---
 src/assets/images/screen/pos-warn.png     |    0 
 /dev/null                                 |    0 
 src/views/screen/device.vue               |   10 
 src/views/facility/facilityList/index.vue |    6 
 src/assets/images/screen/pos-run.png      |    0 
 src/assets/images/screen/pos-stop.png     |    0 
 src/views/facility/monitorList/index.vue  |   67 ++--
 src/api/screen/data.js                    |   48 +++
 src/views/screen/data.vue                 |  306 ++++++++++++++++-----
 src/api/screen/home.js                    |   27 +
 src/views/facility/facilityType/index.vue |   10 
 src/views/screen/index.vue                |  340 ++++++++++-------------
 12 files changed, 502 insertions(+), 312 deletions(-)

diff --git a/src/api/screen/data.js b/src/api/screen/data.js
new file mode 100644
index 0000000..e950e05
--- /dev/null
+++ b/src/api/screen/data.js
@@ -0,0 +1,48 @@
+import { publicRequest } from '@/utils/request.js'
+
+
+// 短信邮箱报警记录
+export const getWarnMessage = (data) => {
+    return publicRequest({
+        url: '/statisticsData/getMessageList',
+        method: 'POST',
+        data
+    })
+}
+
+
+// 街道报警记录
+export const getWarnStreet = () => {
+    return publicRequest({
+        url: '/statisticsData/getAlarmListByPoint',
+        method: 'POST',
+    })
+}
+
+// 报警次数统计
+export const getWarnStatic = (data) => {
+    return publicRequest({
+        url: '/statisticsData/getAlarmCount',
+        method: 'POST',
+        data
+    })
+}
+
+
+// 报警记录
+export const getWarnRecord = () => {
+    return publicRequest({
+        url: '/statisticsData/getAlarmRecord',
+        method: 'POST'
+    })
+}
+
+
+// 气体报警曲线
+export const getRecordLine = (data) => {
+    return publicRequest({
+        url: '/statisticsData/getLineChart',
+        method: 'POST',
+        data
+    })
+}
\ No newline at end of file
diff --git a/src/api/screen/home.js b/src/api/screen/home.js
new file mode 100644
index 0000000..99746c0
--- /dev/null
+++ b/src/api/screen/home.js
@@ -0,0 +1,27 @@
+import { publicRequest } from '@/utils/request.js'
+
+
+// 获取标点设备数据
+export const getPointFacityList = () => {
+    return publicRequest({
+        url: '/homeData/getFacilityList',
+        method: 'POST'
+    })
+}
+
+// 获取设备数量统计
+export const staticFacity = () => {
+    return publicRequest({
+        url: '/homeData/deviceCount',
+        method: 'post'
+    })
+}
+
+// 获取工单统计
+export const staticOrder = (data) => {
+    return publicRequest({
+        url: '/homeData/workOrderList',
+        method: 'post',
+        data
+    })
+}
\ No newline at end of file
diff --git a/src/assets/images/screen/pos-run.png b/src/assets/images/screen/pos-run.png
new file mode 100644
index 0000000..f296032
--- /dev/null
+++ b/src/assets/images/screen/pos-run.png
Binary files differ
diff --git a/src/assets/images/screen/pos-stop.png b/src/assets/images/screen/pos-stop.png
new file mode 100644
index 0000000..daa6705
--- /dev/null
+++ b/src/assets/images/screen/pos-stop.png
Binary files differ
diff --git a/src/assets/images/screen/pos-warn.png b/src/assets/images/screen/pos-warn.png
new file mode 100644
index 0000000..96ce4d8
--- /dev/null
+++ b/src/assets/images/screen/pos-warn.png
Binary files differ
diff --git a/src/assets/images/screen/position.png b/src/assets/images/screen/position.png
deleted file mode 100644
index 6d3f379..0000000
--- a/src/assets/images/screen/position.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/images/screen/warn-one.png b/src/assets/images/screen/warn-one.png
deleted file mode 100644
index 573e4d0..0000000
--- a/src/assets/images/screen/warn-one.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/images/screen/warn-two.png b/src/assets/images/screen/warn-two.png
deleted file mode 100644
index ce5f8ee..0000000
--- a/src/assets/images/screen/warn-two.png
+++ /dev/null
Binary files differ
diff --git a/src/views/facility/facilityList/index.vue b/src/views/facility/facilityList/index.vue
index 769a24e..29988e8 100644
--- a/src/views/facility/facilityList/index.vue
+++ b/src/views/facility/facilityList/index.vue
@@ -141,7 +141,7 @@
 
 /** 删除按钮操作 */
 function handleDelete(row) {
-    proxy.$modal.confirm('是否确认删除名称为"' + row.contact + '"的数据项?').then(function () {
+    proxy.$modal.confirm('是否确认删除名称为"' + row.pointName + '"的数据项?').then(function () {
         return facilityApi().remove(row.id);
     }).then(() => {
         getList();
@@ -325,9 +325,9 @@
                     <el-button link type="primary" icon="Edit" v-has="['update',route]"
                                @click="handleUpdate(scope.row)">修改
                     </el-button>
-                    <el-button link type="primary" icon="Delete" v-has="['delete',route]"
+                    <!-- <el-button link type="primary" icon="Delete" v-has="['delete',route]"
                                @click="handleDelete(scope.row)">删除
-                    </el-button>
+                    </el-button> -->
                 </template>
             </el-table-column>
         </el-table>
diff --git a/src/views/facility/facilityType/index.vue b/src/views/facility/facilityType/index.vue
index c758f1a..d8bc5e5 100644
--- a/src/views/facility/facilityType/index.vue
+++ b/src/views/facility/facilityType/index.vue
@@ -1,8 +1,8 @@
 <!--
  * @Author: Liuyi candymxq888@outlook.com
  * @Date: 2024-08-06 14:47:41
- * @LastEditors: hqs elkers@163.com
- * @LastEditTime: 2024-08-14 10:38:16
+ * @LastEditors: web candymxq888@outlook.com
+ * @LastEditTime: 2025-07-15 10:07:32
  * @FilePath: \water-qinghe-web\src\views\facilit\facilityList\facilityType.vue
  * @Description: 设备类型
 -->
@@ -100,7 +100,7 @@
 
 /** 删除按钮操作 */
 function handleDelete(row) {
-    proxy.$modal.confirm('是否确认删除名称为"' + row.contact + '"的数据项?').then(function () {
+    proxy.$modal.confirm('是否确认删除名称为"' + row.facilityTypeName + '"的数据项?').then(function () {
         return facilityTypeApi().remove(row.id);
     }).then(() => {
         getList();
@@ -217,9 +217,9 @@
                     <el-button link type="primary" icon="Edit" v-has="['update',route]"
                                @click="handleUpdate(scope.row)">修改
                     </el-button>
-                    <el-button link type="primary" icon="Delete" v-has="['delete',route]"
+                    <!-- <el-button link type="primary" icon="Delete" v-has="['delete',route]"
                                @click="handleDelete(scope.row)">删除
-                    </el-button>
+                    </el-button> -->
                 </template>
             </el-table-column>
         </el-table>
diff --git a/src/views/facility/monitorList/index.vue b/src/views/facility/monitorList/index.vue
index 519470d..285dce2 100644
--- a/src/views/facility/monitorList/index.vue
+++ b/src/views/facility/monitorList/index.vue
@@ -35,9 +35,10 @@
 let tableHeader = ref({
     pointName: '监控点名称',
     pointCode: '监控点编号',
-    pointType: '监控类型',
     address: '详细地址',
     createTimeView: '创建时间',
+    leftMargin: '左边距',
+    topMargin:'上边距',
     imageUrl: '图片',
     remark: '备注'
 })
@@ -61,35 +62,38 @@
 const formLabel = ({
     pointName: '监控点名称',
     pointCode: '监控点编号',
-    pointType: '监控点类型',
-    parentId: '父级监控点',
     address: '详细地址',
+    leftMargin: '左边距',
+    topMargin:'上边距',
+    boxType: '弹窗位置',
     imageUrl: '图片',
     remark: '备注'
 })
 const rules = ref({
     pointName: [{required: true, message: `请输入${formLabel.pointName}`, trigger: "blur"}],
     pointCode: [{required: true, message: `请输入${formLabel.address}`, trigger: "blur"}],
-    pointType: [{required: true, message: `请输入${formLabel.pointType}`, trigger: "blur"}],
+    topMargin: [{required: true, message: `请输入${formLabel.topMargin}`, trigger: "blur"}],
+    leftMargin: [{required: true, message: `请输入${formLabel.leftMargin}`, trigger: "blur"}],
+    boxType: [{required: true, message: `请输入${formLabel.boxType}`, trigger: "blur"}],
 });
 const form = ref({
     pointName: '',
     pointCode: '',
-    pointType: '',
-    parentId: '',
     address: '',
     imageUrl: '',
-    remark: ''
+    remark: '',
+    topMargin:'',
+    leftMargin: '',
+    boxType: ''
 });
 const searchParams = ref({
     keywords: '',
 });
 
-// 监控点类型
-const monityTypeList = [
-    {id: 1, name: '水温监测点'},
-    {id: 2, name: '生态流量监测点'}
-];
+const positionList = [
+    { label: '左侧', value: '0' },
+    { label: '右侧', value: '1' }
+]
 
 /** 新增按钮操作 */
 async function handleAdd() {
@@ -170,13 +174,14 @@
 /** 表单重置 */
 function reset() {
     form.value = {
-        parentId: '',
         pointName: '',
         pointCode: '',
-        pointType: '',
         address: '',
         imageUrl: '',
-        remark: ''
+        remark: '',
+        topMargin:'',
+        leftMargin: '',
+        boxType: ''
     };
     proxy.resetForm("formRef");
 }
@@ -227,9 +232,6 @@
                     <div v-if="key === 'imageUrl'">
                         <img :src="imgBaseUrl + scope.row.headImg" class="table-headImg" alt="" />
                     </div>
-                    <div v-else-if="key === 'pointType'">
-                        {{ scope.row.pointType === 1 ? '水温监测点' : '生态流量监测点' }}
-                    </div>
                 </template>
             </el-table-column>
             <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
@@ -253,21 +255,27 @@
         <!-- 添加/修改表单 -->
         <el-dialog :title="title" v-model="open" append-to-body center>
             <el-form class="form-box" ref="formRef" :model="form" :rules="rules" label-width='auto'>
-                <el-form-item :label="formLabel.pointType" prop="pointType">
-                    <el-select v-model="form.pointType" :placeholder="'请输入'+formLabel.pointType">
-                        <el-option
-                            v-for="(item,index) in monityTypeList"
-                            :label="item.name"
-                            :value="item.id"
-                            :key="index"
-                        ></el-option>
-                    </el-select>
-                </el-form-item>
                 <el-form-item :label="formLabel.pointName" prop="pointName">
                     <el-input v-model="form.pointName" :placeholder="'请输入'+formLabel.pointName"/>
                 </el-form-item>
                 <el-form-item :label="formLabel.pointCode" prop="pointCode">
                     <el-input v-model="form.pointCode" :placeholder="'请输入'+formLabel.pointCode"/>
+                </el-form-item>
+                <el-form-item :label="formLabel.leftMargin" prop="leftMargin">
+                    <el-input v-model="form.leftMargin" :placeholder="'请输入'+formLabel.leftMargin"/>
+                </el-form-item>
+                <el-form-item :label="formLabel.topMargin" prop="topMargin">
+                    <el-input v-model="form.topMargin" :placeholder="'请输入'+formLabel.topMargin"/>
+                </el-form-item>
+                <el-form-item :label="formLabel.boxType" prop="boxType">
+                    <el-select v-model="form.boxType" :placeholder="'请输入'+formLabel.boxType">
+                        <el-option
+                            v-for="(item,index) in positionList"
+                            :label="item.label"
+                            :value="item.value"
+                            :key="index"
+                        ></el-option>
+                    </el-select>
                 </el-form-item>
                 <el-form-item :label="formLabel.address" prop="address">
                     <el-input v-model="form.address" :placeholder="'请输入'+formLabel.address"/>
@@ -275,7 +283,8 @@
                 <el-form-item :label="formLabel.remark" prop="address">
                     <el-input v-model="form.remark" :placeholder="'请输入'+formLabel.remark"/>
                 </el-form-item>
-                <el-form-item></el-form-item>
+                <el-form-item>
+                </el-form-item>
                 <el-form-item label="图片" prop="imageUrl" style="flex: 1">
                     <upload-icons @uploadData="uploadData" :imageList="form.imageUrl" :limit="1"></upload-icons>
                     <span style="display: block;">(请上传1张设备图片)</span>
diff --git a/src/views/screen/data.vue b/src/views/screen/data.vue
index 8325b20..f3039f2 100644
--- a/src/views/screen/data.vue
+++ b/src/views/screen/data.vue
@@ -7,12 +7,13 @@
                         <div class="title-left">报警次数</div>
                         <div class="title-right">
                             <el-select
-                                v-model="value"
+                                v-model="typeValue.recordType"
                                 size="small"
                                 style="width: 120px"
+                                @change="getStaticWarn"
                             >
                                 <el-option
-                                v-for="item in options"
+                                v-for="item in timeOptions"
                                 :key="item.value"
                                 :label="item.label"
                                 :value="item.value"
@@ -22,7 +23,7 @@
                     </div>
                     <div class="item-c">
                         <el-table 
-                            :data="timeData" 
+                            :data="warnStaticData" 
                             :header-cell-style="headerStyle"
                             :cell-style="rowStyle"
                             style="height: 100%;"
@@ -38,13 +39,13 @@
                     <div class="item-t">街道统计</div>
                     <div class="item-c">
                         <el-table 
-                            :data="timeData" 
+                            :data="streetTableData" 
                             :header-cell-style="headerStyle"
                             :cell-style="rowStyle"
                             style="height: 100%;"
                         >
-                            <el-table-column prop="type" label="" />
-                            <el-table-column prop="device" label="气体处置次数/报警次数汇总" />
+                            <el-table-column prop="pointName" label="" />
+                            <el-table-column prop="count" label="气体处置次数/报警次数汇总" align="center" />
                         </el-table>
                     </div>
                 </div>
@@ -56,17 +57,17 @@
                     <div class="item-t">报警记录</div>
                     <div class="item-c">
                         <el-table 
-                            :data="timeData" 
+                            :data="recordData" 
                             :header-cell-style="headerStyle"
                             :cell-style="rowStyle"
                             style="height: 100%;"
                         >
-                            <el-table-column prop="type" label="设备编号" />
+                            <el-table-column prop="facilityCode" label="设备编号" />
                             <el-table-column prop="address" label="安装地址" />
-                            <el-table-column prop="device" label="设备类型" />
-                            <el-table-column prop="device" label="报警类型" />
-                            <el-table-column prop="device" label="报警次数" />
-                            <el-table-column prop="time" label="最新报警时间" />
+                            <el-table-column prop="facilityName" label="设备名称" />
+                            <el-table-column prop="alarmTypeView" label="报警类型" />
+                            <el-table-column prop="alarmCount" label="报警次数" />
+                            <el-table-column prop="latestAlarmTime" label="最新报警时间" />
                         </el-table>
                     </div>
                 </div>
@@ -75,27 +76,42 @@
                         <div class="title-left">气体浓度监测曲线</div>
                         <div class="title-right">
                             <el-select
-                                v-model="value"
+                                v-model="typeValue.dateType"
                                 size="small"
                                 style="width: 120px"
+                                @change="getLine"
                             >
                                 <el-option
-                                v-for="item in options"
+                                v-for="item in timeOptions"
                                 :key="item.value"
                                 :label="item.label"
                                 :value="item.value"
                                 />
                             </el-select>
-                             <el-select
-                                v-model="value"
+                            <el-select
+                                v-model="typeValue.pointId"
                                 size="small"
                                 style="width: 120px"
+                                @change="getLine"
                             >
                                 <el-option
-                                v-for="item in options"
-                                :key="item.value"
-                                :label="item.label"
-                                :value="item.value"
+                                v-for="item in pointList"
+                                :key="item.id"
+                                :label="item.pointName"
+                                :value="item.id"
+                                />
+                            </el-select>
+                            <el-select
+                                v-model="typeValue.columnsCode"
+                                size="small"
+                                style="width: 120px"
+                                @change="getLine"
+                            >
+                                <el-option
+                                v-for="item in commonList"
+                                :key="item.mark"
+                                :label="item.name"
+                                :value="item.mark"
                                 />
                             </el-select>
                         </div>
@@ -112,12 +128,12 @@
                     <div class="item-t">短信报警</div>
                     <div class="item-c">
                         <el-table 
-                            :data="timeData" 
+                            :data="noteTableData" 
                             :header-cell-style="headerStyle"
                             :cell-style="rowStyle"
                             style="height: 100%;"
                         >
-                            <el-table-column prop="type" label="设备编号" />
+                            <el-table-column prop="pointId" label="设备编号" />
                             <el-table-column prop="address" label="安装地址" />
                             <el-table-column prop="device" label="设备类型" />
                             <el-table-column prop="device" label="报警类型" />
@@ -128,12 +144,12 @@
                     <div class="item-t">邮箱报警</div>
                     <div class="item-c">
                         <el-table 
-                            :data="timeData" 
+                            :data="mailTableData" 
                             :header-cell-style="headerStyle"
                             :cell-style="rowStyle"
                             style="height: 100%;"
                         >
-                            <el-table-column prop="type" label="设备编号" />
+                            <el-table-column prop="pointId" label="设备编号" />
                             <el-table-column prop="address" label="安装地址" />
                             <el-table-column prop="device" label="设备类型" />
                             <el-table-column prop="device" label="报警类型" />
@@ -146,25 +162,37 @@
 </template>
 
 <script setup>
-    import {ref, onMounted} from 'vue'
+    import {ref, onMounted, reactive} from 'vue'
     import * as echarts from 'echarts';
+    import { getWarnMessage, getWarnStreet, getWarnStatic, getWarnRecord, getRecordLine } from '@/api/screen/data'
+    import pointApi from "@/api/facility/point";
+    import commonParameters from "@/api/configuration/commonParameters/index.js";
 
-    const value = ref('')
-    const options = [
-        {
-            value: 1,
-            label: 'Option1',
-        },
-        {
-            value: 2,
-            label: 'Option2',
-        }
+    const timeOptions = [
+        {value: 1, label: '日',},
+        {value: 2, label: '周',},
+        {value: 3, label: '月',},
+        {value: 4, label: '年',}
     ]
-    const timeData = ref([
-        { type: '甲烷浓度异常', device: '风机', address: '重庆市丰都县龙城大道435号', time: '2.9小时' },
-        { type: '甲烷浓度异常', device: '风机', address: '重庆市丰都县龙城大道435号', time: '2.9小时' },
-        { type: '甲烷浓度异常', device: '风机', address: '重庆市丰都县龙城大道435号', time: '2.9小时' },
-    ])
+    const pointList = ref([])
+    const commonList = ref([])
+
+    const typeValue = reactive({
+        recordType: 1,
+        dateType: 1,
+        pointId: '',
+        columnsCode: ''
+    })
+
+    const warnStaticData = ref([])
+    const streetTableData = ref([])
+    const recordData = ref([])
+    const recordLineData = ref([])
+    const mailTableData = ref([])
+    const noteTableData = ref([])
+
+    const gasRef = ref()
+    let gasCharts = null
 
     const headerStyle = { 
         "background-color": '#041025 !important'
@@ -173,52 +201,170 @@
         "background-color": '#081C3F !important'
     }
 
-    const gasRef = ref()
-    let gasCharts = null
-
     const setGasCharts = () => {
-        if(gasRef.value){
-            gasCharts = echarts.init(gasRef.value)
-
-            const option = {
-                tooltip: {
-                    trigger: 'item'
-                },
-                xAxis: {
-                    type: 'category',
-                    boundaryGap: false,
-                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-                },
-                yAxis: {
-                    type: 'value'
-                },
-                series: [
-                    {
-                        data: [820, 932, 901, 934, 1290, 1330, 1320],
-                        type: 'line',
-                        areaStyle: {
-                            color: {
-                                type: 'linear',
-                                x: 0,
-                                y: 0,
-                                x2: 0,
-                                y2: 1,
-                                colorStops: [
-                                    {offset: 0, color: 'rgba(118,196,235,1)' },
-                                    {offset: 1, color: 'rgba(118,196,235,0)'}
-                                ],
-                            }
+        const option = {
+            tooltip: {
+                trigger: 'axis'
+            },
+            legend: {
+                data: ['最大值', '平均值', '最小值'],
+                textStyle: {
+                    color: '#fff'
+                }
+            },
+            xAxis: {
+                type: 'category',
+                boundaryGap: false,
+                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+            },
+            yAxis: {
+                type: 'value'
+            },
+            series: [
+                {
+                    name: '最大值',
+                    data: [820, 932, 901, 934, 1290, 1330, 1320],
+                    type: 'line',
+                    areaStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 0,
+                            y2: 1,
+                            colorStops: [
+                                {offset: 0, color: 'rgba(118,196,235,1)' },
+                                {offset: 1, color: 'rgba(118,196,235,0)'}
+                            ],
                         }
                     }
-                ]
-            };
+                },
+                {
+                    name: '平均值',
+                    data: [186, 555, 321, 586, 1111, 666, 777],
+                    type: 'line',
+                    areaStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 0,
+                            y2: 1,
+                            colorStops: [
+                                {offset: 0, color: 'rgba(118,196,235,1)' },
+                                {offset: 1, color: 'rgba(118,196,235,0)'}
+                            ],
+                        }
+                    }
+                },
+                {
+                    name: '最小值',
+                    data: [86, 222, 186, 496, 888, 367, 436],
+                    type: 'line',
+                    areaStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 0,
+                            y2: 1,
+                            colorStops: [
+                                {offset: 0, color: 'rgba(118,196,235,1)' },
+                                {offset: 1, color: 'rgba(118,196,235,0)'}
+                            ],
+                        }
+                    }
+                },
+            ]
+        };
 
-            gasCharts.setOption(option)
+        gasCharts.setOption(option)
+    }
+
+    // 获取监控点列表
+    const getPointData = () => {
+        const searchData = {
+            limit: 100,
+            page: 1
         }
+        return pointApi().search(searchData).then((res) => {
+            pointList.value = res.data.list
+            typeValue.pointId = res.data.list[0].id
+        })
+    }
+
+    // 获取公共参数
+    const getConfigData = () => {
+        const searchData = {
+            limit: 100,
+            page: 1
+        }
+        return commonParameters().search(searchData).then((res) =>{
+            commonList.value = res.data.list
+            typeValue.columnsCode = res.data.list[0].mark
+        })
+    }
+
+
+    // 报警数据, type 1邮件, 2短信
+    const getWarnData = () => {
+        const mailSearch = { limit: 100, page: 1, type: 1 }
+        const noteSearch = { limit: 100, page: 1, type: 2 }
+        Promise.all([getWarnMessage(mailSearch), getWarnMessage(noteSearch)]).then(res => {
+            mailTableData.value = res[0].data.list
+            noteTableData.value = res[1].data.list
+        })
+    }
+
+    // 街道报警
+    const getWarenbyStreet = () => {
+        getWarnStreet().then(res => {
+            streetTableData.value = res.data
+        })
+    }
+
+    // 报警次数统计
+    const getStaticWarn = () => {
+        getWarnStatic({ dateType: typeValue.recordType }).then(res => {
+            warnStaticData.value = res.data
+        })
+    }
+
+    // 报警记录
+    const getRedord = () => {
+        getWarnRecord().then(res => {
+           recordData.value = res.data
+        })
+    }
+
+    // 报警记录曲线
+    const getLine = () => {
+        const searchData = {
+            pointId: typeValue.pointId,
+            dateType: typeValue.dateType,
+            columnsCode: typeValue.columnsCode,
+        }
+        getRecordLine(searchData).then(res => {
+            recordLineData.value = res.data
+            setGasCharts()
+        })
+    }
+
+    const init = async () => {
+        if(gasRef.value){
+            gasCharts = echarts.init(gasRef.value)
+        }
+        await getPointData()
+        await getConfigData()
+        getWarnData()
+        getWarenbyStreet()
+        getStaticWarn()
+        getRedord()
+        getLine()
     }
 
     onMounted(() => {
-        setGasCharts()
+        init()
     })
 </script>
 
@@ -230,6 +376,7 @@
         justify-content: space-between;
         :deep(.el-table){
             --el-table-border-color: #000;
+            --el-table-bg-color: transparent;
             th{
                 font-size: 12px;
                 color: #fff;
@@ -241,9 +388,6 @@
             .el-table__cell{
                 border: none;
             }
-        }
-        :deep(.el-scrollbar__wrap--hidden-default){
-            background-color: #000 !important;
         }
         &-l{
             width: 25%;
diff --git a/src/views/screen/device.vue b/src/views/screen/device.vue
index c10a067..d735b45 100644
--- a/src/views/screen/device.vue
+++ b/src/views/screen/device.vue
@@ -11,10 +11,10 @@
                             :cell-style="rowStyle"
                             style="height: 100%;"
                         >
-                            <el-table-column prop="type" label="异常类型" />
+                            <el-table-column prop="type" label="异常监测点" />
                             <el-table-column prop="device" label="异常设备" />
-                            <el-table-column prop="address" label="异常位置" />
-                            <el-table-column prop="time" label="累计时长" />
+                            <el-table-column prop="address" label="报警内容" min-width="150" />
+                            <el-table-column prop="time" label="报警时长" />
                         </el-table>
                     </div>
                 </div>
@@ -322,6 +322,7 @@
         justify-content: space-between;
         :deep(.el-table){
             --el-table-border-color: #000;
+            --el-table-bg-color: transparent;
             th{
                 font-size: 12px;
                 color: #fff;
@@ -333,9 +334,6 @@
             .el-table__cell{
                 border: none;
             }
-        }
-        :deep(.el-scrollbar__wrap--hidden-default){
-            background-color: #000 !important;
         }
         &-l{
             width: 29%;
diff --git a/src/views/screen/index.vue b/src/views/screen/index.vue
index 255484b..dd509e9 100644
--- a/src/views/screen/index.vue
+++ b/src/views/screen/index.vue
@@ -6,43 +6,60 @@
         <div class="home-t"></div>
         <div class="home-content">
             <div class="hc-position">
-                <div class="point" v-for="item in pointList" :key="item.id" 
-                    :style="{left: `${item.left}%`, top: `${item.top}%`, backgroundImage: `url(${warnTwo})`}"
+                <div class="point" v-for="(item, index) in pointData" :key="index" 
+                    :style="{left: `${item.left}%`, top: `${item.top}%`, backgroundImage: `url(${getPointImg(item.facilityState)})`}"
+                    @click.self="changeShow(index)"
                 >
-                    <div class="msg-l">
+                    <div class="msg-l" v-if="item.showMask && item.boxType === '0'">
+                        <div class="msg-item">
+                            <span class="name">设备名称:</span>
+                            <span class="val">{{ item.facilityName }}</span>
+                        </div>
                         <div class="msg-item">
                             <span class="name">设备状态:</span>
-                            <span class="val">{{ item.status }}</span>
+                            <span class="val">{{ item.facilityState }}</span>
                         </div>
                         <div class="msg-item">
                             <span class="name">甲烷浓度:</span>
-                            <span class="val">{{ item.jiawan }}</span>
+                            <span class="val">{{ item.methaneValue }}%</span>
+                        </div>
+                        <div class="msg-item">
+                            <span class="name">室内温度:</span>
+                            <span class="val">{{ item.temperature }}°</span>
                         </div>
                         <div class="msg-item">
                             <span class="name">风机状态:</span>
-                            <span class="val">{{ item.fengjiStatus }}</span>
+                            <span class="val">{{ item.facilityFanState }}</span>
                         </div>
                         <div class="msg-item">
                             <span class="name">硫化氢浓度:</span>
-                            <span class="val">{{ item.liuhuaqin }}</span>
+                            <span class="val">{{ item.hyrothionValue }}ppm</span>
                         </div>
                     </div>
-                    <div class="msg-r">
+                    <div class="msg-r" v-if="item.showMask && item.boxType === '1'">
+                        <div class="msg-item">
+                            <span class="name">设备名称:</span>
+                            <span class="val">{{ item.facilityName }}</span>
+                        </div>
                         <div class="msg-item">
                             <span class="name">设备状态:</span>
-                            <span class="val">{{ item.status }}</span>
+                            <span class="val">{{ item.facilityState }}</span>
                         </div>
                         <div class="msg-item">
                             <span class="name">甲烷浓度:</span>
-                            <span class="val">{{ item.jiawan }}</span>
+                            <span class="val">{{ item.methaneValue }}%</span>
+                        </div>
+                        <div class="msg-item">
+                            <span class="name">室内温度:</span>
+                            <span class="val">{{ item.temperature }}°</span>
                         </div>
                         <div class="msg-item">
                             <span class="name">风机状态:</span>
-                            <span class="val">{{ item.fengjiStatus }}</span>
+                            <span class="val">{{ item.facilityFanState }}</span>
                         </div>
                         <div class="msg-item">
                             <span class="name">硫化氢浓度:</span>
-                            <span class="val">{{ item.liuhuaqin }}</span>
+                            <span class="val">{{ item.hyrothionValue }}ppm</span>
                         </div>
                     </div>
                 </div>
@@ -51,68 +68,47 @@
                 <div class="shebei item">
                     <div class="item-t">辖区内设备数统计</div>
                     <div class="item-c">
-                        <div class="shebei-head">
-                            <div>辖区位置</div>
-                            <div>甲烷传感器</div>
-                            <div>硫化氢传感器</div>
-                            <div>中端控制器</div>
-                            <div>风机设备</div>
-                            <div>总设备数</div>
-                        </div>
-                        <div class="shebei-conetnt">
-                            <div class="list">
-                                <div class="listV">
-                                    <div>龙城大道</div>
-                                    <div>5台</div>
-                                    <div>5台</div>
-                                    <div>5台</div>
-                                    <div>5台</div>
-                                    <div>5台</div>
-                                </div>
-                                <div class="listV">
-                                    <div>龙城大道</div>
-                                    <div>5台</div>
-                                    <div>5台</div>
-                                    <div>5台</div>
-                                    <div>5台</div>
-                                    <div>5台</div>
-                                </div>
-                            </div>
-                        </div>
+                        <el-table 
+                            :data="facityData" 
+                            :header-cell-style="headerStyle"
+                            :cell-style="rowStyle"
+                            style="height: 100%;"
+                        >
+                            <el-table-column prop="pointName" label="辖区位置" align="center" />
+                            <el-table-column prop="methaneCount" label="甲烷传感器" align="center" />
+                            <el-table-column prop="hyrothionCount" label="硫化氢传感器" min-width="100" align="center" />
+                            <el-table-column prop="boxCount" label="终端控制器" align="center" />
+                            <el-table-column prop="facilityFanCount" label="风机设备" align="center" />
+                            <el-table-column prop="sumCount" label="总设备数" align="center" />
+                        </el-table>
                     </div>
                 </div>
                 <div class="gongdan item">
                     <div class="item-t">未处理工单统计</div>
                     <div class="item-c">
-                        <div class="gongdan-head">
-                            <div class="no">工单号</div>
-                            <div class="type">工单类型</div>
-                            <div class="time">上报时间</div>
-                            <div class="user">上报人</div>
-                            <div class="address">所属地址</div>
-                            <div class="status">工单状态</div>
-                        </div>
-                        <div class="gongdan-content">
-                            <div class="list">
-                                <div class="listV">
-                                    <div class="no">001</div>
-                                    <div class="type">设备维修</div>
-                                    <div class="time">2025/06/23</div>
-                                    <div class="user">监测设备终端</div>
-                                    <div class="address">
-                                        <el-tooltip
-                                            class="box-item"
-                                            effect="dark"
-                                            content="重庆市丰都县龙城大道288号"
-                                            placement="top"
-                                        >
-                                            重庆市丰都县龙城大道288号
-                                        </el-tooltip>
-                                    </div>
-                                    <div class="status"><el-button type="danger" size="small">未处理</el-button></div>
-                                </div>
-                            </div>
-                        </div>
+                        <el-table 
+                            :data="orderData" 
+                            :header-cell-style="headerStyle"
+                            :cell-style="rowStyle"
+                            style="height: 100%;"
+                        >
+                            <el-table-column prop="code" label="工单号" align="center" />
+                            <el-table-column label="工单类型" align="center">
+                                <template #default="scope">
+                                    <div v-if="scope.row.type === 1">设备维护</div>
+                                    <div v-else>设备维修</div>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="createTimeView" label="上报时间" align="center" min-width="100" />
+                            <el-table-column prop="createUserName" label="上报人" align="center" />
+                            <el-table-column prop="address" label="所属地址" align="center" min-width="120" />
+                            <el-table-column label="工单状态" align="center">
+                                <template #default="scope">
+                                    <div v-if="scope.row.executeState === 100" style="color: #ccc;">未执行</div>
+                                    <div v-else style="color: #36fc0e;">已执行</div>
+                                </template>
+                            </el-table-column>
+                        </el-table>
                     </div>
                 </div>
             </div>
@@ -122,14 +118,75 @@
 
 
 <script setup>
-    import postImg from '@/assets/images/screen/position.png'
-    import warnOne from '@/assets/images/screen/warn-one.png'
-    import warnTwo from '@/assets/images/screen/warn-two.png'
+    import { onMounted, ref } from 'vue'
+    import { getPointFacityList, staticFacity, staticOrder } from '@/api/screen/home'
+    import postRun from '@/assets/images/screen/pos-run.png'
+    import warnStop from '@/assets/images/screen/pos-stop.png'
+    import warnWarn from '@/assets/images/screen/pos-warn.png'
 
-    const pointList = ref([
-        { left: 25, top: 30, status: '一级报警', jiawan: '2.4%LEL', fengjiStatus: 1, liuhuaqin: '1.9%LEL', id: 1 },
-        { left: 40, top: 60, status: '一级报警', jiawan: '2.4%LEL', fengjiStatus: 1, liuhuaqin: '1.9%LEL', id: 2 },
-    ])
+    const headerStyle = { 
+        "background-color": '#041025 !important'
+    }
+    const rowStyle = {
+        "background-color": '#081C3F !important'
+    }
+
+    const pointData = ref([])
+    const facityData = ref([])
+    const orderData = ref([])
+
+    // 显示隐藏弹窗
+    const changeShow = (index) => {
+        pointData.value[index].showMask = !pointData.value[index].showMask
+    }
+
+    /*
+        获取图标
+        0停止  1运行  2一级报警  3二级报警 
+     */
+    const getPointImg = (status) => {
+        if(status === '运行中') {
+            return postRun
+        }else if(status === '一级报警' || status === '二级报警'){
+            return warnWarn
+        }else{
+            return warnStop
+        }
+    }
+
+    const getPointData = () => {
+        getPointFacityList().then(res => {
+            pointData.value = res.data.map(item => {
+                return {
+                    ...item, 
+                    showMask: false
+                }
+            })
+        })
+    }
+
+    const getFacity = () => {
+        staticFacity().then(res => {
+            facityData.value = res.data
+        })
+    }
+
+    const getOrder = () => {
+        const searchdata = {
+            limit: 100, 
+            page: 1
+        }
+        staticOrder(searchdata).then(res => {
+            orderData.value = res.data.list
+        })
+    }
+
+
+    onMounted(() => {
+        getPointData()
+        getFacity()
+        getOrder()
+    })
 
 </script>
 
@@ -168,7 +225,7 @@
             position: relative;
             .point{
                 position: absolute;
-                width: 56px;
+                width: 32px;
                 height: 80px;
                 background-repeat: no-repeat;
                 background-size: 100% 100%;
@@ -176,7 +233,7 @@
                     width: 250px;
                     height: 160px;
                     position: absolute;
-                    left: -235px;
+                    left: -245px;
                     top: 0;
                     background-image: url('@/assets/images/screen/msg-box-l.png');
                     background-repeat: no-repeat;
@@ -190,7 +247,7 @@
                     width: 250px;
                     height: 160px;
                     position: absolute;
-                    left: 40px;
+                    left: 30px;
                     top: 0;
                     background-image: url('@/assets/images/screen/msg-box-r.png');
                     background-repeat: no-repeat;
@@ -233,116 +290,23 @@
                     padding: 1rem 0.5rem;
                 }
             }
-            .shebei{
-                .shebei-head{
-                    height: 2rem;
-                    line-height: 2rem;
-                    display: flex;
-                    justify-content: space-between;
-                    font-size: 0.7rem;
-                    >div{
-                        width: 16%;
-                        flex-shrink: 0;
-                        text-align: center;
-                    }
-                }
-                .shebei-conetnt{
-                    height: calc(100% - 2rem);
-                    .list{
-                        height: 100%;
-                        overflow-y: scroll;
-                        &::-webkit-scrollbar{
-                            display: none;
-                        }
-                        .listV{
-                            display: flex;
-                            justify-content: space-between;
-                            font-size: 0.7rem;
-                            padding: 0.5rem 0;
-                            background-color: #081C3F;
-                            >div{
-                                width: 16%;
-                                flex-shrink: 0;
-                                text-align: center;
-                            }
-                        }
-                    }
-                }
-            }
-            .gongdan{
-                .gongdan-head{
-                    height: 2rem;
-                    line-height: 2rem;
-                    display: flex;
-                    justify-content: space-between;
-                    font-size: 0.7rem;
-                    >div{
-                        flex-shrink: 0;
-                        text-align: center;
-                    }
-                    .no{
-                        width: 8%;
-                    }
-                    .type{
-                        width: 12%;
-                    }
-                    .time{
-                        width: 15%;
-                    }
-                    .user{
-                        width: 20%;
-                    }
-                    .address{
-                        width: 30%;
-                    }
-                    .status{
-                        width: 15%;
-                    }
-                }
-                .gongdan-content{
-                    .list{
-                        height: 100%;
-                        overflow-y: scroll;
-                        &::-webkit-scrollbar{
-                            display: none;
-                        }
-                        .listV{
-                            display: flex;
-                            justify-content: space-between;
-                            align-items: center;
-                            font-size: 0.7rem;
-                            padding: 0.5rem 0;
-                            background-color: #081C3F;
-                            >div{
-                                flex-shrink: 0;
-                                text-align: center;
-                            }
-                            .no{
-                                width: 8%;
-                            }
-                            .type{
-                                width: 12%;
-                            }
-                            .time{
-                                width: 15%;
-                            }
-                            .user{
-                                width: 20%;
-                            }
-                            .address{
-                                width: 30%;
-                                overflow: hidden;
-                                white-space: nowrap;
-                                text-overflow: ellipsis;
-                            }
-                            .status{
-                                width: 15%;
-                            }
-                        }
-                    }
-                }
-            }
         }
     }
 }
+
+:deep(.el-table){
+    --el-table-border-color: #000;
+    --el-table-bg-color: transparent;
+    th{
+        font-size: 12px;
+        color: #fff;
+    }
+    tr{
+        font-size: 12px;
+        color: #fff;
+    }
+    .el-table__cell{
+        border: none;
+    }
+}
 </style>
\ No newline at end of file

--
Gitblit v1.9.3