fix:数据

web

8 天以前 6e6127068f03a7fe655f1fd504c488f20683039f

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