fix:shuju

web

5 天以前 c45cbdd1fb5e1c491a58f24be403b97999c1a9ec

fix:shuju

 src/api/screen/device.js

对比新文件
@@ -0,0 +1,62 @@
import { publicRequest } from '@/utils/request.js'

// 工单
export const getOrder = () => {
    return publicRequest({
        url: '/facilityData/getUserWorkList',
        method: 'POST'
    })
}

// 风机管理
export const getFanFacity = (params) => {
    return publicRequest({
        url: '/facilityData/getFacilityFan',
        method: 'POST',
        params
    })
}

// 实时数据
export const getFacityData = (params) => {
    return publicRequest({
        url: '/facilityData/getDataList',
        method: 'POST',
        params
    })
}

// 设备运行时长
export const getFacityRunTime = () => {
    return publicRequest({
        url: '/facilityData/getFacilityRunTime',
        method: 'POST'
    })
}


// 设备报警
export const getFacityWarn = () => {
    return publicRequest({
        url: '/facilityData/getAlarmTime',
        method: 'POST'
    })
}


// 设备状态
export const getFacityStatus = () => {
    return publicRequest({
        url: '/facilityData/getFacilityState',
        method: 'POST'
    })
}


// 监控统计
export const getPointStatic = () => {
    return publicRequest({
        url: '/facilityData/getFacilityPointCount',
        method: 'POST'
    })
}

 src/views/screen/components/dataItem.vue

@@ -6,38 +6,48 @@
                <div class="gas-CH">
                    <img src="@/assets/images/screen/CH4.png" alt="" />
                </div>
                <div class="gas-data"><span>1.1</span>%</div>
                <div class="gas-data"><span>{{props.item.hydrogenValue}}</span>%</div>
            </div>
            <div class="gas">
                <div class="gas-t">H₂S</div>
                <div class="gas-H2">
                    <img src="@/assets/images/screen/H2S.png" alt="" />
                </div>
                <div class="gas-data"><span>1.2</span>ppm</div>
                <div class="gas-data"><span>{{ props.item.methaneValue }}</span>ppm</div>
            </div>
        </div>
        <div class="item-address">
            安装位置：重庆市丰都县龙城大道435号安装位置：重庆市丰都县龙城大道435号
            安装位置：{{ props.item.pointName }}
        </div>
        <div class="status">
            <span>运行状态：</span>
            <span class="val">正常运行</span>
            <span class="stop" v-if="props.item.facilityState === 0">停止</span>
            <span class="run" v-else-if="props.item.facilityState === 1">运行中</span>
            <span class="warn1" v-else-if="props.item.facilityState === 2">一级报警</span>
            <span class="warn2" v-else-if="props.item.facilityState === 3">二级报警</span>
        </div>
    </div>
</template>

<script setup>

    const props = defineProps({
        item: {
            type: Object,
            default: {}
        }
    })

</script>

