SmartSubstationPlatform/riis-web/src/views/task/patrolmonitor/index.vue

<script lang="ts">
export default {
  name: "patrolmonitor", // 巡视监控(日历)主页面
};
</script>
<script setup lang="ts">
import Page from '@/components/Pagination/page.vue'
import { ref, onMounted, onBeforeUnmount, nextTick } from "vue";
import { ElMessage } from "element-plus";
import { getdata, getTask, operate } from "@/api/patrolmonitor";
import { useUserStore } from '@/store/modules/user';
import { useRouter } from 'vue-router';
import { stationOnline } from '@/api/substation';
import PatrolDetails from '@/views/task/patrolDetails/index.vue';
import Eldialog from '@/components/seccmsdialog/eldialog.vue';
import PatrolmonitorMonth from '@/views/task/patrolmonitorMonth/index.vue';


const router = useRouter();
const userStore = useUserStore();
const calendar = ref()
const selectDate = (val: string) => {
  calendar.value.selectDate(val)
}
const isPatrolDetails:any =ref(true)
//日历点击事件
function clickDay(row: any) {
  info.value.startDate = row.day;
  info.value.endDate = row.day;
  if (row.day == today.value) {
    getData(1, true)
  } else {
    info.value.current = 1;
    getData(0, true)
  }

}
//获取当前日期
const currentdate = ref()
const today = ref()
let endTime = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1);
const startTime = new Date(new Date(new Date().toLocaleDateString()).getTime());
function getNowFormatDate() {
  var date = new Date();
  var seperator1 = "-";
  var year = date.getFullYear();
  var month: any = date.getMonth() + 1;
  var strDate: any = date.getDate();
  if (month >= 1 && month <= 9) {
    month = "0" + month;
  }
  if (strDate >= 0 && strDate <= 9) {
    strDate = "0" + strDate;
  }
  var hour = date.getHours(); //小时数（0到23）
  var minute = date.getMinutes(); //分钟数（0到59）
  var second = date.getSeconds(); //秒数（0到59）
  today.value = year + seperator1 + month + seperator1 + strDate
  currentdate.value = year + seperator1 + month + seperator1 + strDate + " " + hour + ":" + minute + ":" + second;
  info.value.currentDate = today.value;
  info.value.startDate = today.value;
  info.value.endDate = today.value;
}
//控制行变色
const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: any
  rowIndex: number
}) => {
  if (row.lastItem == 'Now') {
    return 'lastItem-row'
  } else if (rowIndex % 2 === 0) {
    // return 'warning-row'
  } else if (rowIndex % 2 === 1) {
    // return 'success-row'
  }
  return ''
}

