824 lines
28 KiB
Vue
824 lines
28 KiB
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> |