<style lang="scss" scoped>
.item{
    width: 144px;
    width: 134px;
    height: 164px;
    border-radius: 10px;
    background: radial-gradient( rgba(50,154,196,0.5) 0%, rgba(21,74,131,0.5) 100%);
    box-shadow: inset 0px 0px 10px 0px rgba(50,154,196,0.8);
    padding: 8px;
    padding: 8px 4px;
    box-sizing: border-box;
    .item-air{
        display: flex;
@@ -94,9 +104,17 @@
    .status{
        font-size: 0.8rem;
        margin-top: 0.6rem;
        .val{
        .run{
            color: rgb(40, 250, 40);
            font-size: 0.8rem;
        }
        .stop{
            color: #ccc;
        }
        .warn1{
            color: #f1e313;
        }
        .warn2{
            color: #f14713;
        }
    }
}

 src/views/screen/device.vue

@@ -6,15 +6,15 @@
                    <div class="item-t">设备时长</div>
                    <div class="item-c">
                        <el-table 
                            :data="timeData" 
                            :data="facityWarnTable" 
                            :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="address" label="报警内容" min-width="150" />
                            <el-table-column prop="time" label="报警时长" />
                            <el-table-column prop="pointName" label="异常监测点" />
                            <el-table-column prop="facilityName" label="异常设备" />
                            <el-table-column prop="description" label="报警内容" />
                            <el-table-column prop="alarmTime" label="报警时长" />
                        </el-table>
                    </div>
                </div>
@@ -23,12 +23,13 @@
                        <div class="title-left">风机管理</div>
                        <div class="title-right">
                            <el-select
                                v-model="value"
                                v-model="typeValue.fengji"
                                size="small"
                                style="width: 8rem"
                                @change="getFanList"
                            >
                                <el-option
                                v-for="item in options"
                                v-for="item in fengjiOption"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
@@ -39,53 +40,14 @@
                    </div>
                    <div class="item-c">
                        <div class="fengji">
                            <div class="fengjiItem">
                                <div class="fengji-title">重庆市丰都县东麓国际小区4栋附三层风机</div>
                            <div class="fengjiItem" v-for="(item, index) in fengjiList" :key="index">
                                <div class="fengji-title">{{ item.pointName }}</div>
                                <div class="fengji-status">
                                    <img src="@/assets/images/screen/fengji.png" alt="" />
                                    <span>正在运行</span>
                                </div>
                            </div>
                             <div class="fengjiItem">
                                <div class="fengji-title">重庆市丰都县东麓国际小区4栋附三层风机</div>
                                <div class="fengji-status">
                                    <img src="@/assets/images/screen/fengji.png" alt="" />
                                    <span>正在运行</span>
                                </div>
                            </div>
                             <div class="fengjiItem">
                                <div class="fengji-title">重庆市丰都县东麓国际小区4栋附三层风机</div>
                                <div class="fengji-status">
                                    <img src="@/assets/images/screen/fengji.png" alt="" />
                                    <span>正在运行</span>
                                </div>
                            </div>
                             <div class="fengjiItem">
                                <div class="fengji-title">重庆市丰都县东麓国际小区4栋附三层风机</div>
                                <div class="fengji-status">
                                    <img src="@/assets/images/screen/fengji.png" alt="" />
                                    <span>正在运行</span>
                                </div>
                            </div>
                             <div class="fengjiItem">
                                <div class="fengji-title">重庆市丰都县东麓国际小区4栋附三层风机</div>
                                <div class="fengji-status">
                                    <img src="@/assets/images/screen/fengji.png" alt="" />
                                    <span>正在运行</span>
                                </div>
                            </div>
                             <div class="fengjiItem">
                                <div class="fengji-title">重庆市丰都县东麓国际小区4栋附三层风机</div>
                                <div class="fengji-status">
                                    <img src="@/assets/images/screen/fengji.png" alt="" />
                                    <span>正在运行</span>
                                </div>
                            </div>
                             <div class="fengjiItem">
                                <div class="fengji-title">重庆市丰都县东麓国际小区4栋附三层风机</div>
                                <div class="fengji-status">
                                    <img src="@/assets/images/screen/fengji.png" alt="" />
                                    <span>正在运行</span>
                                    <img :class="{run: item.facilityFanState === 1}" src="@/assets/images/screen/fengji.png" alt="" />
                                    <span v-if="item.facilityFanState === 0">停止</span>
                                    <span v-else-if="item.facilityFanState === 1">运行中</span>
                                    <span v-else-if="item.facilityFanState === 2">一级报警</span>
                                    <span v-else-if="item.facilityFanState === 3">二级报警</span>
                                </div>
                            </div>
                        </div>
@@ -95,18 +57,21 @@
                    <div class="item-t">工单处理</div>
                    <div class="item-c">
                        <el-table 
                            :data="timeData" 
                            :data="ordertable" 
                            :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="device" label="上报时间" />
                            <el-table-column prop="time" label="上报人" />
                            <el-table-column prop="code" label="工单号" />
                            <el-table-column prop="typeView" label="工单类型" />
                            <el-table-column prop="createTimeView" label="上报时间" />
                            <el-table-column prop="createUserName" label="上报人" />
                            <el-table-column prop="address" label="所属地址" />
                            <el-table-column prop="status" label="工单状态">
                                <div>已处理</div>
                            <el-table-column label="工单状态">
                                <template #default="scoped">
                                    <div v-if="scoped.row.executeState === 200" style="color: #36fc0e;">已处理</div>
                                    <div v-else style="color: #ccc;">未处理</div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
@@ -126,24 +91,26 @@
                        <div class="title-left">实时数据</div>
                        <div class="title-right">
                            <el-select
                                v-model="value"
                                v-model="typeValue.pointId"
                                size="small"
                                style="width: 8rem"
                                @change="getNewData"
                            >
                                <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="value"
                            <el-select
                                v-model="typeValue.facilityState"
                                size="small"
                                style="width: 8rem"
                                @change="getNewData"
                            >
                                <el-option
                                v-for="item in options"
                                v-for="item in fengjiOption"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
@@ -153,7 +120,9 @@
                    </div>
                    <div class="item-c">
                        <div class="data-list">
                            <dataItem />
                            <template v-for="(item, index) in newDataList" :key="index">
                                <dataItem :item="item" />
                            </template>
                        </div>
                    </div>
                </div>
@@ -171,15 +140,15 @@
                    <div class="item-t">风机状态</div>
                    <div class="item-c">
                        <el-table 
                            :data="timeData" 
                            :data="fengjiStatusTable" 
                            :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="address" label="运行地址" />
                            <el-table-column prop="time" label="总运行时长" />
                            <el-table-column prop="facilityId" label="风机编号" />
                            <el-table-column prop="runTimeString" label="单次运行时长" />
                            <el-table-column prop="pointName" label="运行地址" />
                            <el-table-column prop="sumTimeString" label="总运行时长" />
                        </el-table>
                    </div>
                </div>
@@ -187,15 +156,15 @@
                    <div class="item-t">设备报警</div>
                    <div class="item-c">
                        <el-table 
                            :data="timeData" 
                            :data="warnRecordTable" 
                            :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="facilityCode" label="设备编号" />
                            <el-table-column prop="alarmTypeView" label="报警类型" />
                            <el-table-column prop="address" label="报警地址" />
                            <el-table-column prop="time" label="报警时间" />
                            <el-table-column prop="latestAlarmTime" label="报警时间" />
                        </el-table>
                    </div>
                </div>
@@ -205,15 +174,34 @@
</template>

<script setup>
    import { onMounted } from 'vue';
    import { onMounted, reactive } from 'vue';
    import dataItem from './components/dataItem.vue'
    import * as echarts from 'echarts';
    import { getOrder, getFanFacity, getFacityData, getFacityRunTime, getFacityWarn, getFacityStatus, getPointStatic } from '@/api/screen/device'
    import { getWarnRecord } from '@/api/screen/data'
    import pointApi from "@/api/facility/point";

    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 facityWarnTable = ref([])
    const fengjiList = ref([])
    const ordertable = ref([])
    const facityStatus = ref([])
    const newDataList = ref([])
    const lineChartList = ref([])
    const fengjiStatusTable = ref([])
    const warnRecordTable = ref([])

    const typeValue = reactive({
        fengji: 1,
        pointId: '',
        facilityState: 1,
    })
    const fengjiOption = [
        {label: '停止', value: 0},
        {label: '运行中', value: 1},
        {label: '一级报警', value: 2},
        {label: '二级报警', value: 3}
    ]
    const pointList = ref([])

    const headerStyle = { 
        "background-color": '#041025 !important'
@@ -222,69 +210,58 @@
        "background-color": '#081C3F !important'
    }

    const value = ref('')
    const options = [
        {
            value: 1,
            label: 'Option1',
        },
        {
            value: 2,
            label: 'Option2',
        }
    ]
    const statusRef = ref()
    const moniterRef = ref()
    let statusCharts = null
    let moniterCharts = null

    const setStatusCharts = () => {
        if(statusRef.value){
            statusCharts = echarts.init(statusRef.value)

            const option = {
         const option = {
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    data: [
                        { value: 1048, name: 'Search Engine' },
                        { value: 735, name: 'Direct' },
                        { value: 580, name: 'Email' },
                        { value: 484, name: 'Union Ads' },
                        { value: 300, name: 'Video Ads' }
                    ]
                        type: 'pie',
                        radius: ['40%', '70%'],
                        data: facityStatus.value
                    }
                ]
            };

            statusCharts.setOption(option)
        }
    }

    const setMoniterCharts = () => {
         if(moniterRef.value){
            moniterCharts = echarts.init(moniterRef.value)

            const option = {
        let xdata = []
        let sdata = []
        lineChartList.value.forEach(el => {
            xdata.push(el.pointName)
            sdata.push(el.count)
        })
        const option = {
                tooltip: {
                    trigger: 'item'
                    trigger: 'axis'
                },
                dataZoom: [
                    {
                        id: 'dataZoomX',
                        type: 'slider',
                        xAxisIndex: [0],
                        filterMode: 'filter'
                    }
                ],
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    data: xdata
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        data: sdata,
                        type: 'line',
                        areaStyle: {
                            color: {
@@ -304,13 +281,109 @@
            };

            moniterCharts.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 getFacityTimelong = () => {
        getFacityWarn().then(res => {
            facityWarnTable.value = res.data
        })
    }

    // 获取工单
    const getOrderList = () => {
        getOrder().then(res => {
            ordertable.value = res.data
        })
    }

    // 风机管理
    const getFanList = () => {
        getFanFacity({ type: typeValue.fengji }).then(res => {
            fengjiList.value = res.data
        })
    }

    // 设备状态
    const getStatus = () => {
        getFacityStatus().then(res => {
            facityStatus.value = res.data.map(item => {
                return {
                    name: item.typeName,
                    value: Number(item.value)
                }
            })
            setStatusCharts()
        })
    }

    // 实时数据
    const getNewData = () => {
        const searchData = {
            pointId: typeValue.pointId,
            facilityState: typeValue.facilityState
        }
        getFacityData(searchData).then(res => {
            newDataList.value = res.data
        })
    }

    // 监控统计
    const getPoint = () => {
        getPointStatic().then(res => {
            lineChartList.value = res.data
            setMoniterCharts()
        })
    }


    // 风机状态
    const getFanStatus = () => {
        getFacityRunTime().then(res => {
            fengjiStatusTable.value = res.data
        })
    }

    // 设备报警
    const getFacityWarnRecord = () => {
        getWarnRecord().then(res => {
            warnRecordTable.value = res.data
        })
    }

     const init = async () => {
        if(statusRef.value){
            statusCharts = echarts.init(statusRef.value)
        }
        if(moniterRef.value){
            moniterCharts = echarts.init(moniterRef.value)
        }
        await getPointData()
        getFacityTimelong()
        getOrderList()
        getFanList()
        getStatus()
        getNewData()
        getPoint()
        getFanStatus()
        getFacityWarnRecord()
    }


    onMounted(() => {
        setStatusCharts()
        setMoniterCharts()
        init()
    })
</script>

@@ -400,6 +473,8 @@
                                    width: 2rem;
                                    height: 2rem;
                                    margin-right: 2rem;
                                }
                                .run{
                                    animation: rotateAnimation 1s linear 0s infinite;
                                }
                            }
@@ -440,6 +515,16 @@
                            width: 100%;
                            height: 100%;
                        }
                        .data-list{
                            height: 100%;
                            display: flex;
                            flex-wrap: wrap;
                            gap: 0.7rem;
                            overflow-y: scroll;
                            &::-webkit-scrollbar{
                                display: none;
                            }
                        }
                    }
                }
            }