//获取表格数据
//表格所需参数
const info: any = ref({
  size: 10,
  current: 1,
  stationCode: userStore.stationCode,
  startDate: '',
  endDate: '',
})
const stateData = ref([
  {
    id:'1',
    name:'已完成',
  },
  { id:'2',
    name:' 执行中',
  },
  {  id:'0',
    name:'待执行',
  },
  {  id:'5',
    name:'未执行',
  },
  {  id:'6',
    name:'超期执行',
  },
  {  id:'3',
    name:'暂停',
  },
  {  id:'4',
    name:'终止',
  },
])
const taskState = ref()
const total = ref()
const tableloading = ref(false)
//表格数据
const tableData: any = ref([])
//日历统计数据
const statistics: any = ref({})
const taskName = ref('')
function getData(val: any, loading: any) {
  console.log(userStore)
  if (info.value.startDate != '' && info.value.endDate != '') {
    var startDate = new Date(info.value.startDate);
    var endDate = new Date(info.value.endDate);
    if (startDate > endDate) {
      ElMessage({
        type: "warning",
        message: "开始时间不能大于结束时间",
      });
      return false
    }
  }
  if ((info.value.startDate != '' && info.value.endDate == '') || (info.value.startDate == '' && info.value.endDate != '')) {
    ElMessage({
      type: "warning",
      message: "开始时间或结束时间不能为空",
    });
    return false
  }
  tableloading.value = true
  info.value['status'] = val
  info.value['taskName '] = taskName.value
  info.value['taskState '] = taskState.value
  getdata(info.value).then((res: any) => {
    // getNowFormatDate()
    const flag = ref(false)
    tableloading.value = false
    tableData.value = res.data.mapPage.records
    info.value.size = res.data.mapPage.size
    info.value.current = res.data.mapPage.current
    total.value = res.data.mapPage.total
    let result = res.data.mapPage.records.some((item: any) => item.taskState == 2)

    if (res.data.mapPage.records.length > 0) {
      for (var i = 0; i < res.data.mapPage.records.length; i++) {
        if (result) {
          if (new Date(res.data.mapPage.records[i].planStartTime) > new Date(startTime) && new Date(res.data.mapPage.records[i].planStartTime) < new Date(endTime) && res.data.mapPage.records[i].taskState == 2 && info.value.current == res.data.page) {
            res.data.mapPage.records[i].lastItem = 'Now'
            flag.value = true
            if (flag.value) {
              break;
            }
          }
        } else {
          if (new Date(res.data.mapPage.records[i].planStartTime) > new Date(currentdate.value) && new Date(res.data.mapPage.records[i].planStartTime) < new Date(endTime) && res.data.mapPage.records[i].taskState == 0 && info.value.current == res.data.page) {
            res.data.mapPage.records[i].lastItem = 'Now'
            flag.value = true
            if (flag.value) {
              break;
            }
          }
        }

      }
    }

  }).catch(()=>{
    tableloading.value = false
  })
  const params = {
    stationCode: info.value.stationCode,
    startDate: info.value.startDate,
    endDate: info.value.endDate,
    currentDate: info.value.currentDate,
    // taskName: taskName.value,
  }
  getTask(params).then((row: any) => {
    statistics.value = row.data
  })
}
//操作巡视任务
function Operate(row: any, optType: any) {
  if (row.isStationFlag == 1) {
    const paramsa = {
      stationcode: userStore.stationCode
    }
    stationOnline(paramsa).then((res: any) => {
      if (res == 1) {
        const params = {
          taskTodoId: row.taskTodoId,
          optType: optType
        }
        operate(params).then((res: any) => {
          if (res.code == 0) {
            const typeText = ref('')
            if (optType == 'pause') {
              typeText.value = '暂停'
            } else if (optType == 'resume') {
              typeText.value = '恢复'
            } else if (optType == 'runNow') {
              typeText.value = '执行'
            } else if (optType == 'delete') {
              typeText.value = '删除'
            } else if (optType == 'stop') {
              typeText.value = '终止'
            }
            ElMessage({
              type: "success",
              message: typeText.value + "成功",
            });
            getData(0, true)
          }
        })
      } else if (res == 0) {
        ElMessage({
          type: 'error',
          message: '当前变电站节点不在线，请稍后重试！',
        })
        getData(0, true)
        return false
      }
    })
  } else {
    const params = {
      taskTodoId: row.taskTodoId,
      optType: optType
    }
    operate(params).then((res: any) => {
      if (res.code == 0) {
        const typeText = ref('')
        if (optType == 'pause') {
          typeText.value = '暂停'
        } else if (optType == 'resume') {
          typeText.value = '恢复'
        } else if (optType == 'runNow') {
          typeText.value = '执行'
        } else if (optType == 'delete') {
          typeText.value = '删除'
        } else if (optType == 'stop') {
          typeText.value = '终止'
        }
        ElMessage({
          type: "success",
          message: typeText.value + "成功",
        });
        getData(0, true)
      }
    })
  }



}
 const PatrolDetailsInfo:any=ref({})
//保存页面未跳转前的状态

