fix:修改数据界面

web

7 天以前 7da0c2d5b4656f808ba71b9e214256c95379faea

 src/views/screen/device.vue

@@ -1,13 +1,482 @@
<template>
    <div class="device">
        设备
        <div class="device-l">
            <div class="left">
                <div class="left-item">
                    <div class="item-t">设备时长</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="报警内容" min-width="150" />
                            <el-table-column prop="time" label="报警时长" />
                        </el-table>
                    </div>
                </div>
                <div class="left-item">
                    <div class="item-t">
                        <div class="title-left">风机管理</div>
                        <div class="title-right">
                            <el-select
                                v-model="value"
                                size="small"
                                style="width: 8rem"
                            >
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                />
                            </el-select>
                            <el-button type="success" size="small">一键启动</el-button>
                        </div>
                    </div>
                    <div class="item-c">
                        <div class="fengji">
                            <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>
                                </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>
                    </div>
                </div>
                <div class="left-item">
                    <div class="item-t">工单处理</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="device" label="上报时间" />
                            <el-table-column prop="time" label="上报人" />
                            <el-table-column prop="address" label="所属地址" />
                            <el-table-column prop="status" label="工单状态">
                                <div>已处理</div>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="left-item">
                    <div class="item-t">设备状态</div>
                    <div class="item-c">
                        <div ref="statusRef" class="sbStatus"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="device-c">
            <div class="center">
                <div class="center-item">
                    <div class="item-t">
                        <div class="title-left">实时数据</div>
                        <div class="title-right">
                            <el-select
                                v-model="value"
                                size="small"
                                style="width: 8rem"
                            >
                                <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: 8rem"
                            >
                                <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="data-list">
                            <dataItem />
                        </div>
                    </div>
                </div>
                <div class="center-item">
                    <div class="item-t">终端监控分类曲线</div>
                    <div class="item-c">
                        <div ref="moniterRef" class="moniter"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="device-r">
            <div class="right">
                <div class="right-item">
                    <div class="item-t">风机状态</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="right-item">
                    <div class="item-t">设备报警</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>
        </div>
    </div>
</template>

<script setup>
    import { onMounted } from 'vue';
    import dataItem from './components/dataItem.vue'
    import * as echarts from 'echarts';

    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 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 = {
                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' }
                    ]
                    }
                ]
            };

            statusCharts.setOption(option)
        }
    }

    const setMoniterCharts = () => {
         if(moniterRef.value){
            moniterCharts = echarts.init(moniterRef.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)'}
                                ],
                            }
                        }
                    }
                ]
            };

            moniterCharts.setOption(option)
        }
    }


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

<style scoped lang="scss">
    .device{
        height: 100%;
        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: 29%;
            height: 100%;
            .left{
                height: 100%;   
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .left-item{
                    flex-shrink: 0;
                    width: 100%;
                    height: 24%;
                    background-image: url('@/assets/images/screen/ct-small.png');
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    .item-t{
                        width: 100%;
                        height: 3rem;
                        line-height: 3rem;
                        padding: 0 5rem 0 4rem;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        .title-right{
                            display: flex;
                            gap: 1rem;
                        }
                    }
                    .item-c{
                        height: calc(100% - 3rem);
                        padding: 0.5rem;
                        // overflow-y: scroll;
                        // &::-webkit-scrollbar{
                        //     display: none;
                        // }
                        .sbStatus{
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .fengji{
                        width: 100%;
                        height: 100%;
                        display: flex;
                        flex-wrap: wrap;
                        overflow-y: scroll;
                        &::-webkit-scrollbar{
                            display: none;
                        }
                        .fengjiItem{
                            width: 50%;
                            height: 50%;
                            text-align: center;
                            .fengji-title{
                                font-size: 0.8rem;
                                padding: 0.5rem 0;
                            }
                            .fengji-status{
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                img{
                                    width: 2rem;
                                    height: 2rem;
                                    margin-right: 2rem;
                                    animation: rotateAnimation 1s linear 0s infinite;
                                }
                            }
                        }
                    }
                }
            }
        }
        &-c{
            width: 40%;
            height: 100%;
            .center{
                height: 100%;   
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .center-item{
                    height: 49%;
                    background-image: url('@/assets/images/screen/ct-large.png');
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    .item-t{
                        height: 3rem;
                        line-height: 3rem;
                        padding: 0  6rem 0 3.8rem;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        .title-right{
                            display: flex;
                            gap: 1rem;
                        }
                    }
                    .item-c{
                        height: calc(100% - 3rem);
                        padding: 0.5rem;
                        .moniter{
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }
        }
        &-r{
            width: 29%;
            height: 100%;
            .right{
                height: 100%;   
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .right-item{
                    height: 49%;
                    background-image: url('@/assets/images/screen/ct-default.png');
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    .item-t{
                        height: 3rem;
                        line-height: 3rem;
                        padding-left: 3rem;
                    }
                    .item-c{
                        height: calc(100% - 3rem);
                        padding: 0.5rem;
                    }
                }
            }
        }
    }

    @keyframes rotateAnimation{
        0%{
            transform: rotate(0deg);
        }
        100%{
            transform: rotate(360deg);
        }
    }
</style>