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