function detailed(row:any) {
  PatrolDetailsInfo.value.taskTodoId =  row.taskTodoId,
  PatrolDetailsInfo.value.isStationFlag = row.isStationFlag
  isPatrolDetails.value = false

  sessionStorage.setItem('size', info.value.size)
  sessionStorage.setItem('current', info.value.current)
  sessionStorage.setItem('startDate', info.value.startDate)
  sessionStorage.setItem('endDate', info.value.endDate)

}
//重置
function resetting() {
  getNowFormatDate()
  calendar.value.selectDate('today')
  taskName.value = ''
  taskState.value = ''
  getData(1, true)
}
const ws = new WebSocket( userStore.wsApiBaseUrl+ '/websocket/taskresult_'+ userStore.stationCode + "_" + userStore.userId);  
function setupWebSocket() {
  ws.onopen = () => {  
  };  
  ws.onerror = (error:any) => {  
  };  
  ws.onmessage = (e:any) => {  
    if (e.data != 0) {
      getData(1, false)
    }
  };  
  ws.onclose = () => {  
  };  
}
onBeforeUnmount(() => {
  if(ws != null)
  {
    ws.close()
  }
 
})
onMounted(() => {
  setupWebSocket()
  getNowFormatDate()
  if (router.options.history.state.forward) {
    if (sessionStorage.getItem('size')) {
      var size = sessionStorage.getItem('size')
      var current = sessionStorage.getItem('current')
      var startDate = sessionStorage.getItem('startDate')
      var endDate = sessionStorage.getItem('endDate')
      info.value.size = size
      info.value.current = current
      info.value.startDate = startDate
      info.value.endDate = endDate
      getData(0, true)
      sessionStorage.removeItem('size');
      sessionStorage.removeItem('current');
      sessionStorage.removeItem('startDate');
      sessionStorage.removeItem('endDate');
    } else {
      getData(1, true)
    }

  } else {
    getData(1, true)
  }


})
const dialogVisible = ref(false)

