From 5f114549b05ad3334ca911e84e9698cade0995ca Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期一, 20 三月 2023 11:07:17 +0800
Subject: [PATCH] 修改巡检首页，添加视频详情内容
---
src/views/facilityManagement/facilityIndex/index.vue | 1956 +++++++++++++++++++++++++++++-----------------------------
1 files changed, 978 insertions(+), 978 deletions(-)
diff --git a/src/views/facilityManagement/facilityIndex/index.vue b/src/views/facilityManagement/facilityIndex/index.vue
index bad1aac..5514234 100644
--- a/src/views/facilityManagement/facilityIndex/index.vue
+++ b/src/views/facilityManagement/facilityIndex/index.vue
@@ -1,117 +1,117 @@
<template>
- <div class="home-container" :class="isFull==true?'container':''" id="bigScreen">
- <div class="full">
- <el-button v-if="isFull==false" type="text" style="height: 34px" @click="toFullscreen">
- <el-icon style="vertical-align: middle">
- <FullScreen />
- </el-icon>
- <span style="vertical-align: middle">全屏</span>
- </el-button>
- <el-button v-else type="text" style="height: 34px" @click="toFullscreen">
- <el-icon style="vertical-align: middle">
- <Close />
- </el-icon>
- <span style="vertical-align: middle">退出全屏</span>
- </el-button>
- </div>
- <div class="topChart">
- <div class="chart-item" :class="zin==1?'upItem':''">
- <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10>
- <div class="chart-tit">
- <span class="tit">当前时间设备状态</span>
- <div class="filter-part filter-part2">
- <el-cascader @focus="upgrade(1)" :teleported="false" v-model="chartSearch1.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/>
- </div>
- </div>
- <div class="chart" :id="sbzt"></div>
- </div>
- <div class="chart-item" :class="zin==2?'upItem':''">
- <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10>
- <div class="chart-tit">
- <span class="tit">设备异常趋势</span>
- <div class="filter-part filter-part2">
- <el-cascader @focus="upgrade(2)" :teleported="false" v-model="chartSearch2.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/>
- </div>
- </div>
- <div class="chart" :id="ycqs"></div>
- </div>
- <div class="chart-item" :class="zin==3?'upItem':''">
- <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10>
- <div class="chart-tit">
- <span class="tit">关联作业排行</span>
- <div class="filter-part filter-part3">
- <el-cascader @focus="upgrade(3)" :teleported="false" v-model="chartSearch3.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/>
- <el-select :teleported="false" v-model="chartSearch3.period" size="small">
- <el-option label="近7天" value="week"/>
- <el-option label="近30天" value="month"/>
- <el-option label="近90天" value="season"/>
- <el-option label="近1年" value="year"/>
- </el-select>
- <el-select :teleported="false" v-model="chartSearch3.workType" size="small">
- <el-option
- v-for="item in workType1"
- :key="item.id"
- :label="item.name"
- :value="item.id"
- />
- </el-select>
- </div>
- </div>
- <div class="chart">
- <el-table ref="multipleTableRef" :data="rankData" style="width: 100%" stripe border :header-cell-style="{ background: '#fafafa' }">
- <el-table-column property="num" label="设备位号" align="center"/>
- <el-table-column property="name" label="设备名称" align="center"/>
- <el-table-column property="dep" label="所属部门" align="center"/>
- <el-table-column property="count" label="关联次数" align="center"/>
- </el-table>
- <el-button type="text" size="small" style="margin-top: 10px">查看所有涉及殊作业的设备>></el-button>
- </div>
- <!-- <div class="chart" :id="ycqs"></div>-->
- </div>
- </div>
- <div class="topChart">
- <div class="chart-item chart-item2" :class="zin==4?'upItem':''">
- <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10>
- <div class="chart-tit">
- <span class="tit">关联作业趋势图</span>
- <div class="filter-part filter-part2">
- <el-cascader @focus="upgrade(4)" :teleported="false" v-model="chartSearch4.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/>
- </div>
- </div>
- <div class="chart">
- <el-table :data="wdsbData" style="width: 100%" stripe border :header-cell-style="{ background: '#fafafa' }">
- <el-table-column prop="num" label="设备位号" align="center"/>
- <el-table-column prop="name" label="设备名称" align="center"/>
- <el-table-column prop="dep" label="所属事业部" align="center"/>
- <el-table-column prop="temRange" label="温度敏感范围" align="center"/>
- <el-table-column prop="tem" label="当前气温" align="center"/>
- <el-table-column prop="status" label="状态" align="center" width="180">
- <template #default="scope">
- <el-tag :type="scope.row.status == 0 ? 'success' : scope.row.status == 1 ? '' : 'danger'">{{ scope.row.status == 0 ? '正常' : scope.row.status == 1 ? '低温警报' : '高温警报' }}</el-tag>
- </template>
- </el-table-column>
- </el-table>
- <div class="pageBtn" style="margin-top: 10px">
- <el-pagination v-model:currentPage="pageIndex1" v-model:page-size="pageSize1" :page-sizes="[3]" small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize1" @size-change="handleSizeChange1" @current-change="handleCurrentChange1" />
- </div>
- </div>
- </div>
- <div class="chart-item chart-item2" :class="zin==5?'upItem':''">
- <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10>
- <div class="chart-tit">
- <span class="tit">其他数据分析</span>
- <div class="filter-part filter-part2">
- <el-cascader @focus="upgrade(5)" :teleported="false" v-model="chartSearch4.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/>
- </div>
- </div>
- <div class="chart" style="margin-top: 10px;display: flex;align-items: center">
- <div class="c-item" :id="aqxj"></div>
- <div class="c-item" :id="aqby"></div>
- <div class="c-item" :id="yhxh"></div>
- </div>
- </div>
- </div>
+ <div class="home-container" :class="isFull==true?'container':''" id="bigScreen">
+ <div class="full">
+ <el-button v-if="isFull==false" type="text" style="height: 34px" @click="toFullscreen">
+ <el-icon style="vertical-align: middle">
+ <FullScreen />
+ </el-icon>
+ <span style="vertical-align: middle">全屏</span>
+ </el-button>
+ <el-button v-else type="text" style="height: 34px" @click="toFullscreen">
+ <el-icon style="vertical-align: middle">
+ <Close />
+ </el-icon>
+ <span style="vertical-align: middle">退出全屏</span>
+ </el-button>
</div>
+ <div class="topChart">
+ <div class="chart-item" :class="zin==1?'upItem':''">
+ <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10>
+ <div class="chart-tit">
+ <span class="tit">当前时间设备状态</span>
+ <div class="filter-part filter-part2">
+ <el-cascader @focus="upgrade(1)" :teleported="false" v-model="chartSearch1.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/>
+ </div>
+ </div>
+ <div class="chart" :id="sbzt"></div>
+ </div>
+ <div class="chart-item" :class="zin==2?'upItem':''">
+ <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10>
+ <div class="chart-tit">
+ <span class="tit">设备异常趋势</span>
+ <div class="filter-part filter-part2">
+ <el-cascader @focus="upgrade(2)" :teleported="false" v-model="chartSearch2.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/>
+ </div>
+ </div>
+ <div class="chart" :id="ycqs"></div>
+ </div>
+ <div class="chart-item" :class="zin==3?'upItem':''">
+ <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10>
+ <div class="chart-tit">
+ <span class="tit">关联作业排行</span>
+ <div class="filter-part filter-part3">
+ <el-cascader @focus="upgrade(3)" :teleported="false" v-model="chartSearch3.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/>
+ <el-select :teleported="false" v-model="chartSearch3.period" size="small">
+ <el-option label="近7天" value="week"/>
+ <el-option label="近30天" value="month"/>
+ <el-option label="近90天" value="season"/>
+ <el-option label="近1年" value="year"/>
+ </el-select>
+ <el-select :teleported="false" v-model="chartSearch3.workType" size="small">
+ <el-option
+ v-for="item in workType1"
+ :key="item.id"
+ :label="item.name"
+ :value="item.id"
+ />
+ </el-select>
+ </div>
+ </div>
+ <div class="chart">
+ <el-table ref="multipleTableRef" :data="rankData" style="width: 100%" stripe border :header-cell-style="{ background: '#fafafa' }">
+ <el-table-column property="num" label="设备位号" align="center"/>
+ <el-table-column property="name" label="设备名称" align="center"/>
+ <el-table-column property="dep" label="所属部门" align="center"/>
+ <el-table-column property="count" label="关联次数" align="center"/>
+ </el-table>
+ <el-button type="text" size="small" style="margin-top: 10px">查看所有涉及殊作业的设备>></el-button>
+ </div>
+ <!-- <div class="chart" :id="ycqs"></div>-->
+ </div>
+ </div>
+ <div class="topChart">
+ <div class="chart-item chart-item2" :class="zin==4?'upItem':''">
+ <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10>
+ <div class="chart-tit">
+ <span class="tit">关联作业趋势图</span>
+ <div class="filter-part filter-part2">
+ <el-cascader @focus="upgrade(4)" :teleported="false" v-model="chartSearch4.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/>
+ </div>
+ </div>
+ <div class="chart">
+ <el-table :data="wdsbData" style="width: 100%" stripe border :header-cell-style="{ background: '#fafafa' }">
+ <el-table-column prop="num" label="设备位号" align="center"/>
+ <el-table-column prop="name" label="设备名称" align="center"/>
+ <el-table-column prop="dep" label="所属事业部" align="center"/>
+ <el-table-column prop="temRange" label="温度敏感范围" align="center"/>
+ <el-table-column prop="tem" label="当前气温" align="center"/>
+ <el-table-column prop="status" label="状态" align="center" width="180">
+ <template #default="scope">
+ <el-tag :type="scope.row.status == 0 ? 'success' : scope.row.status == 1 ? '' : 'danger'">{{ scope.row.status == 0 ? '正常' : scope.row.status == 1 ? '低温警报' : '高温警报' }}</el-tag>
+ </template>
+ </el-table-column>
+ </el-table>
+ <div class="pageBtn" style="margin-top: 10px">
+ <el-pagination v-model:currentPage="pageIndex1" v-model:page-size="pageSize1" :page-sizes="[3]" small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize1" @size-change="handleSizeChange1" @current-change="handleCurrentChange1" />
+ </div>
+ </div>
+ </div>
+ <div class="chart-item chart-item2" :class="zin==5?'upItem':''">
+ <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10>
+ <div class="chart-tit">
+ <span class="tit">其他数据分析</span>
+ <div class="filter-part filter-part2">
+ <el-cascader @focus="upgrade(5)" :teleported="false" v-model="chartSearch4.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/>
+ </div>
+ </div>
+ <div class="chart" style="margin-top: 10px;display: flex;align-items: center">
+ <div class="c-item" :id="aqxj"></div>
+ <div class="c-item" :id="aqby"></div>
+ <div class="c-item" :id="yhxh"></div>
+ </div>
+ </div>
+ </div>
+ </div>
</template>
<script lang="ts">
@@ -135,45 +135,45 @@
// 定义接口来定义对象的类型
interface stateType {
- applyData: Array<string>;
- workTimeList: Array<string>;
- multipleSelection: Array<any>;
- casProps: {};
- approveInfo: Object;
- dialogDetails: boolean;
- dialogReview: boolean;
- pageIndex1: number;
- pageSize1: number;
- chosenIndex: null | number;
- searchWord: number | null;
- searchStatus: number | null;
- chartSearch1: object;
- chartSearch2: object;
- chartSearch3: object;
- chartSearch4: object;
- totalSize1: number;
- details: {};
- workType: Array<type>;
- workType1: Array<type>;
- dialogType: number | null;
- departmentList: Array<any>;
- rankData: Array<any>;
- wdsbData: Array<any>;
- isFull:boolean;
- themeColor:string;
- zin:number
+ applyData: Array<string>;
+ workTimeList: Array<string>;
+ multipleSelection: Array<any>;
+ casProps: {};
+ approveInfo: Object;
+ dialogDetails: boolean;
+ dialogReview: boolean;
+ pageIndex1: number;
+ pageSize1: number;
+ chosenIndex: null | number;
+ searchWord: number | null;
+ searchStatus: number | null;
+ chartSearch1: object;
+ chartSearch2: object;
+ chartSearch3: object;
+ chartSearch4: object;
+ totalSize1: number;
+ details: {};
+ workType: Array<type>;
+ workType1: Array<type>;
+ dialogType: number | null;
+ departmentList: Array<any>;
+ rankData: Array<any>;
+ wdsbData: Array<any>;
+ isFull:boolean;
+ themeColor:string;
+ zin:number
}
interface type {
- id: number;
- name: string;
+ id: number;
+ name: string;
}
interface status {
name: string
value: number
}
interface DepartmentState {
- depId: number;
- depName: string;
+ depId: number;
+ depName: string;
}
interface User {
name: string;
@@ -181,774 +181,773 @@
info: string;
}
export default defineComponent({
- name: 'facilityIndex',
- components: {},
- setup() {
- const userInfo = useUserInfo();
- const { userInfos } = storeToRefs(userInfo);
- const router = useRouter();
- const sbzt = ref("eChartSbzt" + Date.now() + Math.random())
- const ycqs = ref("eChartYcqs" + Date.now() + Math.random())
- const aqxj = ref("eChartAqxj" + Date.now() + Math.random())
- const aqby = ref("eChartAqby" + Date.now() + Math.random())
- const yhxh = ref("eChartYhxh" + Date.now() + Math.random())
- const state = reactive<stateType>({
- isFull: false,
- themeColor: '#333',
- zin: 1,
- pageIndex1: 1,
- pageSize1: 3,
- totalSize1: 3,
- dialogType: null,
- dialogReview: false,
- departmentList: [],
- chosenIndex: null,
- searchWord: null,
- searchStatus: null,
- chartSearch1: {
- searchDep: null,
- period: 'month'
- },
- chartSearch2: {
- searchDep: null,
- type: 0
- },
- chartSearch3: {
- searchDep: null
- },
- chartSearch4: {
- searchDep: null
- },
- applyData: [],
- workTimeList: [],
- multipleSelection: [],
- approveInfo: {
- approvalSteps: [],
- operators: []
- },
- casProps: {
- expandTrigger: 'hover',
- emitPath: false,
- value: 'depId',
- label: 'depName',
- checkStrictly: true
- },
- dialogDetails: false,
- details: {},
- workType1: [
- { id: 0, name: '所有作业' },
- { id: 1, name: '动火作业' },
- { id: 2, name: '受限空间作业' },
- { id: 3, name: '吊装作业' },
- { id: 4, name: '动土作业' },
- { id: 5, name: '断路作业' },
- { id: 6, name: '高处作业' },
- { id: 7, name: '临时用电作业' },
- { id: 8, name: '盲板抽堵作业' }
- ],
- workType: [
- { id: 1, name: '动火作业' },
- { id: 2, name: '受限空间作业' },
- { id: 3, name: '吊装作业' },
- { id: 4, name: '动土作业' },
- { id: 5, name: '断路作业' },
- { id: 6, name: '高处作业' },
- { id: 7, name: '临时用电作业' },
- { id: 8, name: '盲板抽堵作业' }
- ],
- rankData: [
- {
- num: '111',
- name: '设备1',
- dep: '事业部1',
- count: 58
- },
- {
- num: '222',
- name: '设备2',
- dep: '事业部2',
- count: 58
- },
- {
- num: '333',
- name: '设备3',
- dep: '事业部3',
- count: 58
- },
- {
- num: '444',
- name: '设备4',
- dep: '事业部4',
- count: 58
- },
- {
- num: '555',
- name: '设备5',
- dep: '事业部5',
- count: 58
- }
- ],
- wdsbData: [
- {
- num: '111',
- name: '设备1',
- dep: '事业部1',
- temRange: '>=35摄氏度',
- tem: '38摄氏度',
- status: '2'
- },
- {
- num: '222',
- name: '设备1',
- dep: '事业部1',
- temRange: '<=55摄氏度',
- tem: '38摄氏度',
- status: '1'
- },
- {
- num: '333',
- name: '设备1',
- dep: '事业部1',
- temRange: '>=55摄氏度',
- tem: '38摄氏度',
- status: '0'
- }
- ]
- });
- // 页面载入时执行方法
- onMounted(() => {
- // getListByPage();
- getAllDepartment();
- initSbzt()
- initYcqs()
- initAqxj()
- initAqby()
- initYhxh()
- });
- const toFullscreen =()=>{
- console.log(state.isFull,'quanp',state.themeColor)
- const element = document.getElementById('bigScreen')
- if (!screenfull.isEnabled) {
- ElMessage.warning('暂不不支持全屏');
- return false;
+ name: 'facilityIndex',
+ components: {},
+ setup() {
+ const userInfo = useUserInfo();
+ const { userInfos } = storeToRefs(userInfo);
+ const router = useRouter();
+ const sbzt = ref("eChartSbzt" + Date.now() + Math.random())
+ const ycqs = ref("eChartYcqs" + Date.now() + Math.random())
+ const aqxj = ref("eChartAqxj" + Date.now() + Math.random())
+ const aqby = ref("eChartAqby" + Date.now() + Math.random())
+ const yhxh = ref("eChartYhxh" + Date.now() + Math.random())
+ const state = reactive<stateType>({
+ isFull: false,
+ themeColor: '#333',
+ zin: 1,
+ pageIndex1: 1,
+ pageSize1: 3,
+ totalSize1: 3,
+ dialogType: null,
+ dialogReview: false,
+ departmentList: [],
+ chosenIndex: null,
+ searchWord: null,
+ searchStatus: null,
+ chartSearch1: {
+ searchDep: null,
+ period: 'month'
+ },
+ chartSearch2: {
+ searchDep: null,
+ type: 0
+ },
+ chartSearch3: {
+ searchDep: null
+ },
+ chartSearch4: {
+ searchDep: null
+ },
+ applyData: [],
+ workTimeList: [],
+ multipleSelection: [],
+ approveInfo: {
+ approvalSteps: [],
+ operators: []
+ },
+ casProps: {
+ expandTrigger: 'hover',
+ emitPath: false,
+ value: 'depId',
+ label: 'depName',
+ checkStrictly: true
+ },
+ dialogDetails: false,
+ details: {},
+ workType1: [
+ { id: 0, name: '所有作业' },
+ { id: 1, name: '动火作业' },
+ { id: 2, name: '受限空间作业' },
+ { id: 3, name: '吊装作业' },
+ { id: 4, name: '动土作业' },
+ { id: 5, name: '断路作业' },
+ { id: 6, name: '高处作业' },
+ { id: 7, name: '临时用电作业' },
+ { id: 8, name: '盲板抽堵作业' }
+ ],
+ workType: [
+ { id: 1, name: '动火作业' },
+ { id: 2, name: '受限空间作业' },
+ { id: 3, name: '吊装作业' },
+ { id: 4, name: '动土作业' },
+ { id: 5, name: '断路作业' },
+ { id: 6, name: '高处作业' },
+ { id: 7, name: '临时用电作业' },
+ { id: 8, name: '盲板抽堵作业' }
+ ],
+ rankData: [
+ {
+ num: '111',
+ name: '设备1',
+ dep: '事业部1',
+ count: 58
+ },
+ {
+ num: '222',
+ name: '设备2',
+ dep: '事业部2',
+ count: 58
+ },
+ {
+ num: '333',
+ name: '设备3',
+ dep: '事业部3',
+ count: 58
+ },
+ {
+ num: '444',
+ name: '设备4',
+ dep: '事业部4',
+ count: 58
+ },
+ {
+ num: '555',
+ name: '设备5',
+ dep: '事业部5',
+ count: 58
}
- screenfull.toggle(element);
- state.isFull = !state.isFull
- if(state.isFull == true){
- state.themeColor = '#11FEEE'
- }else{
- state.themeColor = '#333'
+ ],
+ wdsbData: [
+ {
+ num: '111',
+ name: '设备1',
+ dep: '事业部1',
+ temRange: '>=35摄氏度',
+ tem: '38摄氏度',
+ status: '2'
+ },
+ {
+ num: '222',
+ name: '设备1',
+ dep: '事业部1',
+ temRange: '<=55摄氏度',
+ tem: '38摄氏度',
+ status: '1'
+ },
+ {
+ num: '333',
+ name: '设备1',
+ dep: '事业部1',
+ temRange: '>=55摄氏度',
+ tem: '38摄氏度',
+ status: '0'
}
- initSbzt()
- initYcqs()
- initAqxj()
- initAqby()
- initYhxh()
+ ]
+ });
+ // 页面载入时执行方法
+ onMounted(() => {
+ // getListByPage();
+ getAllDepartment();
+ initSbzt()
+ initYcqs()
+ initAqxj()
+ initAqby()
+ initYhxh()
+ });
+ const toFullscreen =()=>{
+ console.log(state.isFull,'quanp',state.themeColor)
+ const element = document.getElementById('bigScreen')
+ if (!screenfull.isEnabled) {
+ ElMessage.warning('暂不不支持全屏');
+ return false;
}
- const upgrade =(level:number)=>{
- state.zin = level
- console.log(state.zin,'zin')
+ screenfull.toggle(element);
+ state.isFull = !state.isFull
+ if(state.isFull == true){
+ state.themeColor = '#11FEEE'
+ }else{
+ state.themeColor = '#333'
}
- type EChartsOption = echarts.EChartsOption
- const initSbzt =()=>{
- let dom = document.getElementById(sbzt.value);
- let myChart = echarts.init(dom);
- let option: EChartsOption;
- option = {
- tooltip: {
- trigger: 'item'
+ initSbzt()
+ initYcqs()
+ initAqxj()
+ initAqby()
+ initYhxh()
+ }
+ const upgrade =(level:number)=>{
+ state.zin = level
+ console.log(state.zin,'zin')
+ }
+ type EChartsOption = echarts.EChartsOption
+ const initSbzt =()=>{
+ let dom = document.getElementById(sbzt.value);
+ let myChart = echarts.init(dom);
+ let option: EChartsOption;
+ option = {
+ tooltip: {
+ trigger: 'item'
+ },
+ legend: {
+ bottom: '10%',
+ textStyle: {
+ // 设置默认的文字颜色
+ color: state.themeColor,
+ fontSize: 12
},
- legend: {
- bottom: '10%',
- textStyle: {
- // 设置默认的文字颜色
- color: state.themeColor,
- fontSize: 12
- },
+ itemStyle: {
+ borderWidth: 0 // 设置图例边框宽度为0
+ }
+ },
+ series: [
+ {
+ name: '当前时间设备状态',
+ type: 'pie',
+ radius: '50%',
+ center: ['50%','35%'],
+ avoidLabelOverlap: false,
itemStyle: {
- borderWidth: 0 // 设置图例边框宽度为0
+ borderRadius: 1,
+ borderColor: '#fff',
+ borderWidth: 1
+ },
+ label: {
+ show: true,
+ position: 'outside',
+ overflow: 'truncate',
+ borderWidth: 0,
+ color: state.themeColor
+ },
+ labelLine: {
+ show: true, // 显示指示线
+ lineStyle: {
+ color: '#ccc',
+ width: 1,
+ type: 'solid'
+ }
+ },
+ emphasis: {
+ itemStyle: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
+ },
+ },
+ data: [
+ { value: 1048, name: '在用' },
+ { value: 735, name: '维修' },
+ { value: 580, name: '停用' },
+ { value: 484, name: '报废' }
+ ]
+ }
+ ]
+ }
+
+ option && myChart.setOption(option);
+ window.addEventListener("resize",function (){
+ myChart.resize();
+ });
+ }
+ const initYcqs =()=>{
+ let dom = document.getElementById(ycqs.value);
+ let myChart = echarts.init(dom);
+ let option: EChartsOption;
+ option = {
+ xAxis: {
+ type: 'category',
+ data: ['四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月', '一月', '二月', '三月'],
+ axisLabel: {
+ color: state.themeColor
+ }
+ },
+ yAxis: {
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#fafafa',
+ width: 1,
+ type: 'dashed'
}
},
- series: [
- {
- name: '当前时间设备状态',
- type: 'pie',
- radius: '50%',
- center: ['50%','35%'],
- avoidLabelOverlap: false,
- itemStyle: {
- borderRadius: 1,
- borderColor: '#fff',
- borderWidth: 1
- },
+ axisLabel:{
+ color: '#ccc'
+ }
+ },
+ grid: {
+ top: '8%',
+ bottom: '8%'
+ },
+ series: [
+ {
+ data: [150, 230, 224, 218, 135, 147, 230, 224, 218, 135, 147, 260],
+ type: 'line',
+ label:{
+ show: true
+ }
+ }
+ ]
+ }
+
+ option && myChart.setOption(option);
+ window.addEventListener("resize",function (){
+ myChart.resize();
+ });
+ }
+ const initAqxj =()=>{
+ let dom = document.getElementById(aqxj.value);
+ let myChart = echarts.init(dom);
+ let option: EChartsOption;
+ option = {
+ title: {
+ text: '按期巡检率',
+ left: 'center',
+ textStyle:{
+ color: state.themeColor
+ }
+ },
+ tooltip: {
+ trigger: 'item'
+ },
+ legend: {
+ bottom: '5%',
+ left: 'center',
+ textStyle: {
+ // 设置默认的文字颜色
+ color: state.themeColor,
+ fontSize: 12
+ },
+ itemStyle: {
+ borderWidth: 0 // 设置图例边框宽度为0
+ }
+ },
+ series: [
+ {
+ name: '按期巡检率',
+ type: 'pie',
+ radius: ['40%', '70%'],
+ center: ['50%','48%'],
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderRadius: 1,
+ borderColor: '#fff',
+ borderWidth: 2
+ },
+ label: {
+ show: false,
+ position: 'center'
+ },
+ emphasis: {
label: {
show: true,
- position: 'outside',
- overflow: 'truncate',
- borderWidth: 0,
- color: state.themeColor
- },
- labelLine: {
- show: true, // 显示指示线
- lineStyle: {
- color: '#ccc',
- width: 1,
- type: 'solid'
- }
- },
- emphasis: {
- itemStyle: {
- shadowBlur: 10,
- shadowOffsetX: 0,
- shadowColor: 'rgba(0, 0, 0, 0.5)'
- },
- },
- data: [
- { value: 1048, name: '在用' },
- { value: 735, name: '维修' },
- { value: 580, name: '停用' },
- { value: 484, name: '报废' }
- ]
- }
- ]
- }
-
- option && myChart.setOption(option);
- window.addEventListener("resize",function (){
- myChart.resize();
- });
- }
- const initYcqs =()=>{
- let dom = document.getElementById(ycqs.value);
- let myChart = echarts.init(dom);
- let option: EChartsOption;
- option = {
- xAxis: {
- type: 'category',
- data: ['四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月', '一月', '二月', '三月'],
- axisLabel: {
- color: state.themeColor
- }
- },
- yAxis: {
- splitLine: {
- show: true,
- lineStyle: {
- color: '#fafafa',
- width: 1,
- type: 'dashed'
+ fontSize: 40,
+ fontWeight: 'bold'
}
},
- axisLabel:{
- color: '#ccc'
- }
- },
- grid: {
- top: '8%',
- bottom: '8%'
- },
- series: [
- {
- data: [150, 230, 224, 218, 135, 147, 230, 224, 218, 135, 147, 260],
- type: 'line',
- label:{
- show: true
- }
- }
- ]
- }
-
- option && myChart.setOption(option);
- window.addEventListener("resize",function (){
- myChart.resize();
- });
- }
- const initAqxj =()=>{
- let dom = document.getElementById(aqxj.value);
- let myChart = echarts.init(dom);
- let option: EChartsOption;
- option = {
- title: {
- text: '按期巡检率',
- left: 'center',
- textStyle:{
- color: state.themeColor
- }
- },
- tooltip: {
- trigger: 'item'
- },
- legend: {
- bottom: '5%',
- left: 'center',
- textStyle: {
- // 设置默认的文字颜色
- color: state.themeColor,
- fontSize: 12
+ labelLine: {
+ show: true
},
- itemStyle: {
- borderWidth: 0 // 设置图例边框宽度为0
- }
- },
- series: [
- {
- name: '按期巡检率',
- type: 'pie',
- radius: ['40%', '70%'],
- center: ['50%','48%'],
- avoidLabelOverlap: false,
- itemStyle: {
- borderRadius: 1,
- borderColor: '#fff',
- borderWidth: 2
- },
- label: {
- show: false,
- position: 'center'
- },
- emphasis: {
- label: {
- show: true,
- fontSize: 40,
- fontWeight: 'bold'
- }
- },
- labelLine: {
- show: true
- },
- data: [
- { value: 254, name: '在用' },
- { value: 735, name: '维修' }
- ]
- }
- ]
- }
-
- option && myChart.setOption(option);
- window.addEventListener("resize",function (){
- myChart.resize();
- });
- }
- const initAqby =()=>{
- let dom = document.getElementById(aqby.value);
- let myChart = echarts.init(dom);
- let option: EChartsOption;
- option = {
- title: {
- text: '按期保养率',
- left: 'center',
- textStyle:{
- color: state.themeColor
- }
- },
- tooltip: {
- trigger: 'item'
- },
- legend: {
- bottom: '5%',
- left: 'center',
- textStyle: {
- // 设置默认的文字颜色
- color: state.themeColor,
- fontSize: 12
- },
- itemStyle: {
- borderWidth: 0 // 设置图例边框宽度为0
- }
- },
- series: [
- {
- name: '按期保养率',
- type: 'pie',
- radius: ['40%', '70%'],
- center: ['50%','48%'],
- avoidLabelOverlap: false,
- itemStyle: {
- borderRadius: 1,
- borderColor: '#fff',
- borderWidth: 2
- },
- label: {
- show: false,
- position: 'center'
- },
- emphasis: {
- label: {
- show: true,
- fontSize: 40,
- fontWeight: 'bold'
- }
- },
- labelLine: {
- show: true
- },
- data: [
- { value: 254, name: '在用' },
- { value: 735, name: '维修' }
- ]
- }
- ]
- }
-
- option && myChart.setOption(option);
- window.addEventListener("resize",function (){
- myChart.resize();
- });
- }
- const initYhxh =()=>{
- let dom = document.getElementById(yhxh.value);
- let myChart = echarts.init(dom);
- let option: EChartsOption;
- option = {
- title: {
- text: '隐患销号率',
- left: 'center',
- textStyle:{
- color: state.themeColor
- }
- },
- tooltip: {
- trigger: 'item'
- },
- legend: {
- bottom: '5%',
- left: 'center',
- textStyle: {
- // 设置默认的文字颜色
- color: state.themeColor,
- fontSize: 12
- },
- itemStyle: {
- borderWidth: 0 // 设置图例边框宽度为0
- }
- },
- series: [
- {
- name: '隐患销号率',
- type: 'pie',
- radius: ['40%', '70%'],
- center: ['50%','48%'],
- avoidLabelOverlap: false,
- itemStyle: {
- borderRadius: 1,
- borderColor: '#fff',
- borderWidth: 2
- },
- label: {
- show: false,
- position: 'center'
- },
- emphasis: {
- label: {
- show: true,
- fontSize: 40,
- fontWeight: 'bold'
- }
- },
- labelLine: {
- show: true
- },
- data: [
- { value: 254, name: '在用' },
- { value: 735, name: '维修' }
- ]
- }
- ]
- }
-
- option && myChart.setOption(option);
- window.addEventListener("resize",function (){
- myChart.resize();
- });
- }
- // 刷新
- const reLoadData = async () => {
- // getListByPage();
- };
-
- // 填写表单
- const toApply = () => {
- router.push({
- path: 'zysq'
- });
- };
-
- // 获取部门列表
- const getAllDepartment = async () => {
- let res = await teamManageApi().getAllDepartment();
- if (res.data.code === '200') {
- state.departmentList = JSON.parse(JSON.stringify(res.data.data))
- // recursion(state.departmentList);
- } else {
- ElMessage({
- type: 'warning',
- message: res.data.msg
- });
- }
- };
-
- // 分页获取列表
- // const getListByPage = async () => {
- // const dateRange = JSON.parse(JSON.stringify(state.searchDate))
- // if(dateRange[1]){dateRange[1] = dateRange[1].replace('00:00:00','23:59:59')}
- // const data = { pageSize: state.pageSize1, pageIndex: state.pageIndex1, searchParams: { workType: state.searchWord, applyDepId: state.searchDep,applyStartTime: dateRange[0],applyEndTime: dateRange[1]} };
- // let res = await workApplyApi().getApplyList(data);
- // if (res.data.code === '200') {
- // state.applyData = JSON.parse(JSON.stringify(res.data.data));
- // state.applyData = state.applyData.map((item) => {
- // if (item.operators == null || item.operators == []) {
- // item.operators = [];
- // } else {
- // item.operators = Array.from(item.operators, ({ operatorUname }) => operatorUname);
- // }
- // return item;
- // });
- // state.totalSize1 = res.data.total;
- // } else {
- // ElMessage({
- // type: 'warning',
- // message: res.data.msg
- // });
- // }
- // };
-
- // 表格数据格式化
- const toNames = (row, column, cellValue, index) => {
- if (row.list == []) {
- return [];
- } else {
- const nameList = [];
- for (let i = 0; i < row.list.length; i++) {
- for (let t = 0; t < state.workTimeList.length; t++) {
- if (row.list[i] == state.workTimeList[t].id) {
- nameList.push(state.workTimeList[t].name);
- }
- }
- }
- return nameList.join();
- }
- };
-
- // 关键词查询记录
- // const searchRecord = async () => {
- // if (state.searchWord == null && state.searchStatus == null && state.searchDep == null && state.searchDate == []) {
- // ElMessage({
- // type: 'warning',
- // message: '请输入查询关键词'
- // });
- // } else {
- // getListByPage();
- // }
- // };
- // 重置搜索
- // const clearSearch = async () => {
- // state.searchWord = null;
- // state.searchDep = null;
- // state.searchDate = []
- // getListByPage();
- // };
- //
- // const handleSizeChange1 = (val: number) => {
- // state.pageSize1 = val;
- // getListByPage();
- // };
- // const handleCurrentChange1 = (val: number) => {
- // state.pageIndex1 = val;
- // getListByPage();
- // };
-
- const handleReview = (row)=>{
- state.dialogReview = true
- }
-
- const submitReview = async (formEl: FormInstance | undefined) => {
- if (!formEl) return
- await formEl.validate((valid, fields) => {
- if (valid) {
- console.log('submit!')
- } else {
- console.log('error submit!', fields)
+ data: [
+ { value: 254, name: '在用' },
+ { value: 735, name: '维修' }
+ ]
}
- })
+ ]
}
- // 折线图
- const renderMenu = async (value: string) => {
- Session.set('projectId', value);
- userInfos.value.projectId = value;
- await initBackEndControlRoutes();
- };
-
- return {
- View,
- Edit,
- Delete,
- Refresh,
- Plus,
- Finished,
- Download,
- FolderChecked,
- sbzt,
- ycqs,
- aqxj,
- aqby,
- yhxh,
- toFullscreen,
- upgrade,
- handleReview,
- submitReview,
- reLoadData,
- toApply,
- toNames,
- // searchRecord,
- // clearSearch,
- // getListByPage,
- // handleSizeChange1,
- // handleCurrentChange1,
- ...toRefs(state)
- };
+ option && myChart.setOption(option);
+ window.addEventListener("resize",function (){
+ myChart.resize();
+ });
}
+ const initAqby =()=>{
+ let dom = document.getElementById(aqby.value);
+ let myChart = echarts.init(dom);
+ let option: EChartsOption;
+ option = {
+ title: {
+ text: '按期保养率',
+ left: 'center',
+ textStyle:{
+ color: state.themeColor
+ }
+ },
+ tooltip: {
+ trigger: 'item'
+ },
+ legend: {
+ bottom: '5%',
+ left: 'center',
+ textStyle: {
+ // 设置默认的文字颜色
+ color: state.themeColor,
+ fontSize: 12
+ },
+ itemStyle: {
+ borderWidth: 0 // 设置图例边框宽度为0
+ }
+ },
+ series: [
+ {
+ name: '按期保养率',
+ type: 'pie',
+ radius: ['40%', '70%'],
+ center: ['50%','48%'],
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderRadius: 1,
+ borderColor: '#fff',
+ borderWidth: 2
+ },
+ label: {
+ show: false,
+ position: 'center'
+ },
+ emphasis: {
+ label: {
+ show: true,
+ fontSize: 40,
+ fontWeight: 'bold'
+ }
+ },
+ labelLine: {
+ show: true
+ },
+ data: [
+ { value: 254, name: '在用' },
+ { value: 735, name: '维修' }
+ ]
+ }
+ ]
+ }
+
+ option && myChart.setOption(option);
+ window.addEventListener("resize",function (){
+ myChart.resize();
+ });
+ }
+ const initYhxh =()=>{
+ let dom = document.getElementById(yhxh.value);
+ let myChart = echarts.init(dom);
+ let option: EChartsOption;
+ option = {
+ title: {
+ text: '隐患销号率',
+ left: 'center',
+ textStyle:{
+ color: state.themeColor
+ }
+ },
+ tooltip: {
+ trigger: 'item'
+ },
+ legend: {
+ bottom: '5%',
+ left: 'center',
+ textStyle: {
+ // 设置默认的文字颜色
+ color: state.themeColor,
+ fontSize: 12
+ },
+ itemStyle: {
+ borderWidth: 0 // 设置图例边框宽度为0
+ }
+ },
+ series: [
+ {
+ name: '隐患销号率',
+ type: 'pie',
+ radius: ['40%', '70%'],
+ center: ['50%','48%'],
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderRadius: 1,
+ borderColor: '#fff',
+ borderWidth: 2
+ },
+ label: {
+ show: false,
+ position: 'center'
+ },
+ emphasis: {
+ label: {
+ show: true,
+ fontSize: 40,
+ fontWeight: 'bold'
+ }
+ },
+ labelLine: {
+ show: true
+ },
+ data: [
+ { value: 254, name: '在用' },
+ { value: 735, name: '维修' }
+ ]
+ }
+ ]
+ }
+
+ option && myChart.setOption(option);
+ window.addEventListener("resize",function (){
+ myChart.resize();
+ });
+ }
+ // 刷新
+ const reLoadData = async () => {
+ // getListByPage();
+ };
+
+ // 填写表单
+ const toApply = () => {
+ router.push({
+ path: 'zysq'
+ });
+ };
+
+ // 获取部门列表
+ const getAllDepartment = async () => {
+ let res = await teamManageApi().getAllDepartment();
+ if (res.data.code === '200') {
+ state.departmentList = JSON.parse(JSON.stringify(res.data.data))
+ // recursion(state.departmentList);
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ };
+
+ // 分页获取列表
+ // const getListByPage = async () => {
+ // const dateRange = JSON.parse(JSON.stringify(state.searchDate))
+ // if(dateRange[1]){dateRange[1] = dateRange[1].replace('00:00:00','23:59:59')}
+ // const data = { pageSize: state.pageSize1, pageIndex: state.pageIndex1, searchParams: { workType: state.searchWord, applyDepId: state.searchDep,applyStartTime: dateRange[0],applyEndTime: dateRange[1]} };
+ // let res = await workApplyApi().getApplyList(data);
+ // if (res.data.code === '200') {
+ // state.applyData = JSON.parse(JSON.stringify(res.data.data));
+ // state.applyData = state.applyData.map((item) => {
+ // if (item.operators == null || item.operators == []) {
+ // item.operators = [];
+ // } else {
+ // item.operators = Array.from(item.operators, ({ operatorUname }) => operatorUname);
+ // }
+ // return item;
+ // });
+ // state.totalSize1 = res.data.total;
+ // } else {
+ // ElMessage({
+ // type: 'warning',
+ // message: res.data.msg
+ // });
+ // }
+ // };
+
+ // 表格数据格式化
+ const toNames = (row, column, cellValue, index) => {
+ if (row.list == []) {
+ return [];
+ } else {
+ const nameList = [];
+ for (let i = 0; i < row.list.length; i++) {
+ for (let t = 0; t < state.workTimeList.length; t++) {
+ if (row.list[i] == state.workTimeList[t].id) {
+ nameList.push(state.workTimeList[t].name);
+ }
+ }
+ }
+ return nameList.join();
+ }
+ };
+
+ // 关键词查询记录
+ // const searchRecord = async () => {
+ // if (state.searchWord == null && state.searchStatus == null && state.searchDep == null && state.searchDate == []) {
+ // ElMessage({
+ // type: 'warning',
+ // message: '请输入查询关键词'
+ // });
+ // } else {
+ // getListByPage();
+ // }
+ // };
+ // 重置搜索
+ // const clearSearch = async () => {
+ // state.searchWord = null;
+ // state.searchDep = null;
+ // state.searchDate = []
+ // getListByPage();
+ // };
+ //
+ // const handleSizeChange1 = (val: number) => {
+ // state.pageSize1 = val;
+ // getListByPage();
+ // };
+ // const handleCurrentChange1 = (val: number) => {
+ // state.pageIndex1 = val;
+ // getListByPage();
+ // };
+
+ const handleReview = (row)=>{
+ state.dialogReview = true
+ }
+
+ const submitReview = async (formEl: FormInstance | undefined) => {
+ if (!formEl) return
+ await formEl.validate((valid, fields) => {
+ if (valid) {
+ console.log('submit!')
+ } else {
+ console.log('error submit!', fields)
+ }
+ })
+ }
+
+ // 折线图
+ const renderMenu = async (value: string) => {
+ Session.set('projectId', value);
+ userInfos.value.projectId = value;
+ await initBackEndControlRoutes();
+ };
+
+ return {
+ View,
+ Edit,
+ Delete,
+ Refresh,
+ Plus,
+ Finished,
+ Download,
+ FolderChecked,
+ sbzt,
+ ycqs,
+ aqxj,
+ aqby,
+ yhxh,
+ toFullscreen,
+ upgrade,
+ handleReview,
+ submitReview,
+ reLoadData,
+ toApply,
+ toNames,
+ // searchRecord,
+ // clearSearch,
+ // getListByPage,
+ // handleSizeChange1,
+ // handleCurrentChange1,
+ ...toRefs(state)
+ };
+ }
});
</script>
<style scoped lang="scss">
$homeNavLengh: 8;
.home-container {
- height: calc(100vh - 144px);
- box-sizing: border-box;
- overflow: hidden;
- .full{
- position:fixed;
- height: 34px;
- line-height: 34px;
- top: 80px;
- right: 20px;
- z-index: 9;
+ height: calc(100vh - 144px);
+ box-sizing: border-box;
+ overflow: hidden;
+ .full{
+ position:fixed;
+ height: 34px;
+ line-height: 34px;
+ top: 80px;
+ right: 20px;
+ z-index: 9;
+ }
+ .demo-tabs {
+ width: 100%;
+ height: 100%;
+
+ &::v-deep(.el-tabs__content) {
+ height: calc(100% - 60px);
}
- .demo-tabs {
+
+ .el-tab-pane {
+ height: 100%;
+ }
+ }
+ .topChart{
+ width: 100%;
+ height: calc(50% - 10px);
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ margin-bottom: 20px;
+
+ .chart-item{
+ width: calc((100% - 40px)/3);
+ height: 100%;
+ margin-right: 20px;
+ position: relative;
+ background: #fff;
+ padding: 20px;
+
+ &:last-of-type{
+ margin-right: 0;
+ }
+
+ .chart-tit{
width: 100%;
- height: 100%;
-
- &::v-deep(.el-tabs__content) {
- height: calc(100% - 60px);
+ height: 15%;
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ .tit{
+ font-size: 16px;
+ font-weight: bolder;
+ white-space: nowrap;
}
-
- .el-tab-pane {
- height: 100%;
- }
- }
- .topChart{
- width: 100%;
- height: calc(50% - 10px);
- display: flex;
- justify-content: space-between;
- align-items: flex-start;
- margin-bottom: 20px;
-
- .chart-item{
- width: calc((100% - 40px)/3);
- height: 100%;
- margin-right: 20px;
- position: relative;
- background: #fff;
- padding: 20px;
-
- &:last-of-type{
- margin-right: 0;
- }
-
- .chart-tit{
- width: 100%;
- height: 15%;
+ .filter-part{
display: flex;
- align-items: flex-start;
- justify-content: space-between;
- .tit{
- font-size: 16px;
- font-weight: bolder;
- white-space: nowrap;
+ align-items: center;
+ justify-content: right;
+ :deep(.el-cascader){
+ width: 35% !important;
}
- .filter-part{
- display: flex;
- align-items: center;
- justify-content: right;
- :deep(.el-cascader){
- width: 35% !important;
- }
- .el-select{
- width: 35% !important;
- margin-left: 10px;
- }
- .el-switch{
- width: 25% !important;
+ .el-select{
+ width: 35% !important;
+ margin-left: 10px;
+ }
+ .el-switch{
+ width: 25% !important;
- :deep(.el-switch__core){
- width: 100% !important;
- }
- }
- }
- .filter-part2{
- :deep(.el-cascader){
+ :deep(.el-switch__core){
width: 100% !important;
}
}
- .filter-part3{
- :deep(.el-cascader){
- width: 30% !important;
- }
- .el-select{
- width: 25% !important;
- margin-left: 10px;
- }
+ }
+ .filter-part2{
+ :deep(.el-cascader){
+ width: 100% !important;
}
}
- .chart{
- width: 100%;
- height: 85%;
- .el-table{
- height: 90% !important;
- :deep(.el-table__inner-wrapper){
- height: 100% !important;
- .el-table__header-wrapper {
- height: 20% !important;
- .el-table__header{
+ .filter-part3{
+ :deep(.el-cascader){
+ width: 30% !important;
+ }
+ .el-select{
+ width: 25% !important;
+ margin-left: 10px;
+ }
+ }
+ }
+ .chart{
+ width: 100%;
+ height: 85%;
+ .el-table{
+ height: 90% !important;
+ :deep(.el-table__inner-wrapper){
+ height: 100% !important;
+ .el-table__header-wrapper {
+ height: 20% !important;
+ .el-table__header{
+ height: 100% !important;
+ th{
height: 100% !important;
- th{
- height: 100% !important;
- padding: 0 0 !important;
- .cell{
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
+ padding: 0 0 !important;
+ .cell{
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
}
}
- .el-table__body-wrapper {
- height: 80% !important;
- .el-scrollbar__view{
+ }
+ .el-table__body-wrapper {
+ height: 80% !important;
+ .el-scrollbar__view{
+ height: 100% !important;
+ .el-table__body{
height: 100% !important;
- .el-table__body{
+ tbody{
height: 100% !important;
- tbody{
- height: 100% !important;
- .el-table__row{
+ .el-table__row{
+ height: 20% !important;
+ td{
height: 20% !important;
- td{
- height: 20% !important;
- padding: 0 0 !important;
- .left-info{
- display: flex;
- align-items: center;
- }
- .cell{
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- .el-button{
- padding: 0 !important;
- }
+ padding: 0 0 !important;
+ .left-info{
+ display: flex;
+ align-items: center;
+ }
+ .cell{
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ .el-button{
+ padding: 0 !important;
}
}
}
@@ -957,99 +956,99 @@
}
}
}
- .c-item{
- width: calc((100% - 20px)/3);
- height: 100%;
- }
- .pageBtn {
- display: flex;
- align-items: center;
- justify-content: right;
-
- .demo-pagination-block .demonstration {
- margin-bottom: 16px;
- }
- }
}
- .el-radio-group{
- width: 20%;
+ .c-item{
+ width: calc((100% - 20px)/3);
+ height: 100%;
+ }
+ .pageBtn {
display: flex;
- flex-flow: column nowrap;
- align-items: flex-start;
- position: absolute;
- right: 10px;
- top: 50%;
- transform: translateY(-30%);
+ align-items: center;
+ justify-content: right;
- .el-radio{
- width: 100%;
- margin-bottom: 4px;
- }
- }
- :deep(.active-ring-info){
- .active-ring-name{
- font-size: 1.5rem !important;
- text-align: center;
+ .demo-pagination-block .demonstration {
+ margin-bottom: 16px;
}
}
}
+ .el-radio-group{
+ width: 20%;
+ display: flex;
+ flex-flow: column nowrap;
+ align-items: flex-start;
+ position: absolute;
+ right: 10px;
+ top: 50%;
+ transform: translateY(-30%);
- .chart-item2{
- width: calc(50% - 10px);
- height: 100%;
- margin-right: 10px;
- position: relative;
- background: #fff;
- padding: 20px;
-
- &:last-of-type{
- margin-right: 0;
+ .el-radio{
+ width: 100%;
+ margin-bottom: 4px;
}
- .chart{
- .el-table{
- height: 90% !important;
- :deep(.el-table__inner-wrapper){
- height: 100% !important;
- .el-table__header-wrapper {
- height: 20% !important;
- .el-table__header{
+ }
+ :deep(.active-ring-info){
+ .active-ring-name{
+ font-size: 1.5rem !important;
+ text-align: center;
+ }
+ }
+ }
+
+ .chart-item2{
+ width: calc(50% - 10px);
+ height: 100%;
+ margin-right: 10px;
+ position: relative;
+ background: #fff;
+ padding: 20px;
+
+ &:last-of-type{
+ margin-right: 0;
+ }
+ .chart{
+ .el-table{
+ height: 90% !important;
+ :deep(.el-table__inner-wrapper){
+ height: 100% !important;
+ .el-table__header-wrapper {
+ height: 20% !important;
+ .el-table__header{
+ height: 100% !important;
+ th{
height: 100% !important;
- th{
- height: 100% !important;
- padding: 0 0 !important;
- .cell{
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
+ padding: 0 0 !important;
+ .cell{
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
}
}
- .el-table__body-wrapper {
- height: 80% !important;
- .el-scrollbar__view{
+ }
+ .el-table__body-wrapper {
+ height: 80% !important;
+ .el-scrollbar__view{
+ height: 100% !important;
+ .el-table__body{
height: 100% !important;
- .el-table__body{
+ tbody{
height: 100% !important;
- tbody{
- height: 100% !important;
- .el-table__row{
+ .el-table__row{
+ height: 20% !important;
+ td{
height: 20% !important;
- td{
- height: 20% !important;
- padding: 0 0 !important;
- .left-info{
- display: flex;
- align-items: center;
- }
- .cell{
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- .el-button{
- padding: 0 !important;
- }
+ padding: 0 0 !important;
+ .left-info{
+ display: flex;
+ align-items: center;
+ }
+ .cell{
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ .el-button{
+ padding: 0 !important;
}
}
}
@@ -1061,32 +1060,33 @@
}
}
}
+ }
- .el-row {
- display: flex;
- align-items: center;
- margin-bottom: 20px;
- &:last-child {
- margin-bottom: 0;
- }
- .grid-content {
- align-items: center;
- min-height: 36px;
- }
-
- .topInfo {
- width: 100%;
- display: flex;
- align-items: center;
- font-size: 16px;
- font-weight: bold;
-
- & > div {
- white-space: nowrap;
- margin-right: 20px;
- }
- }
+ .el-row {
+ display: flex;
+ align-items: center;
+ margin-bottom: 20px;
+ &:last-child {
+ margin-bottom: 0;
}
+ .grid-content {
+ align-items: center;
+ min-height: 36px;
+ }
+
+ .topInfo {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ font-size: 16px;
+ font-weight: bold;
+
+ & > div {
+ white-space: nowrap;
+ margin-right: 20px;
+ }
+ }
+ }
}
.container{
padding: 20px;
@@ -1231,18 +1231,18 @@
}
}
.el-card {
- border: 0;
+ border: 0;
}
.el-input{
- width: 100% !important;
+ width: 100% !important;
}
::v-deep(.el-date-editor){
- width: 100%;
+ width: 100%;
}
.el-select{
- width: 100%;
+ width: 100%;
}
:deep(.el-cascader){
- width: 100% !important;
+ width: 100% !important;
}
-</style>
+</style>
\ No newline at end of file
--
Gitblit v1.9.2