fix:xg

web

2025-07-08 f36c7eb7076e1292c10d75169b8927cacc451277

 src/views/screen/data.vue

@@ -3,12 +3,50 @@
        <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="value"
                                size="small"
                                style="width: 120px"
                            >
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                />
                            </el-select>
                        </div>
                    </div>
                    <div class="item-c">
                        <el-table 
                            :data="timeData" 
                            :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="timeData" 
                            :header-cell-style="headerStyle"
                            :cell-style="rowStyle"
                            style="height: 100%;"
                        >
                            <el-table-column prop="type" label="" />
                            <el-table-column prop="device" label="气体处置次数/报警次数汇总" />
                        </el-table>
                    </div>
                </div>
            </div>
        </div>
@@ -16,11 +54,55 @@
            <div class="center">
                <div class="center-item">
                    <div class="item-t">报警记录</div>
                    <div class="item-c"></div>
                    <div class="item-c">
                        <el-table 
                            :data="timeData" 
                            :header-cell-style="headerStyle"
                            :cell-style="rowStyle"
                            style="height: 100%;"
                        >
                            <el-table-column prop="type" 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>
                    </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="value"
                                size="small"
                                style="width: 120px"
                            >
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                />
                            </el-select>
                             <el-select
                                v-model="value"
                                size="small"
                                style="width: 120px"
                            >
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                />
                            </el-select>
                        </div>
                    </div>
                    <div class="item-c">
                        <div class="gasCharts" ref="gasRef"></div>
                    </div>
                </div>
            </div>
        </div>
@@ -28,11 +110,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="timeData" 
                            :header-cell-style="headerStyle"
                            :cell-style="rowStyle"
                            style="height: 100%;"
                        >
                            <el-table-column prop="type" 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="timeData" 
                            :header-cell-style="headerStyle"
                            :cell-style="rowStyle"
                            style="height: 100%;"
                        >
                            <el-table-column prop="type" 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 +146,80 @@
</template>

<script setup>
    import {ref, onMounted} from 'vue'
    import * as echarts from 'echarts';

    const value = ref('')
    const options = [
        {
            value: 1,
            label: 'Option1',
        },
        {
            value: 2,
            label: 'Option2',
        }
    ]
    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 headerStyle = { 
        "background-color": '#041025 !important'
    }
    const rowStyle = {
        "background-color": '#081C3F !important'
    }

    const gasRef = ref()
    let gasCharts = null

    const setGasCharts = () => {
        if(gasRef.value){
            gasCharts = echarts.init(gasRef.value)

            const option = {
                tooltip: {
                    trigger: 'item'
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: 'line',
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {offset: 0, color: 'rgba(118,196,235,1)' },
                                    {offset: 1, color: 'rgba(118,196,235,0)'}
                                ],
                            }
                        }
                    }
                ]
            };

            gasCharts.setOption(option)
        }
    }

    onMounted(() => {
        setGasCharts()
    })
</script>

<style scoped lang="scss">
@@ -49,6 +228,23 @@
        color: #fff;
        display: flex;
        justify-content: space-between;
        :deep(.el-table){
            --el-table-border-color: #000;
            th{
                font-size: 12px;
                color: #fff;
            }
            tr{
                font-size: 12px;
                color: #fff;
            }
            .el-table__cell{
                border: none;
            }
        }
        :deep(.el-scrollbar__wrap--hidden-default){
            background-color: #000 !important;
        }
        &-l{
            width: 25%;
            height: 100%;
@@ -67,7 +263,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 +295,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%;
                        }
                    }
                }
            }