function ylOpen(){
  dialogVisible.value = true;
}
function handleClose(){
  dialogVisible.value = false;
}
function retrunClick(){
  isPatrolDetails.value = true;
}
</script>
<template>
  <div>
    <div class="patrolmonitorbox"  v-show="isPatrolDetails == true" style="position: relative;
      display: flex;
      box-sizing: border-box;
      padding: 15px;
      padding-top:17px ;
      padding-bottom: 0;">
      <div class="leftNav">
        <el-scrollbar height="calc(100vh - 160px)">
          <div style="height:40px;line-height: 40px; position: relative;display: flex;justify-content: space-between;align-items: center;">
            <div style=" font-weight: 700; font-style: normal;padding-left: 15px;padding-top: 5px;
            font-size: 16px;display:inline-block;color: #FFFFFF;"
              class="fontFamily">巡视时间</div>
              <img src="@/assets/patrolmonitor/xsjk_yl.png" alt="" srcset="" style="padding-right: 15px;cursor: pointer;padding-top: 5px;" @click="ylOpen">
          </div>
         
          <div style="z-index: 100;width: 280px;text-align: center;">
            <el-calendar ref="calendar">
              <template #header="{ date }">
                <div style="z-index:100;cursor:pointer; " @click="selectDate('prev-month')"><img
                  src="@/assets/videoimg/smallleft.png" style="z-index:100" alt=""></div>
                <div style="z-index:100;cursor:pointer; font-family: 'Arial Normal', 'Arial';
                  font-weight: 400;
                  font-style: normal;
                  font-size: 14px;
                  color: #B5D7FF;" @click="selectDate('today')">{{ date }}</div>
                 <div style="z-index:100;cursor:pointer;" @click="selectDate('next-month')"><img
                  src="@/assets/videoimg/smallright.png" alt="" style="z-index:100"></div>
              </template>
              <template #dateCell="{ data }">
                <div @click="clickDay(data)">
                  {{ data.day.split("-").slice(2).join("-") }}
                </div>
              </template>
            </el-calendar>
          </div>
      
          <div class="dataTime">
            <div class="dataTimeText">任务名称</div>
            <div class="dataTimeInput">
              <div class="screenHomepage "><el-input v-model="taskName" placeholder="请输入任务名称" @clear="getData(1, true)"
                  @keyup.enter="getData(1, true)" clearable /></div>
            </div>
          </div>
          <div class="dataTime" style="z-index:300;">
            <div class="dataTimeText">任务状态</div>
            <div class="dataTimeInput">
              <div class="screenHomepage ">
                <el-select v-model="taskState" class="selType" :teleported="false" style="width: 100%;z-index: 200;"
                  :popper-append-to-body="false" clearable placeholder="任务状态" @change="getData(1, true)">
                  <el-option v-for="item in stateData" :key="item.id" :label="item.name"
                    :value="item.id" />
                </el-select>
              </div>
            </div>
          </div>
          <div class="dataTime">
            <div class="dataTimeText">开始时间</div>
            <div class="dataTimeInput"> <el-date-picker style="width: 100%;z-index: 200;" class="screenHomepage" v-model="info.startDate" type="date"
                placeholder="" popper-class="elDatePicker" format="YYYY-MM-DD" value-format="YYYY-MM-DD" /></div>
          </div>
          <div class="dataTime">
            <div class="dataTimeText">结束时间</div>
            <div class="dataTimeInput"> <el-date-picker style="width: 100%;z-index: 200;" class="screenHomepage" v-model="info.endDate" type="date"
                placeholder=" " popper-class="elDatePicker" format="YYYY-MM-DD" value-format="YYYY-MM-DD" /></div>
          </div>
       
          <div style="width: 100%;display: flex;justify-content: space-around;">
            <div v-if="info.startDate == today && info.endDate == today"
              style="position: relative;z-index: 100;width: 110px;height: 33px;">
              <el-button class="three-button" @click=" info.current = 1, getData(1, true), getNowFormatDate"
                style="border: none;z-index:100;position: relative; color: #009BFF;width: 110px;height: 34px;">查询</el-button>
            </div>
            <div v-if="info.startDate != today || info.endDate != today"
              style="position: relative;z-index: 100;width: 110px;height: 33px;">
              <el-button class="three-button" @click="info.current = 1, getData(0, true), getNowFormatDate"
                style="border: none;z-index:100;position: relative; color: #009BFF;width: 110px;height: 34px;">查询</el-button>
            </div>
            <div style="position: relative;z-index: 100;width: 110px;height: 33px;">
              <el-button class="three-button" @click=" resetting()"
                style="border: none;z-index:100;position: relative; color: #009BFF;width: 110px;height: 34px;">重置</el-button>
            </div>
          </div>
        </el-scrollbar>
      </div>
      <div class="rightNav">
        <div style="height: 45px;padding-top: 10px;position: relative;display: flex;align-items: center;justify-content:space-between;">
          <div style="display: flex;align-items: center;justify-content: space-between;">
            <div class="task"
              style="font-weight: 700;  font-style: normal;font-size: 16px;color: #FFFFFF;left: 15px;top:8px ;">任务总数：{{
                statistics.allCount }}</div>
            <div class="task" style="color: #EDFAFE;left: 160px;top:10px;font-size: 14px;"> <img
                src="@/assets/MenuIcon/fff.png" alt="" style="display: inline-block;"> 已完成：{{ statistics.execute }}</div>
            <div class="task" style="color: #00F9A2;left: 260px;top:10px;font-size: 14px;"> <img
                src="@/assets/MenuIcon/green.png" alt="" style="display: inline-block;"> 执行中：{{ statistics.executing }}
            </div>
            <div class="task" style="color: #00FFFF;left: 360px;top:10px;font-size: 14px;"> <img
                src="@/assets/MenuIcon/blue.png" alt="" style="display: inline-block;"> 待执行：{{ statistics.executed }}
            </div>
            <div class="task" style="color: #09f;left: 470px;top:10px;font-size: 14px;"> <img
                src="@/assets/MenuIcon/xsri_wzx.png" alt="" style="display: inline-block;"> 未执行：{{ statistics.unexecuted
                }}
            </div>
            <div class="task" style="color: #a851ff;left: 570px;top:10px;font-size: 14px;"> <img
                src="@/assets/MenuIcon/xsri_cq.png" alt="" style="display: inline-block;"> 超期执行：{{ statistics.overdue }}
            </div>

            <div class="task" style="color: #FFBD00;left: 680px;top:10px;font-size: 14px;"> <img
                src="@/assets/MenuIcon/yellow.png" alt="" style="display: inline-block;"> 暂停：{{ statistics.suspend }}
            </div>
            <div class="task" style="color: #FF3300;left: 770px;top:10px;font-size: 14px;"> <img
                src="@/assets/MenuIcon/red.png" alt="" style="display: inline-block;"> 终止：{{ statistics.stop }}</div>
          </div>
         


        </div>
        <!-- <img src="@/assets/MenuIcon/xsri_lb1.png" alt="" style="width:100%;position: absolute;"> -->
        <!-- <div style="position: relative;"> -->
        <el-table :data="tableData" class="PatrolMonitoring" 
          style="width: 99%;margin:auto;position: relative; height:calc(79vh); overflow: auto;margin-top: 10px; "
          stripe :header-cell-style="tableBg">
          <el-table-column type="index" align="center" label="序号" width="50px" />
          <el-table-column prop="taskName" label="任务名称" min-width="140px" align="left" />
          <el-table-column prop="taskType" label="任务类型" width="100px" align="center">
            <template #default="scope">
              <span v-if="scope.row.type == 1">例行巡视</span>
              <span v-else-if="scope.row.type == 2">特殊巡视</span>
              <span v-else-if="scope.row.type == 3">专项巡视</span>
              <span v-else-if="scope.row.type == 4">自定义巡视</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="deviceSumnum" label="点位数量" align="center" width="80px" />
          <el-table-column prop="deviceCount" label="设备数量" align="center" width="80px" />
          <el-table-column prop="planStartTime" label="计划开始时间" width="170px" align="center" />
          <el-table-column prop="startTime" label="执行/取消时间" width="170px" align="center" />
          <el-table-column prop="endTime" label="结束时间" width="170px" align="center">
            <template #default="scope">
              <span v-if="scope.row.endTime != null">{{ scope.row.endTime }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="taskProgress" label="进度" align="center" width="100px">
            <template #default="scope">
              <el-progress :text-inside="true" :stroke-width="18" :percentage="scope.row.taskProgress" status="success" />
            </template>
          </el-table-column>
          <el-table-column prop="taskState" label="状态" align="center" width="100px">
            <template #default="scope">
              <span v-if="scope.row.taskState == 0" style="color: #00FFFF;">待执行</span>
              <span v-else-if="scope.row.taskState == 1">已完成</span>
              <span v-else-if="scope.row.taskState == 2" style="color: #00F9A2;">执行中</span>
              <span v-else-if="scope.row.taskState == 3" style="color: #FFBD00;">暂停</span>
              <span v-else-if="scope.row.taskState == 4" style="color: #FF3300;">终止</span>
              <span v-else-if="scope.row.taskState == 5" style="color: #09f;">未执行</span>
              <span v-else-if="scope.row.taskState == 6" style="color: #a851ff;">超期执行</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="description" label="巡视结果" width="140px" align="center">
            <template #default="scope">
              <span>成功：{{ scope.row.result.successCount }}；</span><span>失败：{{ scope.row.result.failCount }}</span><br />
              <span>正常：{{ scope.row.result.normalCount }}；</span><span style="color: #FF3300;">异常：{{
                scope.row.result.abnormalCount }}</span>
            </template>

          </el-table-column>
          <el-table-column label="操作" align="center" width="140px">
            <template #default="scope">
              <div style="display: flex; justify-content: space-between;align-items: center;">
                <img src="@/assets/tableIcon/patrolmonitor/u2219.png" alt="" title="立即执行" class="cursorpointer"
                  v-hasPerm="['task:runnow']" v-if="scope.row.taskState == 0"
                  @click="Operate(scope.row, 'runNow')">
                 <img src="@/assets/tableIcon/patrolmonitor/u2219_disabled.png" alt="" title="立即执行"
                  v-hasPerm="['task:runnow']" v-else>




                <img class="cursorpointer" src="@/assets/tableIcon/patrolmonitor/u2225.png" v-hasPerm="['task:suspend']" v-if="scope.row.taskState == 2 || scope.row.taskState == 0"
                  title="暂停" @click="Operate(scope.row, 'pause')">
                <img v-else src="@/assets/tableIcon/patrolmonitor/u2225_disabled.png"  v-hasPerm="['task:suspend']"
                  title="暂停">
                <img class="cursorpointer" src="@/assets/tableIcon/patrolmonitor/u2228.png"  v-hasPerm="['task:suspend']" v-if="scope.row.taskState == 3" title="恢复"
                  @click="Operate(scope.row, 'resume')">

                <img v-else src="@/assets/tableIcon/patrolmonitor/u2228_disabled.png"  v-hasPerm="['task:suspend']" title="恢复">

                <img class="cursorpointer" src="@/assets/tableIcon/patrolmonitor/u2231.png"
                  v-hasPerm="['task:shutdown']"
                  v-if="scope.row.taskState == 0 || scope.row.taskState == 3 "
                  @click="Operate(scope.row, 'stop')"
                  title="终止" >
                <img v-else src="@/assets/tableIcon/patrolmonitor/u2231_disabled.png"
                  v-hasPerm="['task:shutdown']"
                  title="终止" >

                  <img class="cursorpointer" src="@/assets/tableIcon/patrolmonitor/u2222.png"
                    @click="detailed(scope.row)"
                  title="详情" >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- </div> -->
        <div style="display: flex;justify-content: center;margin-top: 5px;">
          <Page style="position: relative;z-index: 100;" :total="total" v-model:size="info.size"
            v-model:current="info.current" @pagination="getData(0, true)"></Page>
        </div>
      </div>
    </div>

    <PatrolDetails class=" PatrolDetailsBox " :PatrolDetailsInfo="PatrolDetailsInfo" v-if="isPatrolDetails == false"
    @retrunClick="retrunClick"></PatrolDetails>
    <Eldialog v-if="dialogVisible" :title="'巡视监控月历'" :zIndex="2000" :width="'calc(100vw - 80px)'" 
    @before-close="handleClose" :elclass="'ylclass'" >
      <template v-slot:PopFrameContent>
        <PatrolmonitorMonth v-if="dialogVisible" style="padding-top: 10px;"> </PatrolmonitorMonth>
      </template>
    </Eldialog>
  </div>
</template>
<style scoped lang="scss">
.patrolmonitorbox{
  .dataTimeInput {
    width: 100%;
    position: relative;
    margin-left: -12px;

    .dataTimeImg {
      right: 20px;
      top: 10px;
      position: absolute;
    }
  }

  .dataTime {
    width: 90%;
    position: relative;
    z-index: 100;
    margin: 10px 25px;

    .dataTimeText {
      color: #B5D7FF;
      font-size: 14px;
      margin-bottom: 10px;
      margin-left: -10px;
    }
  }
  
  .imgbg {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
  }

  .leftNav {
    min-width: 280px;
    height: calc(90vh);
    position: relative;
    background: url(@/assets/navigation/ty_260x988.png);
    background-size: 100% 100%;
  }

  .rightNav {
    width: calc(100vW - 305px);
    height: calc(90vh);
    margin-left: 8px;
    position: relative;
    background: url(@/assets/navigation/ty_1614x988.png) ;
    background-size: 100% 100%;
  }

  .task {
    // z-index: 100;
    // display: inline-block;
    // position: absolute;
    margin-left: 25px;
  }


  :deep(.lastItem-row) {
    background-color: rgb(255 204 0 / 30%) !important;
  }



  :deep(.el-input__wrapper) {
    background-color: #0e3329;

  }

  :deep(.el-input__inner) {
    color: #fff !important;
  }

  :deep(.el-table__body-wrapper) {
    color: #fff;
  }

  // 日历
  :deep(.el-calendar) {
    --el-calendar-cell-width: 30px;
    background-color: #ffffff00;
  }

  :deep(.el-calendar-table .el-calendar-day) {
    background: rgb(31, 41, 56) ;
    border: 1px solid rgb(34, 55, 71) ;
    padding: 0px !important;
    line-height: 28px;
    width: 32px;
  }

  :deep(.el-calendar-table__row) {
    display: flex;
  }

  :deep(.el-calendar-table__row td) {
    display: block;
    border: none !important;
    margin: 2px 2px;
    z-index: 100;
    color: #B5D7FF;
    box-sizing: border-box;
  }

  :deep(.el-calendar-table__row td div div) {
    border: 1px solid rgb(27,40, 56, 0) !important;
    font-size: 14px;
  }

  :deep(.el-calendar-table__row .is-today div div) {
    color: #fff;
    z-index: 100;

  }

  :deep(.el-calendar-table__row .is-selected) {
    border-radius: 4px;
    // overflow: hidden;
  }

  :deep(.el-calendar-table__row .is-selected div div) {
    background-color: rgb(0,153,255);
    border: 1px solid rgb(0,153,255) !important;
    color: #ffffff;
    border-radius: 4px;
  }
  :deep(.el-calendar-table__row .is-selected div div:hover) {
    color: #ffffff;
  }
  :deep(.el-calendar-table__row td :hover) {
    box-sizing: border-box;
    border-radius: 4px;
  }

  :deep(.el-calendar-table__row td div div:hover) {
    // border: 1px solid #00f39f !important;
    // background-color: #0e332a;
    color: rgb(0, 153, 255);
    box-sizing: border-box;
    border-radius: 4px;
  }
  :deep(.el-calendar__body) {
    padding: 12px 10px 35px;
    padding-left: 14px;
  }

  :deep(.el-calendar-table thead th) {
    display: block;
    padding: 5px 0px;
    margin: 0px 10px;
    z-index: 100;
    color: #fff;
  }

  :deep(.el-calendar-table thead) {
    display: flex;
  }

  //日历

    :deep(.el-calendar__header) {
      justify-content: space-around !important;
      align-items: center !important;
      border: none;
    }

    :deep(.el-table) {
      --el-table-row-hover-bg-color: transparent !important;
      --el-table-border-color: transparent !important;
      --el-table-bg-color: transparent !important;
    }

    :deep(.el-table__empty-text) {
      color: #fff !important;
    }

  //按钮样式
  .three-button {
    width: 111px;
    height: 41px;
    background: url('@/assets/patrolmonitor/anniiu5.png') no-repeat;
    background-size: 100% 100%;
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    font-weight: 700;
    font-style: normal;
    font-size: 14px;
    color: #009BFF;
    border: none;

    :deep(.el-button.is-disabled, .el-button.is-disabled:focus, .el-button.is-disabled:hover) {
      color: #009BFF !important;
      background: url('@/assets/patrolmonitor/anniiu5.png') no-repeat;
      background: url('@/assets/patrolmonitor/anniiu6.png') no-repeat !important;
      background-size: 100% 100% !important;
      border: none !important;
    }

    &:focus {
      color: #009BFF;
      background: url('@/assets/patrolmonitor/anniiu5.png') no-repeat;
      background: url('@/assets/patrolmonitor/anniiu6.png') no-repeat;
      background-size: 100% 100%;
    }

    &:hover {
      border: none !important;
      background: url('@/assets/patrolmonitor/anniiu6.png') no-repeat;
      background-size: 100% 100%;
      color: #009BFF;
    }
  }

  // :deep(.el-input__wrapper:hover) {
  //   // box-shadow: 0 0 0 1px #00F9A2 inset;
  //   color: rgba(0, 118, 253, 1);
  // }

  :deep(.el-progress-bar__outer) {
    background-color: rgb(255 255 255 / 20%) !important;
  }

  :deep(.el-calendar-table:not(.is-range) td.prev) {
    color: rgba(181, 215, 255, 0.3);
  }

  :deep(.el-calendar-table:not(.is-range) td.next) {
    color: rgba(181, 215, 255, 0.3);
  }

}
:deep(.el-progress-bar__inner) {
  background-color: rgb(0, 153, 255) !important;
}
.cursorpointer{
  cursor: pointer;
}
</style>
<style>
  .ylclass .el-dialog__body{
    height: calc(100vh - 78px);
  }
  .PatrolDetailsBox .returnButton{
    position: absolute;
    right: -0;
    z-index: 1000;
    top: -41px;
  }
</style>