admin-sjzx/src/views/pqs/runManage/runEvaluate/index.vue

<template>
    <div class="default-main" style="position: relative">
        <TableHeader date-picker>
            <template v-slot:select>
                <el-form-item label="对象类型">
                    <el-select
                        v-model="tableStore.table.params.supvObjType"
                        clearable
                        style="width: 100%"
                        placeholder="请选择对象类型"
                    >
                        <el-option
                            v-for="item in supvObjTypeList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </template>

            <template v-slot:operation></template>
        </TableHeader>
        <Map />

        <div class="left" :style="height">
            <BorderBox13 :color="[color[0], color[0]]" class="box" :backgroundColor="`${color[0]}24`" title="终端统计">
                <div class="title">
                    <span class="iconfont icon-zhongduantongji-xian"></span>
                    终端统计
                </div>
            </BorderBox13>
            <BorderBox13
                :color="[color[0], color[0]]"
                class="box"
                :backgroundColor="`${color[0]}24`"
                title="终端运行评价"
            >
                <div class="title">   <span class="iconfont icon-daipingjia"></span>终端运行评价</div>
            </BorderBox13>
            <BorderBox13
                :color="[color[0], color[0]]"
                class="box"
                :backgroundColor="`${color[0]}24`"
                title="最近一周终端评价趋势"
            >
                <div class="title">   <span class="iconfont icon-a-qushi1"></span>最近一周终端评价趋势</div>
            </BorderBox13>
        </div>
        <div class="center" :style="height3">
            <BorderBox13
                :color="[color[0], color[0]]"
                class="box"
                :backgroundColor="`${color[0]}24`"
                title="异常终端详情"
            >
                <div class="title"> <span class="iconfont icon-yichangxiangqing-xian"></span>异常终端详情</div>
            </BorderBox13>
        </div>
        <div class="right" :style="height">
            <BorderBox13
                :color="[color[0], color[0]]"
                class="box box-2"
                :backgroundColor="`${color[0]}24`"
                title="区域终端运行评价"
            >
                <div class="title"> <span class="iconfont icon-a-ziyuan118"></span>区域终端运行评价</div>
            </BorderBox13>
            <BorderBox13
                :color="[color[0], color[0]]"
                class="box"
                :backgroundColor="`${color[0]}24`"
                title="终端运行评价详情"
            >
                <div class="title"> <span class="iconfont icon-yunhangxiangqing"></span>终端运行评价详情</div>
            </BorderBox13>
        </div>
        <!-- <div class="container pt10 pl10" :style="height">
            <div class="left">
                <el-card class="box">
                    <template #header>
                        <div></div>
                        <span>终端统计</span>
                    </template>
                </el-card>
                <el-card class="box">
                    <template #header>
                          <div></div><span>终端运行评价</span>
                    </template>
                </el-card>
                <el-card class="box">
                    <template #header>
                          <div></div><span>最近一周终端评价趋势</span>
                    </template>
                </el-card>
            </div>
            <div class="center">
                <el-card class="box box-2">
                    <template #header>
                          <div></div><span>异常详情统计</span>
                    </template>
                </el-card>
                <el-card class="box">
                    <template #header>
                          <div></div><span>异常终端详情</span>
                    </template>
                </el-card>
            </div>
            <div class="right">
                <el-card class="box box-2">
                    <template #header>
                          <div></div><span>区域终端运行评价</span>
                    </template>
                </el-card>
                <el-card class="box">
                    <template #header>
                          <div></div><span>终端运行评价详情</span>
                    </template>
                </el-card>
            </div>
        </div> -->
    </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import TableHeader from '@/components/table/header/index.vue'
import TableStore from '@/utils/tableStore'
import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout'
import Map from './components/map.vue'
import { BorderBox13 } from '@dataview/datav-vue3'
import { useConfig } from '@/stores/config'
const config = useConfig()
const color = config.layout.elementUiPrimary
const dictData = useDictData()
const height = mainHeight(115)
const height3 = mainHeight(115, 3)
//字典获取监督对象类型
const supvObjTypeList = dictData.getBasicData('supv_obj_type')
const tableStore = new TableStore({
    url: '/user-boot/user/getAllUserSimpleList',
    method: 'GET',
    isWebPaging: true,
    showPage: false,
    publicHeight: 480,
    column: [
        { title: '序号', width: 80 },

        { title: '监测对象类型', field: 'name3' },
        { title: '监测对象名称', field: 'name4' },
        { title: '电压等级', field: 'name5' },

        {
            title: '操作',
            width: '120',
            render: 'buttons',
            buttons: [
                {
                    name: 'edit',
                    title: '工单',
                    type: 'primary',
                    icon: 'el-icon-Plus',
                    render: 'basicButton',
                    click: row => {}
                }
            ]
        }
    ],
    loadCallback: () => {
        tableStore.table.data = []
    }
})
provide('tableStore', tableStore)
onMounted(() => {
    // 加载数据
    tableStore.index()
})
</script>
<style lang="scss" scoped>
// .container {
//     display: flex;

//     position: absolute;
//     top: 70px;
//     left: 10px;
//     width: 100%;

//     z-index: 999;
//     .left,
//     .center,
//     .right {
//         display: flex;
//         flex-direction: column;

//         // background: linear-gradient(to right, #cce5e5, #ffffff00);
//     }
//     .center {
//         flex: 1.5;
//     }
//     .box {
//         width: 500px;
//         height: 100%;
//     }

//     .box-2 {
//         flex: 2; /* 占2份高度 */
//     }
// }
.left,
.right {
    display: flex;
    position: absolute;
    top: 80px;
    width: 25%;

    min-width: 480px;
    flex-direction: column;
    z-index: 99;
}
.left {
    left: 15px;
}
.right {
    right: 15px !important;
    .box {
        flex: 1; /* 占2份高度 */
    }
    .box-2 {
        flex: 2; /* 占2份高度 */
    }
}
.box {
    padding: 20px 10px 10px;
}
.center {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 48%;
    min-width: 480px;
    .box {
        flex: 1; /* 占2份高度 */
        padding: 20px 10px 10px;
    }
}
.title {
    // padding: 5px 5px 5px 10px;
    background: linear-gradient(to right, var(--el-color-primary), #ffffff00);
    font-size: 16px;
    // font-weight: bold;
    color: #fff;
    display: flex;
    align-items: center;
    .iconfont {
        font-size: 22px;
        margin: 0 5px 0 10px;
    }
}
</style>