From 38f0a9145a29f570331f11505968f90bd1c08646 Mon Sep 17 00:00:00 2001
From: batman <978517621@qq.com>
Date: Mon, 06 Mar 2023 13:22:33 +0800
Subject: [PATCH] 新修改添加页面
---
src/views/intellectInspect/inspectIndex2/index.vue | 1003 ++++++++++++++++++++++++++++++++++++++--------------------
1 files changed, 661 insertions(+), 342 deletions(-)
diff --git a/src/views/intellectInspect/inspectIndex2/index.vue b/src/views/intellectInspect/inspectIndex2/index.vue
index 2e64240..c530dfd 100644
--- a/src/views/intellectInspect/inspectIndex2/index.vue
+++ b/src/views/intellectInspect/inspectIndex2/index.vue
@@ -1,62 +1,174 @@
<template>
<div class="home-container">
<div style="height: 100%">
- <div class="homeCard topCard">
- <div class="title">当前巡检任务</div>
- <div class="top-info" v-if="unchecked != 0 || unusual != 0">
- <el-icon :size="18" color="#F3001E" style="margin-right: 4px"><BellFilled /></el-icon>
- 预警消息：
- <div v-if="unchecked != 0">
+ <div class="topChart">
+ <div class="chart-item">
+ <div class="chart-tit">
+ <span class="tit">年度巡检异常趋势</span>
+ </div>
+ <div class="chart" :id="xjLine"></div>
+ </div>
+ <div class="chart-item">
+ <div class="chart-tit">
+ <span class="tit">异常区域设备统计</span>
+ <el-switch
+ v-model="chartStatus"
+ class="ml-2"
+ inline-prompt
+ style="--el-switch-on-color: #13ce66; --el-switch-off-color: #13ce66"
+ active-text="区域"
+ inactive-text="设备"
+ />
+ </div>
+ <dv-active-ring-chart :config="conf" class="chart"/>
+ <el-radio-group v-model="period" label="size control" size="small" height="250px" style="display: flex;justify-content: center;margin-top: 10px">
+ <el-radio-button label="week">近7天</el-radio-button>
+ <el-radio-button label="month">近30天</el-radio-button>
+ <el-radio-button label="season">近90天</el-radio-button>
+ <el-radio-button label="year">近一年</el-radio-button>
+ </el-radio-group>
+ </div>
+ </div>
+ <div class="midChart">
+ <div class="chart-item">
+ <div class="chart-tit">
+ <div style="display: flex;align-items: center">
+ <span class="tit">当前巡检任务</span>
+ <div class="top-info" v-if="unchecked != 0 || unusual != 0">
+ <el-icon :size="18" color="#F3001E" style="margin-right: 4px"><BellFilled /></el-icon>
+ <div>预警消息：</div>
+ <div v-if="unchecked != 0">
当日超期未巡检任务<el-tooltip
- class="box-item"
- effect="light"
- content="查看相关记录"
- placement="bottom-start"
- ><span @click="toOverTime(4)">{{ unchecked }}</span></el-tooltip>个
- </div>
- <span v-if="unchecked != 0 && unusual != 0">，</span>
- <div v-if="unusual != 0">
+ class="box-item"
+ effect="light"
+ content="查看相关记录"
+ placement="bottom-start"
+ ><span @click="toOverTime(4)">{{ unchecked }}</span></el-tooltip>个
+ </div>
+ <span v-if="unchecked != 0 && unusual != 0">，</span>
+ <div v-if="unusual != 0">
存在异常任务<el-tooltip
- class="box-item"
- effect="light"
- content="查看相关记录"
- placement="bottom-start"
- ><span @click="toOverTime(5)">{{ unusual }}</span
- ></el-tooltip>个
+ class="box-item"
+ effect="light"
+ content="查看相关记录"
+ placement="bottom-start"
+ ><span @click="toOverTime(5)">{{ unusual }}</span
+ ></el-tooltip>个
+ </div>
+ 。
</div>
- 。
+ </div>
+ <div class="checkAll" @click="checkAllRecord()">
+ 全部记录>>
+ </div>
</div>
- </div>
- <div class="homeCard">
- <div class="main-card">
- <div class="list">
- <div class="cardTop" v-for="(item, index) in tableData" :key="index">
- <div class="left-info">
- <span class="num">{{ pageSize * (pageIndex - 1) + index + 1 }}、</span>
- <span class="place">{{ item.taskName }}，</span>
- <p v-if="item.execUserName == null">该任务暂无人认领</p>
- <p v-else>
- <span class="time">{{ item.taskStatus == 2 ? item.startTime : item.endTime }}</span
- >由<span class="name">{{ item.execUserName }}</span
- >进行的巡检任务
- </p>
- </div>
- <div class="mid-info">
- 任务状态：<span :class="item.taskStatus == 1 ? 'grey' : item.taskStatus == 2 ? 'green' : item.taskStatus == 3 ? 'blue' : 'red'">{{ item.taskStatus == 1 ? '待巡检' : item.taskStatus == 2 ? '巡检中' : item.taskStatus == 3 ? '已巡检' : '超期未巡检' }}</span>
- </div>
- <div class="right-info">
- <div v-if="item.taskStatus == 2" @click="toLine(item)" class="checkBtn">查看实时巡检</div>
- <div v-else class="reviewBtn" @click="toDetails('查看', item)">[查看巡检记录]</div>
- </div>
- </div>
+ <div class="chart">
+<!-- <el-table :data="tableData" style="width: 100%" stripe border>-->
+<!-- <el-table-column label="任务信息" align="center">-->
+<!-- <template #default="scope">-->
+<!-- <div class="left-info">-->
+<!-- <span>{{ scope.row.taskName }}，</span>-->
+<!-- <p v-if="scope.row.execUserName == null">该任务暂无人认领</p>-->
+<!-- <p v-else>-->
+<!-- <span class="time">{{ scope.row.taskStatus == 2 ? scope.row.startTime : scope.row.endTime }}</span>由<span class="name">{{ scope.row.execUserName }}</span>进行的巡检任务-->
+<!-- </p>-->
+<!-- </div>-->
+<!-- </template>-->
+<!-- </el-table-column>-->
+<!-- <el-table-column prop="taskStatus" label="任务状态" align="center" width="180">-->
+<!-- <template #default="scope">-->
+<!-- <span :class="scope.row.taskStatus == 1 ? 'grey' : scope.row.taskStatus == 2 ? 'green' : scope.row.taskStatus == 3 ? 'blue' : 'red'">{{ scope.row.taskStatus == 1 ? '待巡检' : scope.row.taskStatus == 2 ? '巡检中' : scope.row.taskStatus == 3 ? '已巡检' : '超期未巡检' }}</span>-->
+<!-- </template>-->
+<!-- </el-table-column>-->
+<!-- <el-table-column label="操作" align="center" width="180">-->
+<!-- <template #default="scope">-->
+<!-- <el-button type="text" v-if="scope.row.taskStatus == 2" @click="toLine(scope.row)" class="checkBtn">查看实时巡检</el-button>-->
+<!-- <el-button type="text" v-else class="reviewBtn" @click="toDetails('查看', scope.row)">查看巡检记录</el-button>-->
+<!-- </template>-->
+<!-- </el-table-column>-->
+<!-- </el-table>-->
+ <div class="list">
+ <div class="list-tit">
+ <span class="w60">任务信息</span>
+ <span class="w20">任务状态</span>
+ <span class="w20">操作</span>
</div>
- <div class="pageBtn">
- <el-pagination v-model:currentPage="pageIndex" v-model:page-size="pageSize" :page-sizes="[10, 15]" small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+ <div class="cardTop" v-for="(item, index) in tableData" :key="index">
+ <div class="l-info">
+ <span class="place">{{ item.taskName }}，</span>
+ <p v-if="item.execUserName == null">该任务暂无人认领</p>
+ <p v-else>
+ <span class="time">{{ item.taskStatus == 2 ? item.startTime : item.endTime }}</span>由<span class="name">{{ item.execUserName }}</span
+ >进行的巡检任务
+ </p>
+ </div>
+ <div class="m-info">
+ 任务状态：<span :class="item.taskStatus == 1 ? 'grey' : item.taskStatus == 2 ? 'green' : item.taskStatus == 3 ? 'blue' : 'red'">{{ item.taskStatus == 1 ? '待巡检' : item.taskStatus == 2 ? '巡检中' : item.taskStatus == 3 ? '已巡检' : '超期未巡检' }}</span>
+ </div>
+ <div class="r-info">
+ <el-button type="text" v-if="item.taskStatus == 2" @click="toLine(item)" size="small">查看实时巡检</el-button>
+ <el-button type="text" v-else class="reviewBtn" @click="toDetails('查看', item)" size="small">查看巡检记录</el-button>
+ </div>
</div>
+ </div>
+<!-- <div class="pageBtn">-->
+<!-- <el-pagination v-model:currentPage="pageIndex" v-model:page-size="pageSize" :page-sizes="[10, 15]" small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" />-->
+<!-- </div>-->
</div>
+ </div>
</div>
+ <div class="midChart">
+ <div class="chart-item">
+ <div class="chart-tit">
+ <span class="tit">巡检异常清单</span>
+ <div class="checkAll" @click="checkAllList()">
+ 全部记录>>
+ </div>
+ </div>
+ <div class="chart">
+ <div class="list">
+ <div class="list-tit">
+ <span class="w10">工单编号</span>
+ <span class="w10">异常巡检点</span>
+ <span class="w10">巡检（发现）时间</span>
+ <span class="w10">所属巡检任务</span>
+ <span class="w10">设备/区域名称</span>
+ <span class="w10">正常参考值</span>
+ <span class="w10">实际巡检值</span>
+ <span class="w10">隐患处置人</span>
+ <span class="w10">电话</span>
+ <span class="w10">处置状态</span>
+ <span class="w10">处置描述反馈</span>
+ <span class="w15">操作</span>
+ </div>
+ <div class="cardTop" v-for="(item, index) in unusualData" :key="index">
+ <span class="w10">{{item.num}}</span>
+ <span class="w10">{{item.spot}}</span>
+ <span class="w10">{{item.time}}</span>
+ <span class="w10">{{item.job}}</span>
+ <span class="w10">{{item.area}}</span>
+ <span class="w10">{{item.refer}}</span>
+ <span class="w10">{{item.real}}</span>
+ <span class="w10">{{item.name}}</span>
+ <span class="w10">{{item.phone}}</span>
+ <span class="w10">{{item.status}}</span>
+ <span class="w10">{{item.describe}}</span>
+ <span class="w15">
+ <el-button type="text" @click="toLine(item)" size="small">验收</el-button>
+ <el-button type="text" @click="toPhotos('查看', item)" size="small">查看现场照片</el-button>
+ </span>
+ </div>
+ </div>
+<!-- <div class="pageBtn">-->
+<!-- <el-pagination v-model:currentPage="pageIndex" v-model:page-size="pageSize" :page-sizes="[10, 15]" small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" />-->
+<!-- </div>-->
+ </div>
+ </div>
+ </div>
</div>
<inspect-record-dialog ref="inspectRecordDialogRef" @refreshInspectRecord="getInspectRecord"></inspect-record-dialog>
+ <inspect-list ref="inspectListRef"></inspect-list>
+ <unusual-list ref="unusualListRef"></unusual-list>
</div>
</template>
@@ -71,11 +183,15 @@
import { FormInstance, FormRules, ElMessage } from 'element-plus';
import { inspectRecordApi } from '/@/api/intellectInspectSystem/inspectRecord';
import { useRouter } from 'vue-router';
+import * as echarts from 'echarts'
import inspectRecordDialog from './components/inspectRecordDialog.vue';
+import inspectList from './components/inspectList.vue';
+import unusualList from './components/unusualList.vue';
import { departmentApi } from '/@/api/systemManage/department';
// 定义接口来定义对象的类型
interface stateType {
tableData: Array<string>;
+ unusualData: Array<any>;
unchecked: null | number;
unusual: null | number;
uncheckedList: [];
@@ -89,6 +205,9 @@
classGroupList: Array<classGroup>;
quotaList: [];
inspectPointAllList: [];
+ conf:{};
+ chartStatus:boolean;
+ period: string
}
interface type {
id: number;
@@ -100,16 +219,73 @@
}
export default {
name: 'workingHours',
- components: { inspectRecordDialog },
+ components: { inspectRecordDialog, inspectList, unusualList },
setup() {
const router = useRouter();
+ const xjLine = ref("eChartXjLine" + Date.now() + Math.random())
const state = reactive<stateType>({
pageIndex: 1,
- pageSize: 10,
+ pageSize: 4,
totalSize: 0,
tableData: [],
+ unusualData: [
+ {
+ num: '202302280001',
+ spot: '70736',
+ time: '2023-03-02 17:44:25',
+ job: '甲醇车间XXX巡检',
+ area: 'xxx设备',
+ refer: '8.9~10Mpa',
+ real: '15.6Mpa',
+ name: '黄公子',
+ phone: '15261806176',
+ status: '待验收',
+ describe: '更换法兰更换法兰更换法兰更换法兰更换法兰更换法兰'
+ },
+ {
+ num: '202302280001',
+ spot: '70736',
+ time: '2023-03-02 17:44:25',
+ job: '甲醇车间XXX巡检',
+ area: 'xxx设备',
+ refer: '8.9~10Mpa',
+ real: '15.6Mpa',
+ name: '黄公子',
+ phone: '15261806176',
+ status: '待验收',
+ describe: '更换法兰更换法兰更换法兰更换法兰更换法兰更换法兰'
+ },
+ {
+ num: '202302280001',
+ spot: '70736',
+ time: '2023-03-02 17:44:25',
+ job: '甲醇车间XXX巡检',
+ area: 'xxx设备',
+ refer: '8.9~10Mpa',
+ real: '15.6Mpa',
+ name: '黄公子',
+ phone: '15261806176',
+ status: '待验收',
+ describe: '更换法兰更换法兰更换法兰更换法兰更换法兰更换法兰'
+ },
+ {
+ num: '202302280001',
+ spot: '70736',
+ time: '2023-03-02 17:44:25',
+ job: '甲醇车间XXX巡检',
+ area: 'xxx设备',
+ refer: '8.9~10Mpa',
+ real: '15.6Mpa',
+ name: '黄公子',
+ phone: '15261806176',
+ status: '待验收',
+ describe: '更换法兰更换法兰更换法兰更换法兰更换法兰更换法兰'
+ }
+ ],
unchecked: null,
unusual: null,
+ chartStatus: true,
+ period: 'month',
uncheckedList: [],
abnormalList: [],
workTypeList: [
@@ -126,9 +302,43 @@
],
classGroupList: [],
quotaList: [],
- inspectPointAllList: []
+ inspectPointAllList: [],
+ conf:{
+ radius: '75%',
+ activeRadius: '80%',
+ lineWidth: 24,
+ digitalFlopStyle: {
+ fontSize: 25,
+ fill: '#000',
+ },
+ textColor: '#000',
+ data: [
+ {
+ name: '区域1',
+ value: 98,
+ },
+ {
+ name: '区域2',
+ value: 150,
+ },
+ {
+ name: '区域3',
+ value: 62,
+ },
+ {
+ name: '区域4',
+ value: 54,
+ },
+ {
+ name: '区域5',
+ value: 54,
+ }
+ ]
+ }
});
const inspectRecordDialogRef = ref();
+ const inspectListRef = ref();
+ const unusualListRef = ref();
interface User {
name: string;
startTime: string;
@@ -141,7 +351,102 @@
getInspectRecord();
getDayData();
getDepartmentData();
+ initXjLine()
});
+ const checkAllRecord =()=>{
+ inspectListRef.value.departmentList = state.departmentList
+ inspectListRef.value.showInspectList()
+ }
+ const checkAllList =()=>{
+ unusualListRef.value.showUnusualList()
+ }
+ type EChartsOption = echarts.EChartsOption
+ const initXjLine =()=>{
+ let dom = document.getElementById(xjLine.value);
+ let myChart = echarts.init(dom);
+
+ let option: EChartsOption;
+
+ option = {
+ tooltip: {
+ trigger: 'axis'
+ },
+ legend: {
+ data: ['总趋势', '事业部'],
+ height: '15%',
+ top: 0,
+ bottom: 0,
+ padding:[1,1,1,0]
+ },
+ grid: {
+ top: '15%',
+ left: '3%',
+ right: '3%',
+ bottom: 0,
+ containLabel: true
+ },
+ toolbox: {
+ feature: {
+ // saveAsImage: {}
+ }
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: ['四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月', '一月', '二月', '三月']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [
+ {
+ name: '总趋势',
+ type: 'line',
+ stack: 'Total',
+ data: [120, 132, 101, 134, 90, 120, 132, 101, 134, 90, 230, 210],
+ label:{
+ show: true,
+ color: '#95d475',
+ fontSize: 12
+ },
+ lineStyle:{
+ width: 1,
+ color: '#95d475'
+ },
+ itemStyle:{
+ color: '#95d475',
+ borderColor: '#fff',
+ borderWidth: 2
+ }
+ },
+ {
+ name: '事业部',
+ type: 'line',
+ stack: 'Total',
+ data: [220, 182, 191, 234, 290, 220, 182, 191, 234, 290, 330, 310],
+ label:{
+ show: true,
+ color: '#337ecc',
+ fontSize: 12
+ },
+ lineStyle:{
+ width: 1,
+ color: '#337ecc'
+ },
+ itemStyle:{
+ color: '#337ecc',
+ borderColor: '#fff',
+ borderWidth: 2
+ }
+ }
+ ]
+ }
+
+ option && myChart.setOption(option);
+ window.addEventListener("resize",function (){
+ myChart.resize();
+ });
+ }
// 分页获取工作时段列表
const getInspectRecord = async () => {
@@ -222,9 +527,14 @@
Edit,
Delete,
Refresh,
+ xjLine,
Plus,
router,
inspectRecordDialogRef,
+ inspectListRef,
+ unusualListRef,
+ checkAllRecord,
+ checkAllList,
toLine,
toOverTime,
toDetails,
@@ -239,319 +549,328 @@
<style scoped lang="scss">
$homeNavLengh: 8;
@media screen and (min-width: 1366px) {
- .topCard {
- display: flex;
- align-items: center;
- justify-content: space-between;
- font-weight: bolder;
- .top-info {
- display: flex;
- font-size: 16px;
- align-items: center;
- padding: 10px 15px;
- background: #ffeb87;
- border-radius: 8px;
- border: 1px solid #ffae00;
-
- & > div {
- vertical-align: middle;
- white-space: nowrap;
- span {
- font-size: 22px;
- color: #f3001e;
- margin: 0 4px;
- cursor: pointer;
-
- &:hover{
- text-decoration: underline;
- }
- }
- }
- }
- }
- .left-info {
- width: 70%;
- display: flex;
- align-items: center;
- justify-content: left;
- font-size: 18px;
- color: #333;
- overflow-x: auto;
- & > span {
- white-space: nowrap;
- }
- p {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- & > span {
- white-space: nowrap;
- }
- }
- }
- .mid-info {
- width: 20%;
- font-size: 18px;
- color: #333;
- }
- .right-info {
- width: 10%;
- display: flex;
- justify-content: right;
- align-items: center;
- font-size: 16px;
- color: #fff;
-
- div {
- white-space: nowrap;
- }
- }
}
@media screen and (min-width: 1200px) and (max-width: 1366px) {
- .topCard {
- display: flex;
- align-items: center;
- justify-content: space-between;
- font-weight: bolder;
- .top-info {
- display: flex;
- font-size: 14px;
- align-items: center;
- padding: 6px 10px;
- background: #ffeb87;
- border-radius: 4px;
- border: 1px solid #ffae00;
-
- & > div {
- vertical-align: middle;
- white-space: nowrap;
- span {
- font-size: 18px;
- color: #f3001e;
- margin: 0 2px;
- cursor: pointer;
-
- &:hover{
- text-decoration: underline;
- }
- }
- }
- }
- }
- .left-info {
- width: 70%;
- display: flex;
- align-items: center;
- justify-content: left;
- font-size: 15px;
- color: #333;
- overflow-x: auto;
- & > span {
- white-space: nowrap;
- }
- p {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- & > span {
- white-space: nowrap;
- }
- }
- }
- .mid-info {
- width: 20%;
- font-size: 15px;
- color: #333;
- }
- .right-info {
- width: 10%;
- display: flex;
- justify-content: right;
- align-items: center;
- font-size: 13px;
- color: #fff;
- div {
- white-space: nowrap;
- }
- }
}
@media screen and (max-width: 1200px) {
- .topCard {
- display: flex;
- align-items: center;
- justify-content: space-between;
- font-weight: bolder;
- .top-info {
- display: flex;
- font-size: 14px;
- align-items: center;
- padding: 2px 6px;
- background: #ffeb87;
- border-radius: 4px;
- border: 1px solid #ffae00;
-
- & > div {
- vertical-align: middle;
- white-space: nowrap;
- span {
- font-size: 16px;
- color: #f3001e;
- margin: 0 1px;
- cursor: pointer;
-
- &:hover{
- text-decoration: underline;
- }
- }
- }
- }
- }
- .left-info {
- width: 70%;
- display: flex;
- align-items: center;
- justify-content: left;
- font-size: 12px;
- color: #333;
- overflow-x: auto;
- & > span {
- white-space: nowrap;
- }
- p {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- & > span {
- white-space: nowrap;
- }
- }
- }
- .mid-info {
- width: 20%;
- font-size: 12px;
- color: #333;
- }
- .right-info {
- width: 10%;
- display: flex;
- justify-content: right;
- align-items: center;
- font-size: 12px;
- color: #fff;
- div {
- white-space: nowrap;
- }
- }
}
.home-container {
height: calc(100vh - 144px);
box-sizing: border-box;
overflow: hidden;
- .homeCard {
- width: 100%;
- padding: 20px;
- box-sizing: border-box;
- background: #fff;
- border-radius: 4px;
- .title {
+ .topChart{
+ height: calc((100% - 40px) / 3);
+ width: 100%;
+ background: #fff;
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ margin-bottom: 20px;
+ padding: 20px 20px 90px;
+
+ .chart-item{
+ width: 70%;
+ height: 120%;
+ padding-right: 10px;
+
+ &:last-of-type{
+ width: 30%;
+ height: 100%;
+ padding-right: 0;
+ padding-left: 10px;
+ position: relative;
+ }
+
+ .chart-tit{
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ .tit{
font-size: 20px;
font-weight: bolder;
+ }
+ :deep(.el-switch__core){
+ width: 120px;
+ }
}
- .main-card {
- width: 100%;
- height: 100%;
- .cardTop {
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-bottom: 10px;
- background: #daf3ff;
- padding: 10px 15px;
- border-radius: 8px;
-
- .left-info {
- .num {
- font-weight: bolder;
- margin-right: 10px;
- }
- .place {
- font-weight: bolder;
- }
- .time {
- font-weight: bolder;
- margin-right: 5px;
- }
- .name {
- font-weight: bolder;
- margin: 0 5px;
- font-weight: bolder;
- }
- }
- .mid-info {
- span {
- font-weight: bolder;
- }
-
- .grey {
- color: #999;
- }
- .green {
- color: #44b100;
- }
- .blue {
- color: #409eff;
- }
- .red {
- color: red;
- }
- }
- .right-info {
- .checkBtn {
- padding: 10px 15px;
- background: #409eff;
- border-radius: 4px;
- cursor: pointer;
- }
-
- .reviewBtn {
- margin: 10px 15px;
- cursor: pointer;
- color: #44b100;
- }
- }
- }
- .list {
- height: calc(100% - 60px);
- overflow-y: auto;
- }
- .pageBtn {
- position: absolute;
- bottom: 15px;
- right: 20px;
- height: 60px;
- display: flex;
- align-items: center;
- justify-content: right;
-
- .demo-pagination-block + .demo-pagination-block {
- margin-top: 10px;
- }
- .demo-pagination-block .demonstration {
- margin-bottom: 16px;
- }
- }
+ .chart{
+ width: 100%;
+ height: 100%;
}
- &:last-of-type {
- position: relative;
- padding-top: 0;
- height: calc(100% - 60px);
+ .el-radio-group{
+ width: 100%;
+ flex-wrap: nowrap;
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
}
+ :deep(.active-ring-info){
+ .active-ring-name{
+ font-size: 1.5rem !important;
+ text-align: center;
+ }
+ }
+ }
}
+ .midChart{
+ height: calc((100% - 40px) / 3);
+ width: 100%;
+ background: #fff;
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ margin-bottom: 20px;
+ padding: 20px;
+
+ .chart-item{
+ width: 100%;
+ height: 100%;
+ padding: 0 0 20px;
+
+ .chart-tit{
+ width: 100%;
+ height: 15%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ .tit{
+ font-size: 20px;
+ font-weight: bolder;
+ }
+ :deep(.el-switch__core){
+ width: 120px;
+
+ }
+ .top-info {
+ display: flex;
+ font-size: 14px;
+ align-items: center;
+ background: #ffeb87;
+ padding: 4px 15px;
+ margin-left: 20px;
+ border-radius: 2px;
+ border: 1px solid #ffae00;
+ & > div {
+ vertical-align: middle;
+ white-space: nowrap;
+ height: 100%;
+ span {
+ color: #f3001e;
+ margin: 0 4px;
+ font-size: 18px;
+ cursor: pointer;
+ font-weight: bolder;
+
+ &:hover{
+ text-decoration: underline;
+ }
+ }
+ }
+ }
+ .checkAll{
+ cursor: pointer;
+ &:hover{
+ color: #409eff
+ }
+ }
+ }
+ .chart{
+ width: 100%;
+ height: 85%;
+ margin-top: 10px;
+
+ .el-table{
+ height: 100% !important;
+ :deep(.el-table__inner-wrapper){
+ height: 100% !important;
+ .el-table__header-wrapper{
+ height: 20% !important;
+ }
+ .el-table__body-wrapper{
+ height: 80% !important;
+ .el-scrollbar__view{
+ height: 100% !important;
+ .el-table__body{
+ height: 100% !important;
+
+ .el-table__row{
+ height: 20% !important;
+ }
+ }
+ }
+ }
+ }
+ }
+ .list {
+ height: 100%;
+ margin-top: 10px;
+ border: 1px solid #ebeef5;
+
+ .list-tit{
+ width: 100%;
+ height: 20%;
+ display: flex;
+ align-items: center;
+ border-bottom: 1px solid #ebeef5;
+
+ span{
+ text-align: center;
+ padding: 10px 0;
+ }
+
+ .w60{
+ width: 60%;
+ border-right: 1px solid #ebeef5;
+ }
+ .w20{
+ width: 20%;
+ border-right: 1px solid #ebeef5;
+
+ &:last-of-type{
+ border-right: none;
+ }
+ }
+ .w15{
+ width: 15%;
+ border-right: 1px solid #ebeef5;
+ text-align: center;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ .w10{
+ width: 10%;
+ border-right: 1px solid #ebeef5;
+ text-align: center;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
+
+ .cardTop {
+ display: flex;
+ width: 100%;
+ height: 20%;
+ align-items: center;
+ border-bottom: 1px solid #ebeef5;
+
+ &:last-of-type{
+ border-bottom: none;
+ }
+ span{
+ text-align: center;
+ padding: 10px 0;
+ }
+ .l-info{
+ width: 60%;
+ height: 100%;
+ border-right: 1px solid #ebeef5;
+ display: flex;
+ align-items: center;
+ padding: 0 20px;
+
+ .num {
+ font-weight: bolder;
+ margin-right: 10px;
+ }
+ .place {
+ font-weight: bolder;
+ }
+ .time {
+ font-weight: bolder;
+ margin-right: 5px;
+ }
+ .name {
+ font-weight: bolder;
+ margin: 0 5px;
+ font-weight: bolder;
+ }
+ }
+ .m-info{
+ height: 100%;
+ width: 20%;
+ display: flex;
+ align-items: center;
+ border-right: 1px solid #ebeef5;
+ justify-content: center;
+
+ span {
+ font-weight: bolder;
+ }
+
+ .grey {
+ color: #999;
+ }
+ .green {
+ color: #44b100;
+ }
+ .blue {
+ color: #409eff;
+ }
+ .red {
+ color: red;
+ }
+ }
+ .r-info{
+ width: 20%;
+ text-align: center;
+
+ .reviewBtn {
+ color: #44b100;
+ }
+ }
+ .w10{
+ width: 10%;
+ border-right: 1px solid #ebeef5;
+ text-align: center;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ .w15{
+ width: 15%;
+ border-right: 1px solid #ebeef5;
+ text-align: center;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ .el-button{
+ margin-left: 0 !important;
+ padding: 12px 0;
+ &:last-of-type{
+ margin-left: 12px !important;
+ }
+ }
+ }
+ }
+ }
+ .pageBtn {
+ position: absolute;
+ bottom: 15px;
+ right: 20px;
+ height: 60px;
+ display: flex;
+ align-items: center;
+ justify-content: right;
+
+ .demo-pagination-block + .demo-pagination-block {
+ margin-top: 10px;
+ }
+ .demo-pagination-block .demonstration {
+ margin-bottom: 16px;
+ }
+ }
+ }
+ }
+ }
+
.el-row {
display: flex;
align-items: center;
--
Gitblit v1.9.2