From e5e9b84b800f1623f85be45a3565689917898c78 Mon Sep 17 00:00:00 2001 From: 马宇豪 <978517621@qq.com> Date: 星期五, 10 三月 2023 18:12:12 +0800 Subject: [PATCH] Default Changelist --- src/views/specialWorkSystem/specialIndex/index.vue | 962 +++++--------------------------------------------------- 1 files changed, 86 insertions(+), 876 deletions(-) diff --git a/src/views/specialWorkSystem/specialIndex/index.vue b/src/views/specialWorkSystem/specialIndex/index.vue index f18f329..ff31155 100644 --- a/src/views/specialWorkSystem/specialIndex/index.vue +++ b/src/views/specialWorkSystem/specialIndex/index.vue @@ -1,161 +1,57 @@ <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"> - <div class="chart-tit"> - <span class="tit">八大作业各分类分布图</span> - <div class="filter-part filter-part2"> - <el-cascader :teleported="false" v-model="chartSearch1.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/> - </div> - </div> - <div class="chart" :id="zyfb"></div> - <el-radio-group v-model="chartSearch1.period" size="small"> - <el-radio label="week" border>近7天</el-radio> - <el-radio label="month" border>近30天</el-radio> - <el-radio label="season" border>近90天</el-radio> - <el-radio label="year" border>近一年</el-radio> - </el-radio-group> - </div> - <div class="chart-item"> - <div class="chart-tit"> - <span class="tit">各事业部关联作业分析</span> - <div class="filter-part"> - <el-cascader :teleported="false" v-model="chartSearch2.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/> - <el-select v-model="chartSearch2.type" size="small" :teleported="false"> - <el-option - v-for="item in workType1" - :key="item.id" - :label="item.name" - :value="item.id" - /> - </el-select> - </div> - </div> - <div class="chart" :id="slfx"></div> - </div> - </div> - <div class="topChart"> - <div class="chart-item"> - <div class="chart-tit"> - <span class="tit">关联作业趋势图</span> - <div class="filter-part filter-part2"> - <el-cascader :teleported="false" v-model="chartSearch3.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/> - </div> - </div> - <div class="chart" :id="zyqs"></div> - </div> - <div class="chart-item"> - <div class="chart-tit"> - <span class="tit">异常警报关联人</span> - <div class="filter-part"> - <el-switch - v-model="chartSearch4.type" - inline-prompt - style="--el-switch-on-color: #13ce66; --el-switch-off-color: #13ce66" - active-text="作业人" - inactive-text="监护人" - /> - <el-select :teleported="false" v-model="chartSearch4.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="chartSearch4.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="warningData" style="width: 100%" stripe border :header-cell-style="{ background: '#fafafa' }"> - <el-table-column property="name" label="姓名" align="center"/> - <el-table-column property="dep" label="所属部门" align="center"/> - <el-table-column property="warning" label="异常报警次数" align="center"/> - <el-table-column property="role" label="角色" align="center"/> - <el-table-column property="isCard" label="是否持证" align="center"> - <template #default="scope"> - <span>{{scope.row.isCard == 1?'是':'否'}}</span> - </template> - </el-table-column> - </el-table> - <el-button type="text" size="small" style="margin-top: 10px">所有记录>></el-button> - </div> -<!-- <div class="chart" :id="slfx"></div>--> - </div> - </div> - <div> - <div class="homeCard"> - <el-row> - <el-col :span="5" style="display:flex;align-items: center"> + <div class="home-container"> + <div style="height: 100%"> + <el-row class="homeCard"> + <el-col :span="5" style="display:flex;align-items: center"> <span style="white-space: nowrap">作业类型:</span> <div class="grid-content topInfo"> - <el-select :teleported="false" v-model="searchWord" size="small"> - <el-option - v-for="item in workType" - :key="item.id" - :label="item.name" - :value="item.id" - /> - </el-select> + <el-select v-model="searchWord"> + <el-option + v-for="item in workType" + :key="item.id" + :label="item.name" + :value="item.id" + /> + </el-select> </div> - </el-col> - <el-col :span="5" style="display:flex;align-items: center"> - <span style="white-space: nowrap">作业状态:</span> - <div class="grid-content topInfo"> - <el-select :teleported="false" v-model="searchStatus" size="small"> - <el-option - v-for="item in workStatus" - :key="item.value" - :label="item.name" - :value="item.value" - /> - </el-select> - </div> - </el-col> - <el-col :span="5" style="display:flex;align-items: center"> + </el-col> + <el-col :span="5" style="display:flex;align-items: center"> + <span style="white-space: nowrap">作业状态:</span> + <div class="grid-content topInfo"> + <el-select v-model="searchStatus"> + <el-option + v-for="item in workStatus" + :key="item.value" + :label="item.name" + :value="item.value" + /> + </el-select> + </div> + </el-col> + <el-col :span="5" style="display:flex;align-items: center"> <span style="white-space: nowrap">作业部门:</span> <div class="grid-content topInfo"> - <el-cascader :teleported="false" size="small" v-model="searchDep" :options="departmentList" :props="casProps" :show-all-levels="false"/> + <el-cascader v-model="searchDep" :options="departmentList" :props="casProps" :show-all-levels="false"/> </div> - </el-col> - <el-col :span="6" style="display:flex;align-items: center;"> + </el-col> + <el-col :span="6" style="display:flex;align-items: center;"> <span style="white-space: nowrap;margin-left: 20px">申请时间:</span> <div class="grid-content topInfo"> - <el-date-picker - v-model="searchDate" - size="small" - :teleported="false" - type="daterange" - unlink-panels - range-separator="至" - start-placeholder="开始日期" - end-placeholder="结束日期" - format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss" - /> + <el-date-picker + v-model="searchDate" + type="daterange" + unlink-panels + range-separator="至" + start-placeholder="开始日期" + end-placeholder="结束日期" + format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss" + /> </div> - </el-col> - <el-button type="primary" style="margin-left: 20px" @click="searchRecord" size="small">查询</el-button> - <el-button plain @click="clearSearch" size="small">重置</el-button> - </el-row> + </el-col> + <el-button type="primary" style="margin-left: 20px" @click="searchRecord">查询</el-button> + <el-button plain @click="clearSearch">重置</el-button> + </el-row> + <div class="homeCard"> <div class="main-card"> <el-row class="cardTop" style="justify-content: space-between"> <el-col :span="2" class="mainCardBtn"> @@ -179,38 +75,31 @@ <el-button type="primary" :icon="Refresh" size="default" @click="reLoadData()" /> </el-col> </el-row> - <el-table ref="multipleTableRef" stripe border :data="workData" style="width: 100%" :header-cell-style="{ background: '#fafafa' }"> - <el-table-column property="num" label="作业证编号" align="center"/> - <el-table-column property="dep" label="部门" align="center"/> - <el-table-column property="applyer" label="申请人" align="center"/> - <el-table-column property="worker" label="作业人" align="center"/> - <el-table-column property="type" label="作业类型" align="center"/> - <el-table-column property="level" label="作业等级" align="center"/> - <el-table-column property="applyTime" label="申请时间" align="center"/> - <el-table-column property="startTime" label="作业开始时间" align="center"/> - <el-table-column property="endTime" label="作业结束时间" align="center"/> - <el-table-column label="作业状态" align="center"> + <el-table ref="multipleTableRef" :data="applyData" style="width: 100%" height="calc(100% - 100px)" :header-cell-style="{ background: '#fafafa' }"> + <el-table-column property="workPermitNo" label="作业证编号" width="180" align="center"/> + <el-table-column property="depName" label="部门" align="center"/> + <el-table-column property="applyUname" label="申请人" align="center"/> + <el-table-column property="operators" label="作业人" align="center"/> + <el-table-column property="workTypeDesc" label="作业类型" align="center"/> + <el-table-column property="workLevelDesc" label="作业等级" align="center"/> + <el-table-column property="applyTime" label="申请时间" width="180" align="center"/> + <el-table-column property="startTime" label="作业开始时间" width="180" align="center"/> + <el-table-column property="endTime" label="作业结束时间" width="180" align="center"/> + <el-table-column label="作业状态" align="center" width="180"> <template #default="scope"> - <el-tag>{{ scope.row.status==0?'进行中':scope.row.status==1?'作业中止':scope.row.status==2?'作业结束验收': '作业完成'}}</el-tag> + <el-tag :type="scope.row.status==2?'success':(scope.row.status==8||scope.row.status==9)?'warning':'danger'">{{ scope.row.statusDesc }}</el-tag> </template> </el-table-column> - <el-table-column property="reason" label="中止原因" align="center"/> - <el-table-column label="安全预警" align="center"> + <el-table-column property="stopReason" label="中止原因" align="center"/> + <el-table-column label="安全预警" align="center" width="180"> <template #default="scope"> - <el-tag :type="scope.row.warning==0?'success':(scope.row.warning==1||scope.row.warning==2)?'warning':'danger'">{{ scope.row.warning==0?'正常':'报警' }}</el-tag> + <el-tag :type="scope.row.saftyWarning==0?'success':(scope.row.saftyWarning==1||scope.row.saftyWarning==2)?'warning':'danger'">{{ scope.row.saftyWarning==0?'正常':'报警' }}</el-tag> </template> </el-table-column> - <el-table-column property="message" label="报警信息" align="center"> - <template #default="scope"> - <el-button type="text" size="small" v-if="scope.row.message == 1">查看</el-button> - <span v-else>无</span> - </template> - </el-table-column> <el-table-column fixed="right" label="操作" align="center" width="250"> <template #default="scope"> - <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看作业票</el-button> - <el-button link type="primary" size="small" :icon="FolderChecked" @click="handleReview(scope.row)">验收</el-button> - <el-button link type="primary" size="small" :icon="VideoPlay" @click="openVideo(scope.row)">查看实时监控</el-button> + <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button> + <el-button link type="primary" size="small" :icon="FolderChecked" @click="handleReview(scope.row)">验收</el-button> </template> </el-table-column> </el-table> @@ -254,7 +143,6 @@ </span> </template> </el-dialog> - <video-detail ref="videoRef"></video-detail> </div> </template> @@ -265,22 +153,18 @@ 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, VideoPlay } from '@element-plus/icons-vue'; +import { Edit, View, Plus, Delete, Refresh, Search, Finished, Download, FolderChecked } from '@element-plus/icons-vue'; import { ElTable, ElMessage } from 'element-plus'; -import { specialIndexApi } from '/@/api/specialWorkSystem/specialIndex'; 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"; -import VideoDetail from "/@/views/specialWorkSystem/specialIndex/components/videoDetail.vue"; // 定义接口来定义对象的类型 interface stateType { - workData: Array<any>; + applyData: Array<string>; workTimeList: Array<string>; multipleSelection: Array<any>; casProps: {}; @@ -292,26 +176,16 @@ chosenIndex: null | number; searchWord: number | null; searchStatus: number | null; - chartSearch1: object; - chartSearch2: object; - chartSearch3: object; - chartSearch4: object; - searchDep2: number | null; searchDep: number | null; searchDate: Array<any>, totalSize1: number; details: {}; workType: Array<type>; - workType1: Array<type>; dialogType: number | null; departmentList: Array<any>; departmentRecursionList: Array<DepartmentState>; workStatus: Array<status>; - reviewForm: object; - reviewRules: object; - warningData: Array<any>; - isFull:boolean; - themeColor:string + reviewForm: object } interface type { id: number; @@ -333,7 +207,6 @@ export default defineComponent({ name: 'specialIndex', components: { - VideoDetail, fire: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/wdsq/components/fireLog.vue')), space: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/wdsq/components/spaceLog.vue')), hoist: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/wdsq/components/hoistLog.vue')), @@ -348,10 +221,6 @@ const { userInfos } = storeToRefs(userInfo); const router = useRouter(); const reviewFormRef = ref<FormInstance>() - const zyfb = ref("eChartZyfb" + Date.now() + Math.random()) - const slfx = ref("eChartSlfx" + Date.now() + Math.random()) - const zyqs = ref("eChartZyqs" + Date.now() + Math.random()) - const videoRef = ref(); const state = reactive<stateType>({ pageIndex1: 1, pageSize1: 10, @@ -363,104 +232,9 @@ chosenIndex: null, searchWord: null, searchStatus: null, - chartSearch1: { - searchDep: null, - startTime: '2023-03-08', - endTime: '2023-02-08', - period: 'month' - }, - chartSearch2: { - searchDep: null, - type: 0 - }, - chartSearch3: { - searchDep: null - }, - chartSearch4: { - searchDep: null - }, - searchDep2: null, searchDep: null, searchDate: [], - workData: [ - { - num: '111', - dep: '部门1', - applyer: '张凤', - worker: '李羽飞', - type: '动火作业', - level: '一级', - applyTime: '2023-03-08', - startTime: '2023-03-08', - endTime: '2023-03-08', - status: 0, - reason: '分析超时', - warning: 0, - message: 1 - }, - { - num: '222', - dep: '部门2', - applyer: '张凤', - worker: '李羽飞', - type: '动土作业', - level: '一级', - applyTime: '2023-03-08', - startTime: '2023-03-08', - endTime: '2023-03-08', - status: 1, - reason: '分析超时', - warning: 1, - message: 0 - }, - { - num: '333', - dep: '部门3', - applyer: '张凤', - worker: '李羽飞', - type: '动火作业', - level: '一级', - applyTime: '2023-03-08', - startTime: '2023-03-08', - endTime: '2023-03-08', - status: 2, - reason: '分析超时', - warning: 2, - message: 0 - }, - { - num: '222', - dep: '部门2', - applyer: '张凤', - worker: '李羽飞', - type: '动土作业', - level: '一级', - applyTime: '2023-03-08', - startTime: '2023-03-08', - endTime: '2023-03-08', - status: 1, - reason: '分析超时', - warning: 1, - message: 0 - }, - { - num: '333', - dep: '部门3', - applyer: '张凤', - worker: '李羽飞', - type: '动火作业', - level: '一级', - applyTime: '2023-03-08', - startTime: '2023-03-08', - endTime: '2023-03-08', - status: 2, - reason: '分析超时', - warning: 2, - message: 0 - } - ], - isFull: false, - themeColor: '#333', + applyData: [], workTimeList: [], multipleSelection: [], approveInfo: { @@ -476,17 +250,6 @@ }, 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: '受限空间作业' }, @@ -515,219 +278,14 @@ value: 3 } ], - warningData: [ - { - name: '黄公子', - dep: '有机事业部', - warning: 69, - role: '作业人', - isCard: 1 - }, - { - name: '李飞飞', - dep: '有机事业部', - warning: 51, - role: '监护人', - isCard: 0 - }, - { - name: '黄公子', - dep: '有机事业部', - warning: 69, - role: '作业人', - isCard: 1 - } - ], reviewForm: { advice: '' - }, - reviewRules:{ - advice: [{ required: true, message: '请填写验收意见', trigger: 'blur' }] } }); - // 页面载入时执行方法 - onMounted(() => { - getListByPage(); - getAllDepartment(); - initZyfb() - initSlfx() - initZyqs() - }); - const toFullscreen =()=>{ - 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' - } - initZyfb() - initSlfx() - initZyqs() - } - const getTypePie = async ()=>{ - let res = await specialIndexApi().analyseType(state.chartSearch1.startTime,state.chartSearch1.endTime,state.chartSearch1.searchDep); - if (res.data.code === '200') { - console.log(res.data,'666666666') - } else { - ElMessage({ - type: 'warning', - message: res.data.msg - }); - } - } - type EChartsOption = echarts.EChartsOption - const initZyfb =()=>{ - let dom = document.getElementById(zyfb.value); - let myChart = echarts.init(dom); - let option: EChartsOption; - option = { - tooltip: { - trigger: 'item' - }, - legend: { - orient: 'vertical', - left: 'left', - top: 'center', - textStyle: { - // 设置默认的文字颜色 - color: state.themeColor, - fontSize: 12 - }, - itemStyle: { - borderWidth: 0 // 设置图例边框宽度为0 - } - }, - series: [ - { - name: 'Access From', - type: 'pie', - radius: ['40%', '70%'], - 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: 1048, name: '动火作业' }, - { value: 735, name: '受限空间作业' }, - { value: 580, name: '吊装作业' }, - { value: 484, name: '动土作业' }, - { value: 735, name: '断路作业' }, - { value: 580, name: '高处作业' }, - { value: 484, name: '临时用电作业' }, - { value: 300, name: '盲板抽堵作业' } - ] - } - ] - } - option && myChart.setOption(option); - window.addEventListener("resize",function (){ - myChart.resize(); - }); - } - const initSlfx =()=>{ - let dom = document.getElementById(slfx.value); - let myChart = echarts.init(dom); - let option: EChartsOption; - option = { - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow' - } - }, - grid: { - left: '3%', - right: '4%', - bottom: '3%', - containLabel: true - }, - xAxis: [ - { - type: 'category', - data: ['事业部1', '事业部2', '事业部3', '事业部4', '事业部5', '事业部6', '事业部7'], - axisTick: { - alignWithLabel: true - }, - axisLabel: { - color: state.themeColor - } - } - ], - yAxis: [ - { - type: 'value' - } - ], - series: [ - { - name: 'Direct', - type: 'bar', - barWidth: '60%', - data: [10, 52, 200, 334, 390, 330, 220] - } - ] - } - - option && myChart.setOption(option); - window.addEventListener("resize",function (){ - myChart.resize(); - }); - } - const initZyqs =()=>{ - let dom = document.getElementById(zyqs.value); - let myChart = echarts.init(dom); - let option: EChartsOption; - option = { - xAxis: { - type: 'category', - data: ['四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月', '一月', '二月', '三月'], - axisLabel: { - color: state.themeColor - } - }, - yAxis: { - type: 'value' - }, - grid: { - top: '8%', - bottom: '8%' - }, - series: [ - { - data: [150, 230, 224, 218, 135, 147, 230, 224, 218, 135, 147, 260], - type: 'line' - } - ] - } - - option && myChart.setOption(option); - window.addEventListener("resize",function (){ - myChart.resize(); - }); - } + const reviewRules = reactive<FormRules>({ + advice: [{ required: true, message: '请填写验收意见', trigger: 'blur' }] + }) // 刷新 const reLoadData = async () => { getListByPage(); @@ -761,8 +319,8 @@ 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.workData = JSON.parse(JSON.stringify(res.data.data)); - state.workData = state.workData.map((item) => { + state.applyData = JSON.parse(JSON.stringify(res.data.data)); + state.applyData = state.applyData.map((item) => { if (item.operators == null || item.operators == []) { item.operators = []; } else { @@ -867,9 +425,7 @@ const handleReview = (row)=>{ state.dialogReview = true } - const openVideo = ()=>{ - videoRef.value.openDialog() - } + const submitReview = async (formEl: FormInstance | undefined) => { if (!formEl) return await formEl.validate((valid, fields) => { @@ -888,6 +444,12 @@ await initBackEndControlRoutes(); }; + // 页面载入时执行方法 + onMounted(() => { + getListByPage(); + getAllDepartment() + }); + return { View, Edit, @@ -897,15 +459,9 @@ Finished, Download, FolderChecked, - VideoPlay, reviewFormRef, - videoRef, - zyfb, - slfx, - zyqs, - toFullscreen, + reviewRules, handleReview, - openVideo, submitReview, reLoadData, toApply, @@ -926,25 +482,8 @@ $homeNavLengh: 8; .home-container { height: calc(100vh - 144px); - position: relative; box-sizing: border-box; overflow: hidden; - overflow-y: scroll; - scrollbar-width: none; /* firefox */ - -ms-overflow-style: none; /* IE 10+ */ - - &::-webkit-scrollbar { - display: none; /* Chrome Safari */ - } - .full{ - position:fixed; - height: 34px; - line-height: 34px; - top: 80px; - right: 20px; - z-index: 99999; - } - .demo-tabs { width: 100%; height: 100%; @@ -956,145 +495,6 @@ .el-tab-pane { height: 100%; } - } - .topChart{ - width: 100%; - display: flex; - justify-content: space-between; - align-items: flex-start; - margin-bottom: 20px; - height: 40%; - &:last-of-type{ - margin-bottom: 0; - } - - .chart-item{ - width: calc(50% - 10px); - height: 100%; - margin-right: 10px; - 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: 1.33rem; - 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; - } - } - - } - .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: 25% !important; - td{ - height: 25% !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-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; - } - } - } } .homeCard { width: 100%; @@ -1117,12 +517,12 @@ .top-info { display: flex; - font-size: 14px; + font-size: 16px; font-weight: bolder; align-items: center; - padding: 4px 10px; + padding: 6px 10px; background: #ffeb87; - border-radius: 2px; + border-radius: 4px; border: 1px solid #ffae00; margin-right: 20px; @@ -1130,7 +530,7 @@ vertical-align: middle; white-space: nowrap; span { - font-size: 18px; + font-size: 22px; color: #f3001e; margin: 0 2px; cursor: pointer; @@ -1155,6 +555,9 @@ margin-bottom: 16px; } } + } + &:last-of-type { + height: calc(100% - 100px); } } .stepItem { @@ -1359,7 +762,7 @@ .el-row { display: flex; align-items: center; - margin-bottom: 10px; + margin-bottom: 20px; &:last-child { margin-bottom: 0; } @@ -1381,199 +784,6 @@ } } } -} - -.container{ - padding: 20px; - background: url('../../../assets/spwbg.png') no-repeat center; - - .full{ - position:fixed; - background: #fff; - border-radius: 17px; - box-shadow: 3px 3px 12px rgba(0,0,0,.2); - height: 34px; - line-height: 34px; - top: 0; - right: 20px; - 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); - position: relative; - z-index: 2; - &:last-of-type{ - position: relative; - z-index: 1; - } - .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; - } - } - } - } - .homeCard{ - border-radius: 4px; - background: rgba(8, 109, 209, 0.2); - border: 1px solid rgba(54, 252, 252, .6); - backdrop-filter: blur(5px); - position: relative; - z-index: 3; - .el-row{ - &>div{ - &>span{ - color: #11FEEE; - } - } - } - :deep(.el-range-separator){ - color: #11FEEE; - } - .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-table-fixed-column--right{ - background-color: #092846 !important - } - } - } - - ::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; - } - } - } } .el-card { border: 0; -- Gitblit v1.9.2