fix:数据

web

7 天以前 6e6127068f03a7fe655f1fd504c488f20683039f

fix:数据

 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
    })
}

 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
    })
}

 src/assets/images/screen/pos-run.png

 src/assets/images/screen/pos-stop.png

 src/assets/images/screen/pos-warn.png

 src/assets/images/screen/position.png

Binary files differ

 src/assets/images/screen/warn-one.png

Binary files differ

 src/assets/images/screen/warn-two.png

Binary files differ

 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>

 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>

 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>

 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"
                                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,16 +201,16 @@
        "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'
                trigger: 'axis'
            },
            legend: {
                data: ['最大值', '平均值', '最小值'],
                textStyle: {
                    color: '#fff'
                }
                },
                xAxis: {
                    type: 'category',
@@ -194,6 +222,7 @@
                },
                series: [
                    {
                    name: '最大值',
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: 'line',
                        areaStyle: {
@@ -209,16 +238,133 @@
                                ],
                            }
                        }
                },
                {
                    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)
        }

    // 获取监控点列表
    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%;

 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%;

 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"
                        <el-table 
                            :data="orderData" 
                            :header-cell-style="headerStyle"
                            :cell-style="rowStyle"
                            style="height: 100%;"
                                        >
                                            重庆市丰都县龙城大道288号
                                        </el-tooltip>
                                    </div>
                                    <div class="status"><el-button type="danger" size="small">未处理</el-button></div>
                                </div>
                            </div>
                        </div>
                            <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;
                            }
                        }
                    }

: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;
            }
            .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%;
                            }
                        }
                    }
                }
            }
        }
    .el-table__cell{
        border: none;
    }
}
</style>