fix:数据

web

8 天以前 6e6127068f03a7fe655f1fd504c488f20683039f

 src/views/screen/data.vue

@@ -3,12 +3,51 @@
        <div class="data-l">
            <div class="left">
                <div class="left-item">
                    <div class="item-t">报警次数</div>
                    <div class="item-c"></div>
                    <div class="item-t">
                        <div class="title-left">报警次数</div>
                        <div class="title-right">
                            <el-select
                                v-model="typeValue.recordType"
                                size="small"
                                style="width: 120px"
                                @change="getStaticWarn"
                            >
                                <el-option
                                v-for="item in timeOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                />
                            </el-select>
                        </div>
                    </div>
                    <div class="item-c">
                        <el-table 
                            :data="warnStaticData" 
                            :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>
                    </div>
                </div>
                <div class="left-item">
                    <div class="item-t">街道统计</div>
                    <div class="item-c"></div>
                    <div class="item-c">
                        <el-table 
                            :data="streetTableData" 
                            :header-cell-style="headerStyle"
                            :cell-style="rowStyle"
                            style="height: 100%;"
                        >
                            <el-table-column prop="pointName" label="" />
                            <el-table-column prop="count" label="气体处置次数/报警次数汇总" align="center" />
                        </el-table>
                    </div>
                </div>
            </div>
        </div>
@@ -16,11 +55,70 @@
            <div class="center">
                <div class="center-item">
                    <div class="item-t">报警记录</div>
                    <div class="item-c"></div>
                    <div class="item-c">
                        <el-table 
                            :data="recordData" 
                            :header-cell-style="headerStyle"
                            :cell-style="rowStyle"
                            style="height: 100%;"
                        >
                            <el-table-column prop="facilityCode" label="设备编号" />
                            <el-table-column prop="address" 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>
                <div class="center-item">
                    <div class="item-t">气体浓度监测曲线</div>
                    <div class="item-c"></div>
                    <div class="item-t">
                        <div class="title-left">气体浓度监测曲线</div>
                        <div class="title-right">
                            <el-select
                                v-model="typeValue.dateType"
                                size="small"
                                style="width: 120px"
                                @change="getLine"
                            >
                                <el-option
                                v-for="item in timeOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                />
                            </el-select>
                            <el-select
                                v-model="typeValue.pointId"
                                size="small"
                                style="width: 120px"
                                @change="getLine"
                            >
                                <el-option
                                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>
                    </div>
                    <div class="item-c">
                        <div class="gasCharts" ref="gasRef"></div>
                    </div>
                </div>
            </div>
        </div>
@@ -28,11 +126,35 @@
            <div class="right">
                <div class="right-item">
                    <div class="item-t">短信报警</div>
                    <div class="item-c"></div>
                    <div class="item-c">
                        <el-table 
                            :data="noteTableData" 
                            :header-cell-style="headerStyle"
                            :cell-style="rowStyle"
                            style="height: 100%;"
                        >
                            <el-table-column prop="pointId" label="设备编号" />
                            <el-table-column prop="address" label="安装地址" />
                            <el-table-column prop="device" label="设备类型" />
                            <el-table-column prop="device" label="报警类型" />
                        </el-table>
                    </div>
                </div>
                <div class="right-item">
                    <div class="item-t">邮箱报警</div>
                    <div class="item-c"></div>
                    <div class="item-c">
                        <el-table 
                            :data="mailTableData" 
                            :header-cell-style="headerStyle"
                            :cell-style="rowStyle"
                            style="height: 100%;"
                        >
                            <el-table-column prop="pointId" label="设备编号" />
                            <el-table-column prop="address" label="安装地址" />
                            <el-table-column prop="device" label="设备类型" />
                            <el-table-column prop="device" label="报警类型" />
                        </el-table>
                    </div>
                </div>
            </div>
        </div>
@@ -40,7 +162,210 @@
</template>

<script setup>
    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 timeOptions = [
        {value: 1, label: '日',},
        {value: 2, label: '周',},
        {value: 3, label: '月',},
        {value: 4, label: '年',}
    ]
    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'
    }
    const rowStyle = {
        "background-color": '#081C3F !important'
    }

    const setGasCharts = () => {
        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)
    }

    // 获取监控点列表
    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(() => {
        init()
    })
</script>

<style scoped lang="scss">
@@ -49,6 +374,21 @@
        color: #fff;
        display: flex;
        justify-content: space-between;
        :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;
            }
        }
        &-l{
            width: 25%;
            height: 100%;
@@ -67,7 +407,14 @@
                        width: 100%;
                        height: 3rem;
                        line-height: 3rem;
                        padding-left: 3.5rem;
                        padding: 0 5rem 0 3rem;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        .title-right{
                            display: flex;
                            gap: 1rem;
                        }
                    }
                    .item-c{
                        height: calc(100% - 3rem);
@@ -92,11 +439,22 @@
                    .item-t{
                        height: 3rem;
                        line-height: 3rem;
                        padding-left: 4.5rem;
                        padding: 0  6rem 0 4.5rem;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        .title-right{
                            display: flex;
                            gap: 1rem;
                        }
                    }
                    .item-c{
                        height: calc(100% - 3rem);
                        padding: 0.5rem;
                        .gasCharts{
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }