<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':''">
|
<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':''">
|
<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':''">
|
<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':''">
|
<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':''">
|
<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">
|
import {toRefs, reactive, defineComponent, ref, onMounted, defineAsyncComponent} from 'vue';
|
import { storeToRefs } from 'pinia';
|
import { initBackEndControlRoutes } from '/@/router/backEnd';
|
import { useUserInfo } from '/@/stores/userInfo';
|
import { Session } from '/@/utils/storage';
|
import { useRouter } from 'vue-router';
|
import { Edit, View, Plus, Delete, Refresh, Search, Finished, Download, FolderChecked } from '@element-plus/icons-vue';
|
import { ElTable, ElMessage } from 'element-plus';
|
import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
|
import type { TabsPaneContext } from 'element-plus';
|
import type { FormInstance, FormRules } from 'element-plus'
|
import {teamManageApi} from "/@/api/systemManage/basicDateManage/personShiftManage/teamManage";
|
import Cookies from 'js-cookie';
|
import axios from 'axios';
|
import * as echarts from "echarts";
|
import screenfull from "screenfull";
|
|
// 定义接口来定义对象的类型
|
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
|
}
|
interface type {
|
id: number;
|
name: string;
|
}
|
interface status {
|
name: string
|
value: number
|
}
|
interface DepartmentState {
|
depId: number;
|
depName: string;
|
}
|
interface User {
|
name: string;
|
list: [];
|
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;
|
}
|
screenfull.toggle(element);
|
state.isFull = !state.isFull
|
if(state.isFull == true){
|
state.themeColor = '#11FEEE'
|
}else{
|
state.themeColor = '#333'
|
}
|
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
|
},
|
itemStyle: {
|
borderWidth: 0 // 设置图例边框宽度为0
|
}
|
},
|
series: [
|
{
|
name: '当前时间设备状态',
|
type: 'pie',
|
radius: '50%',
|
center: ['50%','35%'],
|
avoidLabelOverlap: false,
|
itemStyle: {
|
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'
|
}
|
},
|
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,
|
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)
|
}
|
})
|
}
|
|
// 折线图
|
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;
|
}
|
.demo-tabs {
|
width: 100%;
|
height: 100%;
|
|
&::v-deep(.el-tabs__content) {
|
height: calc(100% - 60px);
|
}
|
|
.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%;
|
display: flex;
|
align-items: flex-start;
|
justify-content: space-between;
|
.tit{
|
font-size: 16px;
|
font-weight: bolder;
|
white-space: nowrap;
|
}
|
.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;
|
|
:deep(.el-switch__core){
|
width: 100% !important;
|
}
|
}
|
}
|
.filter-part2{
|
:deep(.el-cascader){
|
width: 100% !important;
|
}
|
}
|
.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;
|
padding: 0 0 !important;
|
.cell{
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
}
|
}
|
}
|
.el-table__body-wrapper {
|
height: 80% !important;
|
.el-scrollbar__view{
|
height: 100% !important;
|
.el-table__body{
|
height: 100% !important;
|
tbody{
|
height: 100% !important;
|
.el-table__row{
|
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;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
.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%;
|
display: flex;
|
flex-flow: column nowrap;
|
align-items: flex-start;
|
position: absolute;
|
right: 10px;
|
top: 50%;
|
transform: translateY(-30%);
|
|
.el-radio{
|
width: 100%;
|
margin-bottom: 4px;
|
}
|
}
|
: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;
|
padding: 0 0 !important;
|
.cell{
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
}
|
}
|
}
|
.el-table__body-wrapper {
|
height: 80% !important;
|
.el-scrollbar__view{
|
height: 100% !important;
|
.el-table__body{
|
height: 100% !important;
|
tbody{
|
height: 100% !important;
|
.el-table__row{
|
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;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.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;
|
background: url('../../../assets/spwbg.png') no-repeat center;
|
|
.full{
|
position:fixed;
|
background: rgba(0,0,0,.2);
|
border: 1px solid rgba(54, 252, 252, .6);
|
border-radius: 17px 1px 1px 17px;
|
box-shadow: 3px 3px 12px rgba(0,0,0,.2);
|
height: 32px;
|
line-height: 30px;
|
top: 10px;
|
right: 2px;
|
display: flex;
|
justify-content: center;
|
backdrop-filter: blur(2px);
|
z-index: 99999;
|
}
|
.topChart{
|
.chart-item{
|
border-radius: 4px;
|
background: rgba(8, 109, 209, 0.2);
|
border: 1px solid rgba(54, 252, 252, .6);
|
backdrop-filter: blur(5px);
|
|
.el-radio.is-bordered.is-checked{
|
border-color: #11FEEE !important;
|
:deep(.el-radio__inner){
|
border-color: #11FEEE !important;
|
background: #11FEEE !important;
|
}
|
:deep(.el-radio__label){
|
color: #11FEEE !important
|
}
|
}
|
.chart-tit{
|
.tit{
|
color: #11FEEE;
|
}
|
|
::v-deep(.el-popper){
|
background-color: rgba(10,31,92,1);
|
border: 1px solid rgba(17,254,238,.4);
|
color: #11FEEE;
|
.el-cascader-node{
|
.in-active-path{
|
background: #0049af;
|
}
|
&:hover{
|
background: #0049af;
|
}
|
}
|
.el-cascader-node__label{
|
color: #11FEEE;
|
}
|
.el-icon{
|
color: #11FEEE;
|
}
|
.el-select-dropdown__item{
|
color: #11FEEE;
|
}
|
.el-select-dropdown__item.hover{
|
background: #0049af;
|
}
|
}
|
::v-deep(.el-popper__arrow){
|
&::before{
|
background-color: rgba(10,31,92,.6) !important;
|
border: 1px solid rgba(17,254,238,.4);
|
}
|
}
|
::v-deep(.el-input__wrapper){
|
box-shadow: none;
|
border: 1px solid rgba(17,254,238,.2);
|
background: rgba(10,31,92,.6) !important;
|
height: 1.5rem;
|
color: #11FEEE;
|
|
input{
|
font-size: 0.8rem;
|
color: #11FEEE;
|
}
|
.el-icon{
|
color: #11FEEE;
|
}
|
}
|
}
|
.chart{
|
.el-table {
|
color: #11FEEE !important;
|
background-color: rgba(0,0,0,0) !important;
|
:deep(thead){
|
color: #11FEEE !important;
|
background-color: #092846 !important
|
}
|
:deep(tr){
|
background-color: rgba(0,0,0,0) !important;
|
.el-table__cell{
|
background-color: rgba(0,0,0,0) !important;
|
}
|
}
|
}
|
.el-button--text{
|
color: #11FEEE;
|
}
|
}
|
}
|
.upItem{
|
position: relative;
|
z-index: 9999;
|
}
|
.chart-item2{
|
.chart{
|
.el-table {
|
color: #11FEEE !important;
|
background-color: rgba(0,0,0,0) !important;
|
:deep(thead){
|
color: #11FEEE !important;
|
background-color: #092846 !important
|
}
|
:deep(tr){
|
background-color: rgba(0,0,0,0) !important;
|
.el-table__cell{
|
background-color: rgba(0,0,0,0) !important;
|
}
|
}
|
}
|
.el-button--text{
|
color: #11FEEE;
|
}
|
}
|
}
|
}
|
}
|
.el-card {
|
border: 0;
|
}
|
.el-input{
|
width: 100% !important;
|
}
|
::v-deep(.el-date-editor){
|
width: 100%;
|
}
|
.el-select{
|
width: 100%;
|
}
|
:deep(.el-cascader){
|
width: 100% !important;
|
}
|
</style>
|
