修改作业等级名称

马宇豪

2025-03-04 1b9fea7d4af68d8f933b2dc42bf6084b9646f64c

 src/views/intellectInspect/inspectIndex/index.vue

@@ -1,62 +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">
          <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="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">
                          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 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>

@@ -68,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: [];
@@ -89,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;
@@ -99,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: [
@@ -124,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;
@@ -138,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);
@@ -157,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',
@@ -222,9 +727,19 @@
            Edit,
            Delete,
            Refresh,
            xjLine,
            sbtj,
            Plus,
            router,
            inspectRecordDialogRef,
            inspectListRef,
            unusualListRef,
            toFullscreen,
            checkAllRecord,
            checkAllList,
            acceptance,
            remark,
            openPhoto,
            toLine,
            toOverTime,
            toDetails,
@@ -233,325 +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: #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;
    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;
@@ -565,6 +962,7 @@
        }
    }
}

.el-input {
    width: 100% !important;
}