fix:数据

web

8 天以前 6e6127068f03a7fe655f1fd504c488f20683039f

 src/views/screen/device.vue

@@ -11,10 +11,10 @@
                            :cell-style="rowStyle"
                            style="height: 100%;"
                        >
                            <el-table-column prop="type" label="异常类型" />
                            <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="address" label="报警内容" min-width="150" />
                            <el-table-column prop="time" label="报警时长" />
                        </el-table>
                    </div>
                </div>
@@ -37,7 +37,59 @@
                            <el-button type="success" size="small">一键启动</el-button>
                        </div>
                    </div>
                    <div class="item-c"></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>
@@ -53,15 +105,17 @@
                            <el-table-column prop="device" label="上报时间" />
                            <el-table-column prop="time" label="上报人" />
                            <el-table-column prop="address" label="所属地址" />
                            <el-table-column prop="options" label="工单状态">
                                <el-button type="primary">已处理</el-button>
                            <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>
                    <div class="item-c">
                        <div ref="statusRef" class="sbStatus"></div>
                    </div>
                </div>
            </div>
        </div>
@@ -105,7 +159,9 @@
                </div>
                <div class="center-item">
                    <div class="item-t">终端监控分类曲线</div>
                    <div class="item-c"></div>
                    <div class="item-c">
                        <div ref="moniterRef" class="moniter"></div>
                    </div>
                </div>
            </div>
        </div>
@@ -149,7 +205,9 @@
</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小时' },
@@ -165,7 +223,6 @@
    }

    const value = ref('')

    const options = [
        {
            value: 1,
@@ -176,6 +233,85 @@
            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">
@@ -185,6 +321,8 @@
        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;
@@ -196,9 +334,6 @@
            .el-table__cell{
                border: none;
            }
        }
        :deep(.el-scrollbar__wrap--hidden-default){
            background-color: #000 !important;
        }
        &-l{
            width: 29%;
@@ -219,7 +354,7 @@
                        width: 100%;
                        height: 3rem;
                        line-height: 3rem;
                        padding: 0 5rem 0 3.5rem;
                        padding: 0 5rem 0 4rem;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
@@ -235,6 +370,40 @@
                        // &::-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;
                                }
                            }
                        }
                    }
                }
            }
@@ -255,7 +424,7 @@
                    .item-t{
                        height: 3rem;
                        line-height: 3rem;
                        padding: 0  6rem 0 4.2rem;
                        padding: 0  6rem 0 3.8rem;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
@@ -267,6 +436,10 @@
                    .item-c{
                        height: calc(100% - 3rem);
                        padding: 0.5rem;
                        .moniter{
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }
@@ -297,4 +470,13 @@
            }
        }
    }

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