From 1b9fea7d4af68d8f933b2dc42bf6084b9646f64c Mon Sep 17 00:00:00 2001 From: 马宇豪 <978517621@qq.com> Date: 星期二, 04 三月 2025 08:39:55 +0800 Subject: [PATCH] 修改作业等级名称 --- src/views/intellectInspect/inspectIndex/index.vue | 1038 +++++++++++++++++++++++++++++++++++++++++---------------- 1 files changed, 748 insertions(+), 290 deletions(-) diff --git a/src/views/intellectInspect/inspectIndex/index.vue b/src/views/intellectInspect/inspectIndex/index.vue index 41c9c8e..b9a2fd9 100644 --- a/src/views/intellectInspect/inspectIndex/index.vue +++ b/src/views/intellectInspect/inspectIndex/index.vue @@ -1,53 +1,194 @@ <template> <div class="home-container"> + <div class="full"> + <el-button type="text" style="height: 34px" @click="toFullscreen"> + <el-icon style="vertical-align: middle"> + <FullScreen /> + </el-icon> + <span style="vertical-align: middle">全屏</span> + </el-button> + </div> <div style="height: 100%"> - <div class="homeCard topCard"> - <div class="title">当前巡检任务</div> - <div class="top-info" v-if="unchecked != 0 || unusual != 0"> - <el-icon :size="18" color="#F3001E" style="margin-right: 4px"><BellFilled /></el-icon> - 预警消息: - <div v-if="unchecked != 0"> - 当日超期未巡检任务<span @click="toOverTime(4)">{{ unchecked }}</span - >个 - </div> - <span v-if="unchecked != 0 && unusual != 0">,</span> - <div v-if="unusual != 0"> - 存在异常任务<span @click="toUnusual(1)">{{ unusual }}</span - >个 - </div> - 。 + <div class="topChart"> + <div class="chart-item"> + <div class="chart-tit"> + <span class="tit">年度巡检异常趋势</span> + <div class="filter-part"> + <el-cascader v-model="searchDepId" :options="depList" :props="casProps" :show-all-levels="false" size="small"/> </div> + </div> + <div class="chart" :id="xjLine"></div> </div> - <div class="homeCard"> - <div class="main-card"> - <div class="list"> - <div class="cardTop" v-for="(item, index) in tableData" :key="index"> - <div class="left-info"> - <span class="num">{{ pageSize * (pageIndex - 1) + index + 1 }}、</span> - <span class="place">{{ item.taskName }},</span> - <p v-if="item.execUserName == null">该任务暂无人认领</p> - <p v-else> - <span class="time">{{ item.taskStatus == 2 ? item.startTime : item.endTime }}</span - >由<span class="name">{{ item.execUserName }}</span - >进行的巡检任务 - </p> - </div> - <div class="mid-info"> - 任务状态:<span :class="item.taskStatus == 1 ? 'grey' : item.taskStatus == 2 ? 'green' : item.taskStatus == 3 ? 'blue' : 'red'">{{ item.taskStatus == 1 ? '待巡检' : item.taskStatus == 2 ? '巡检中' : item.taskStatus == 3 ? '已巡检' : '超期未巡检' }}</span> - </div> - <div class="right-info"> - <div v-if="item.taskStatus == 2" @click="toLine(item)" class="checkBtn">查看实时巡检</div> - <div v-else class="reviewBtn" @click="toDetails('查看', item)">[查看巡检记录]</div> - </div> + <div class="chart-item"> + <div class="chart-tit"> + <span class="tit">异常区域设备统计</span> + <div class="filter-part2"> + <el-switch + v-model="searchQuery.regionType" + inline-prompt + style="--el-switch-on-color: #13ce66; --el-switch-off-color: #13ce66" + active-text="区域" + inactive-text="设备" + :active-value="2" + :inactive-value="3" + /> + </div> + </div> + <div class="chart" :id="sbtj"></div> + <el-radio-group v-model="searchQuery.timeType" size="small"> + <el-radio border :label="1">近7天</el-radio> + <el-radio border :label="2">近30天</el-radio> + <el-radio border :label="3">近90天</el-radio> + <el-radio border :label="4">近一年</el-radio> + </el-radio-group> + </div> + </div> + <div class="midChart"> + <div class="chart-item"> + <div class="chart-tit"> + <div style="display: flex;align-items: center"> + <span class="tit">当前巡检任务</span> + <div class="top-info" v-if="unchecked != 0 || unusual != 0"> + <el-icon :size="18" color="#F3001E" style="margin-right: 4px"><BellFilled /></el-icon> + <div>预警消息:</div> + <div v-if="unchecked != 0"> + 当日超期未巡检任务<el-tooltip + class="box-item" + effect="light" + content="查看相关记录" + placement="bottom-start" + ><span @click="toOverTime(4)">{{ unchecked }}</span></el-tooltip>个 + </div> + <span v-if="unchecked != 0 && unusual != 0">,</span> + <div v-if="unusual != 0"> + 存在异常任务<el-tooltip + class="box-item" + effect="light" + content="查看相关记录" + placement="bottom-start" + ><span @click="toOverTime(5)">{{ unusual }}</span + ></el-tooltip>个 + </div> + 。 + </div> + </div> + <div class="checkAll" @click="checkAllRecord()"> + 全部记录>> + </div> + </div> + <div class="chart"> + <el-table :data="tableData" stripe border :header-cell-style="{ background: '#fafafa' }"> + <el-table-column label="任务信息" align="center"> + <template #default="scope"> + <div class="left-info"> + <span>{{ scope.row.taskName }},</span> + <p v-if="scope.row.execUserName == null">该任务暂无人认领</p> + <p v-else> + <span class="time">{{ scope.row.taskStatus == 2 ? scope.row.startTime : scope.row.endTime }}</span>由<span class="name">{{ scope.row.execUserName }}</span>进行的巡检任务 + </p> </div> - </div> - <div class="pageBtn"> - <el-pagination v-model:currentPage="pageIndex" v-model:page-size="pageSize" :page-sizes="[10, 15]" small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" /> - </div> + </template> + </el-table-column> + <el-table-column prop="taskStatus" label="任务状态" align="center" width="180"> + <template #default="scope"> + <span :class="scope.row.taskStatus == 1 ? 'grey' : scope.row.taskStatus == 2 ? 'green' : scope.row.taskStatus == 3 ? 'blue' : 'red'">{{ scope.row.taskStatus == 1 ? '待巡检' : scope.row.taskStatus == 2 ? '巡检中' : scope.row.taskStatus == 3 ? '已巡检' : '超期未巡检' }}</span> + </template> + </el-table-column> + <el-table-column label="操作" align="center" width="180"> + <template #default="scope"> + <el-button type="text" size="small" v-if="scope.row.taskStatus == 2" @click="toLine(scope.row)" class="checkBtn">查看实时巡检</el-button> + <el-button type="text" size="small" v-else class="reviewBtn" @click="toDetails('查看', scope.row)">查看巡检记录</el-button> + </template> + </el-table-column> + </el-table> </div> + </div> </div> + <div class="midChart"> + <div class="chart-item"> + <div class="chart-tit"> + <span class="tit">巡检异常清单</span> + <div class="checkAll" @click="checkAllList()"> + 全部记录>> + </div> + </div> + <div class="chart"> + <el-table :data="unusualData" stripe border :header-cell-style="{ background: '#fafafa' }"> + <el-table-column prop="workOrderNum" label="工单编号" align="center"/> + <el-table-column prop="pointCode" label="异常巡检点" align="center"/> + <el-table-column prop="occurrenceTime" label="巡检(发现)时间" align="center"/> + <el-table-column prop="taskName" label="所属巡检任务" align="center"/> + <el-table-column prop="regionName" label="设备/区域名称" align="center"/> + <el-table-column prop="refer" label="正常参考值" align="center"> + <template #default="scope"> + <span>{{scope.row.dataReportType==1?(scope.row.firstReferenceValue==0?'正常':'异常'):scope.row.dataReportType==2?((scope.row.secondReferenceSignscope==1?'>':'>=') + scope.row.secondReferenceValue + ',' + (scope.row.thirdReferenceSign==3?'<':'<=') + scope.row.thirdReferenceValue): ((scope.row.firstReferenceValue==0?'正常':'异常') + ',' + ((scope.row.secondReferenceSignscope==1?'>':'>=') + scope.row.secondReferenceValue + ',' + (scope.row.thirdReferenceSign==3?'<':'<=') + scope.row.thirdReferenceValue))}}</span> + </template> + </el-table-column> + <el-table-column label="实际巡检值" align="center"> + <template #default="scope"> + <span>{{scope.row.dataReportType==1?(scope.row.firstReferenceResult==0?'正常':'异常'):scope.row.dataReportType==2?scope.row.secondReferenceResult:(scope.row.firstReferenceResult==0?'正常':'异常') + ',' + scope.row.secondReferenceResult}}</span> + </template> + </el-table-column> + <el-table-column prop="hiddenDangerHandlerName" label="隐患处置人" align="center"/> + <el-table-column prop="hiddenDangerHandlerPhone" label="电话" align="center"/> + <el-table-column prop="handlerStatus" label="处置状态" align="center"> + <template #default="scope"> + <el-tag size="small" :type="scope.row.handlerStatus == 2?'danger':(scope.row.handlerStatus == 1 || scope.row.handlerStatus == 3)?'':'success'">{{scope.row.handlerStatus == 1?'待响应':scope.row.handlerStatus == 2?'标记误报':scope.row.handlerStatus == 3?'自查处理中':scope.row.handlerStatus == 4?'已移交上报':scope.row.handlerStatus == 5?'待验收':'已完成'}}</el-tag> + </template> + </el-table-column> + <el-table-column prop="handlerDesc" label="处置描述反馈" align="center"/> + <el-table-column label="操作" align="center" width="180" fixed="right"> + <template #default="scope"> + <el-button v-if="scope.row.handlerStatus == 5" type="text" size="small" class="checkBtn" @click="acceptance(scope.row)">验收</el-button> + <el-button v-if="scope.row.handlerStatus !==1 && scope.row.handlerStatus !==2" type="text" size="small" class="reviewBtn" @click="openPhoto(scope.row)">查看现场照片</el-button> + <el-button v-if="scope.row.handlerStatus ==1" type="text" size="small" @click="remark(scope.row)">标记误报</el-button> + <span v-if="scope.row.handlerStatus == 2" style="color: red">标记误报</span> + </template> + </el-table-column> + </el-table> +<!-- <div class="pageBtn">--> +<!-- <el-pagination v-model:currentPage="pageIndex" v-model:page-size="pageSize" :page-sizes="[10, 15]" small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" />--> +<!-- </div>--> + </div> + </div> + </div> </div> + <el-dialog + v-model="dialogVisible" + :title= '"工单编号:" + workNum' + width="60%" + :before-close="handleClose" + center + > + <div style="margin-bottom: 20px"> + <div style="margin-bottom: 10px">处置前:</div> + <div v-if="beImgs && beImgs.length>0"> + <el-image v-for="(item,index) in beImgs" :key="index" style="width: 200px; height: 200px;margin-right: 10px" :src="item" fit="fill" /> + </div> + <div v-else> + 无照片信息 + </div> + </div> + <div> + <div style="margin-bottom: 10px">处置后</div> + <div v-if="afImgs && beImgs.length>0"> + <el-image v-for="(item,index) in afImgs" :key="index" style="width: 200px; height: 200px;margin-right: 10px" :src="item" fit="fill" /> + </div> + <div v-else> + 无照片信息 + </div> + </div> + <template #footer> + <span class="dialog-footer"> + <el-button type="primary" @click="dialogVisible = false"> + 确认 + </el-button> + </span> + </template> + </el-dialog> <inspect-record-dialog ref="inspectRecordDialogRef" @refreshInspectRecord="getInspectRecord"></inspect-record-dialog> + <inspect-list ref="inspectListRef"></inspect-list> + <unusual-list ref="unusualListRef" @refreshRecord="getListExcepOrder"></unusual-list> </div> </template> @@ -59,14 +200,22 @@ import { Session } from '/@/utils/storage'; import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue'; import { ElTable } from 'element-plus'; -import { FormInstance, FormRules, ElMessage } from 'element-plus'; +import { FormInstance, FormRules, ElMessage, ElMessageBox } from 'element-plus'; import { inspectRecordApi } from '/@/api/intellectInspectSystem/inspectRecord'; +import { inspectIndexApi } from '/@/api/intellectInspectSystem/inspectIndex' import { useRouter } from 'vue-router'; +import * as echarts from 'echarts' import inspectRecordDialog from './components/inspectRecordDialog.vue'; +import inspectList from './components/inspectList.vue'; +import unusualList from './components/unusualList.vue'; import { departmentApi } from '/@/api/systemManage/department'; +import screenfull from "screenfull"; +import { BorderBox10 as DvBorderBox10 } from '@kjgl77/datav-vue3' +import {specialIndexApi} from "/@/api/specialWorkSystem/specialIndex"; // 定义接口来定义对象的类型 interface stateType { tableData: Array<string>; + unusualData: Array<any>; unchecked: null | number; unusual: null | number; uncheckedList: []; @@ -80,6 +229,17 @@ classGroupList: Array<classGroup>; quotaList: []; inspectPointAllList: []; + searchQuery:{ + regionType:number; + timeType: number; + } + dialogVisible:boolean; + workNum: string; + beImgs: []; + afImgs: []; + searchDepId: number|null + depList: Array<any> + casProps:object } interface type { id: number; @@ -90,17 +250,27 @@ groupName: string; } export default { - name: 'workingHours', - components: { inspectRecordDialog }, + name: 'inspectIndex', + components: { inspectRecordDialog, inspectList, unusualList }, setup() { const router = useRouter(); + const xjLine = ref("eChartXjLine" + Date.now() + Math.random()) + const sbtj = ref("eChartSbtj" + Date.now() + Math.random()) const state = reactive<stateType>({ + workNum: '', + beImgs: [], + afImgs: [], pageIndex: 1, pageSize: 10, totalSize: 0, tableData: [], + unusualData: [], unchecked: null, unusual: null, + searchQuery:{ + regionType: 2, + timeType: 2, + }, uncheckedList: [], abnormalList: [], workTypeList: [ @@ -115,11 +285,40 @@ { id: 4, name: '月' }, { id: 5, name: '年' } ], + searchDepId: null, + depList: [ + { + name: '电石事业部', + depId: 49 + }, + { + name: '电力事业部', + id: 50 + }, + { + name: '有机化工事业部', + id: 48 + }, + { + name: '甲醇事业部', + id: 32 + } + ], + casProps: { + expandTrigger: 'hover', + emitPath: false, + value: 'depId', + label: 'name', + checkStrictly: true + }, classGroupList: [], quotaList: [], - inspectPointAllList: [] + inspectPointAllList: [], + dialogVisible: false }); const inspectRecordDialogRef = ref(); + const inspectListRef = ref(); + const unusualListRef = ref(); interface User { name: string; startTime: string; @@ -129,12 +328,307 @@ // 页面载入时执行方法 onMounted(() => { + // getDepartmentData(); + // getCountExcepOrder(); + // getPieCountExcepOrder(); getInspectRecord(); + getListExcepOrder(); getDayData(); - getDepartmentData(); + initXjLine() + initSbtj() }); + const toFullscreen =()=>{ + router.push({ + path: 'inspectFullScreen', + query: { - // 分页获取工作时段列表 + } + }) + } + const checkAllRecord =()=>{ + inspectListRef.value.departmentList = state.departmentList + inspectListRef.value.showInspectList() + } + const checkAllList =()=>{ + unusualListRef.value.showUnusualList() + } + const getCountExcepOrder = async ()=>{ + let res = await inspectIndexApi().getCountExcepOrder({depId: state.searchDepId}); + if (res.data.code === '200') { + console.log('折线图趋势数据>>>', res.data.data) + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + } + const getPieCountExcepOrder = async ()=>{ + let res = await inspectIndexApi().getPieCountExcepOrder(state.searchQuery); + if (res.data.code === '200') { + console.log('饼状图趋势数据>>>', res.data.data) + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + } + const acceptance =(row:object)=>{ + ElMessageBox.confirm( + '确认完成验收并结束工单?', + '完成验收', + { + confirmButtonText: '确认', + cancelButtonText: '取消', + type: 'warning', + center: true + } + ) + .then(async() => { + const res = await inspectIndexApi().acceptedStatus({id: row.id}); + if (res.data.code === '200') { + getListExcepOrder(); + ElMessage({ + type: 'success', + message: '验收成功', + }) + } else { + ElMessage({ + type: 'warning', + message: '验收失败' + }); + } + }) + .catch(() => { + ElMessage({ + type: 'info', + message: '取消验收', + }) + }) + } + const remark =(row:object)=>{ + ElMessageBox.confirm( + '确认是否标记误报?', + '标记误报', + { + confirmButtonText: '确认', + cancelButtonText: '取消', + type: 'warning', + center: true + } + ) + .then(async() => { + const res = await inspectIndexApi().falseAlarmStatus({id: row.id}); + if (res.data.code === '200') { + getListExcepOrder(); + ElMessage({ + type: 'success', + message: '标记误报成功', + }) + } else { + ElMessage({ + type: 'warning', + message: '标记误报失败' + }); + } + }) + .catch(() => { + ElMessage({ + type: 'info', + message: '取消标记', + }) + }) + } + const openPhoto = async(row)=>{ + state.dialogVisible = true + state.workNum = row.workOrderNum + const res = await inspectIndexApi().getListImages({id: row.id}); + if (res.data.code === '200') { + state.beImgs = res.data.data.beforeImages + state.afImgs = res.data.data.afterImages + } else { + ElMessage({ + type: 'warning', + message: '图片获取失败' + }); + } + } + type EChartsOption = echarts.EChartsOption + const initXjLine =()=>{ + let dom = document.getElementById(xjLine.value); + let myChart = echarts.init(dom); + + let option: EChartsOption; + + option = { + tooltip: { + trigger: 'axis' + }, + legend: { + data: ['总趋势', '事业部'], + height: '15%', + top: 0, + bottom: 0, + padding:[1,1,1,0], + textStyle: { + // 设置默认的文字颜色 + color: '#333' + }, + }, + grid: { + top: '15%', + left: '3%', + right: '3%', + bottom: 0, + containLabel: true + }, + toolbox: { + feature: { + // saveAsImage: {} + } + }, + xAxis: { + type: 'category', + boundaryGap: false, + data: ['四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月', '一月', '二月', '三月'], + axisLabel: { + color: '#333' + } + }, + yAxis: { + splitLine: { + show: true, + lineStyle: { + color: '#fafafa', + width: 1, + type: 'dashed' + } + }, + axisLabel:{ + color: '#ccc' + } + }, + series: [ + { + name: '总趋势', + type: 'line', + stack: 'Total', + data: [120, 132, 101, 134, 90, 120, 132, 101, 134, 90, 230, 210], + label:{ + show: true, + color: '#95d475', + fontSize: 12 + }, + lineStyle:{ + width: 1, + color: '#95d475' + }, + itemStyle:{ + color: '#95d475', + borderColor: '#fff', + borderWidth: 2 + } + }, + { + name: '事业部', + type: 'line', + stack: 'Total', + data: [220, 182, 191, 234, 290, 220, 182, 191, 234, 290, 330, 310], + label:{ + show: true, + color: '#337ecc', + fontSize: 12 + }, + lineStyle:{ + width: 1, + color: '#337ecc' + }, + itemStyle:{ + color: '#337ecc', + borderColor: '#fff', + borderWidth: 2 + } + } + ] + } + + option && myChart.setOption(option); + window.addEventListener("resize",function (){ + myChart.resize(); + }); + } + const initSbtj =()=>{ + let dom = document.getElementById(sbtj.value); + let myChart = echarts.init(dom); + let option: EChartsOption; + option = { + tooltip: { + trigger: 'item' + }, + legend: { + orient: 'vertical', + left: 'left', + top: 'center', + textStyle: { + // 设置默认的文字颜色 + color: '#333', + // fontSize: 12 + }, + itemStyle: { + borderWidth: 0 // 设置图例边框宽度为0 + } + }, + series: [ + { + name: 'Access From', + type: 'pie', + radius: ['40%', '70%'], + avoidLabelOverlap: false, + itemStyle: { + borderRadius: 1, + borderColor: '#fff', + borderWidth: 1 + }, + label: { + show: true, + position: 'outside', + overflow: 'truncate', + borderWidth: 0, + color: '#333' + }, + 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: '区域1' }, + { value: 735, name: '区域2' }, + { value: 580, name: '区域3' }, + { value: 484, name: '区域4' }, + { value: 735, name: '区域5' } + ] + } + ] + } + + option && myChart.setOption(option); + window.addEventListener("resize",function (){ + myChart.resize(); + }); + } + // 分页获取 const getInspectRecord = async () => { const data = { pageSize: state.pageSize, pageIndex: state.pageIndex }; let res = await inspectRecordApi().getInspectRecordByIndex(data); @@ -148,11 +642,31 @@ }); } }; + // 分页获取 + const getListExcepOrder = async () => { + const data = { pageSize: 10, pageIndex: state.pageIndex }; + let res = await inspectIndexApi().getListExcepOrderByPage(data); + if (res.data.code === '200') { + state.unusualData = JSON.parse(JSON.stringify(res.data.data.records)) + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + }; //获取部门 const getDepartmentData = async () => { let res = await departmentApi().getDepartmentList(); if (res.data.code === '200') { state.departmentList = res.data.data; + const newList = [] + for(let i of state.departmentList[0].children){ + if(i.depId == 32 || i.depId == 48 ||i.depId == 49 || i.depId == 50){ + newList.push(i) + } + } + state.depList = newList } else { ElMessage({ type: 'warning', @@ -167,9 +681,6 @@ if (res.data.code === '200') { state.unchecked = res.data.data.noCheckTaskCount; state.unusual = res.data.data.abnormalTaskCount; - state.uncheckedList = JSON.parse(JSON.stringify(res.data.data.noCheckTasks)); - console.log(state.uncheckedList, '555555555555555'); - state.abnormalList = JSON.parse(JSON.stringify(res.data.data.abnormalTasks)); } else { ElMessage({ type: 'warning', @@ -188,7 +699,9 @@ }; const toLine = (item) => { - let id = JSON.parse(JSON.stringify(item)).id; + console.log(item,'item') + let id = item.id; + console.log(id,'id') router.push({ path: 'intelligentLine', query: { @@ -199,27 +712,13 @@ const toOverTime = (id) => { console.log(state.uncheckedList, 'list'); - debugger; router.push({ path: 'inspectRecord', query: { id: id, - dataList: JSON.stringify(state.uncheckedList), - total: state.uncheckedList.length } }); }; - - // const toUnusual = (status) =>{ - // router.push({ - // path: 'inspectRecord', - // query: { - // status: status, - // dataList: state.abnormalList, - // total: state.abnormalList.length - // } - // }); - // } const toDetails = (type: string, item) => { inspectRecordDialogRef.value.showInspectRecordDialog(type, item, state.workTypeList, state.departmentList, state.timeType, state.classGroupList, state.quotaList, state.inspectPointAllList); }; @@ -228,9 +727,19 @@ Edit, Delete, Refresh, + xjLine, + sbtj, Plus, router, inspectRecordDialogRef, + inspectListRef, + unusualListRef, + toFullscreen, + checkAllRecord, + checkAllList, + acceptance, + remark, + openPhoto, toLine, toOverTime, toDetails, @@ -239,259 +748,207 @@ ...toRefs(state) }; } -}; +} </script> <style scoped lang="scss"> $homeNavLengh: 8; @media screen and (min-width: 1366px) { - .topCard { - display: flex; - align-items: center; - justify-content: space-between; - font-weight: bolder; - .top-info { - display: flex; - font-size: 16px; - align-items: center; - padding: 10px 15px; - background: #ffd057; - border-radius: 8px; - border: 1px solid #f3001e; - - & > div { - vertical-align: middle; - white-space: nowrap; - span { - font-size: 22px; - color: #f3001e; - margin: 0 4px; - cursor: pointer; - } - } - } - } - .left-info { - width: 70%; - display: flex; - align-items: center; - justify-content: left; - font-size: 18px; - color: #333; - overflow-x: auto; - & > span { - white-space: nowrap; - } - p { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - & > span { - white-space: nowrap; - } - } - } - .mid-info { - width: 20%; - font-size: 18px; - color: #333; - } - .right-info { - width: 10%; - display: flex; - justify-content: right; - align-items: center; - font-size: 16px; - color: #fff; - - div { - white-space: nowrap; - } - } } @media screen and (min-width: 1200px) and (max-width: 1366px) { - .left-info { - width: 70%; - display: flex; - align-items: center; - justify-content: left; - font-size: 15px; - color: #333; - overflow-x: auto; - & > span { - white-space: nowrap; - } - p { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - & > span { - white-space: nowrap; - } - } - } - .mid-info { - width: 20%; - font-size: 15px; - color: #333; - } - .right-info { - width: 10%; - display: flex; - justify-content: right; - align-items: center; - font-size: 13px; - color: #fff; - div { - white-space: nowrap; - } - } + } @media screen and (max-width: 1200px) { - .left-info { - width: 70%; - display: flex; - align-items: center; - justify-content: left; - font-size: 12px; - color: #333; - overflow-x: auto; - & > span { - white-space: nowrap; - } - p { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - & > span { - white-space: nowrap; - } - } - } - .mid-info { - width: 20%; - font-size: 12px; - color: #333; - } - .right-info { - width: 10%; - display: flex; - justify-content: right; - align-items: center; - font-size: 12px; - color: #fff; - div { - white-space: nowrap; - } - } + } .home-container { height: calc(100vh - 144px); box-sizing: border-box; overflow: hidden; - .homeCard { - width: 100%; - padding: 20px; - box-sizing: border-box; - background: #fff; - border-radius: 4px; + overflow-y: scroll; + .full{ + position:fixed; + height: 34px; + line-height: 34px; + top: 80px; + right: 20px; + z-index: 9; + } + .topChart{ + width: 100%; + height: 300px; + display: flex; + justify-content: space-between; + align-items: flex-start; + margin-bottom: 20px; + &:last-of-type{ + margin-bottom: 0; + } - .title { + .chart-item{ + width: calc(60% - 20px); + height: 100%; + margin-right: 20px; + position: relative; + background: #fff; + padding: 20px; + + &:last-of-type{ + width: 40%; + margin-right: 0; + } + + .chart-tit{ + width: 100%; + display: flex; + align-items: flex-start; + justify-content: space-between; + .tit{ + font-size: 1.33rem; + font-weight: bolder; + } + .filter-part{ + display: flex; + align-items: center; + justify-content: right; + :deep(.el-cascader){ + width: 100% !important; + } + .el-switch{ + width: 100% !important; + :deep(.el-switch__core){ + width: 100% !important; + } + } + + } + .filter-part2{ + display: flex; + align-items: center; + justify-content: right; + width: 20%; + .el-switch{ + width: 100% !important; + :deep(.el-switch__core){ + width: 100% !important; + } + } + } + } + .chart{ + width: 100%; + height: 88%; + } + .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; + } + } + } + } + .midChart{ + width: 100%; + background: #fff; + display: flex; + justify-content: space-between; + align-items: flex-start; + margin-bottom: 20px; + padding: 20px; + + .chart-item{ + width: 100%; + height: 100%; + padding: 0 0 20px; + + .chart-tit{ + width: 100%; + height: 15%; + display: flex; + align-items: center; + justify-content: space-between; + .tit{ font-size: 20px; font-weight: bolder; - } - .main-card { - width: 100%; - height: 100%; - .cardTop { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 10px; - background: #daf3ff; - padding: 10px 15px; - border-radius: 8px; + } + .top-info { + display: flex; + font-size: 14px; + align-items: center; + background: #ffeb87; + padding: 4px 10px; + margin-left: 20px; + border-radius: 2px; + border: 1px solid #ffae00; + & > div { + vertical-align: middle; + white-space: nowrap; + height: 100%; + span { + color: #f3001e; + margin: 0 4px; + font-size: 18px; + cursor: pointer; + font-weight: bolder; - .left-info { - .num { - font-weight: bolder; - margin-right: 10px; - } - .place { - font-weight: bolder; - } - .time { - font-weight: bolder; - margin-right: 5px; - } - .name { - font-weight: bolder; - margin: 0 5px; - font-weight: bolder; - } + &:hover{ + text-decoration: underline; } - .mid-info { - span { - font-weight: bolder; - } - - .grey { - color: #999; - } - .green { - color: #44b100; - } - .blue { - color: #409eff; - } - .red { - color: red; - } - } - .right-info { - .checkBtn { - padding: 10px 15px; - background: #409eff; - border-radius: 4px; - cursor: pointer; - } - - .reviewBtn { - margin: 10px 15px; - cursor: pointer; - color: #44b100; - } - } + } } - .list { - height: calc(100% - 60px); - overflow-y: auto; + } + .checkAll{ + cursor: pointer; + &:hover{ + color: #409eff } - .pageBtn { - position: absolute; - bottom: 15px; - right: 20px; - height: 60px; - display: flex; - align-items: center; - justify-content: right; + } + } + .chart{ + width: 100%; + height: 85%; + margin-top: 10px; + .left-info{ + display: flex; + align-items: center; + } + .pageBtn { + position: absolute; + bottom: 15px; + right: 20px; + height: 60px; + display: flex; + align-items: center; + justify-content: right; - .demo-pagination-block + .demo-pagination-block { - margin-top: 10px; - } - .demo-pagination-block .demonstration { - margin-bottom: 16px; - } + .demo-pagination-block + .demo-pagination-block { + margin-top: 10px; } + .demo-pagination-block .demonstration { + margin-bottom: 16px; + } + } } - &:last-of-type { - position: relative; - padding-top: 0; - height: calc(100% - 60px); - } + } } + .el-row { display: flex; align-items: center; @@ -505,6 +962,7 @@ } } } + .el-input { width: 100% !important; } -- Gitblit v1.9.2