382 lines
15 KiB
Vue
382 lines
15 KiB
Vue
<template>
|
|
<div class="outer-s" style="position: relative">
|
|
<div style="height: 100%; width: 100%; overflow: auto; position: absolute; top: 0; left: 0; display: flex">
|
|
<div class="outer-inner-left">
|
|
<a-spin
|
|
class="iframe"
|
|
style="display: flex; align-items: center; justify-content: center"
|
|
tip="加载中..."
|
|
v-if="loadingVisible"
|
|
:spinning="loadingVisible"
|
|
/>
|
|
<!-- <iframe-->
|
|
<!-- v-show="!loadingVisible"-->
|
|
<!-- id="iframeRef"-->
|
|
<!-- ref="iframeRef"-->
|
|
<!-- class="iframe"-->
|
|
<!-- :src="`http://localhost:8080?isSpecialized=true&${qs.stringify(props.imProps)}&sessionId=${route.query?.sessionId}`"-->
|
|
<!-- ></iframe>-->
|
|
<iframe
|
|
v-show="!loadingVisible"
|
|
id="iframeRef"
|
|
ref="iframeRef"
|
|
class="iframe"
|
|
sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-camera allow-microphone"
|
|
allow="camera; microphone"
|
|
:src="`${imAddressSrc}isSpecialized=true&${qs.stringify(props.imProps)}&sessionId=${route.query?.sessionId}`"
|
|
></iframe>
|
|
</div>
|
|
<div class="outer-inner-right">
|
|
<a-row class="e-div">
|
|
<a-col class="col-des-o">
|
|
<div class="col-des"> 应急响应及时率 </div>
|
|
<div class="col-des-d">
|
|
{{ statInfo.timelinessRate ?? '0' + '%' }}
|
|
<div style="flex: 1">
|
|
<img style="width: 20px; height: 25px" src="../../../../assets/images/bg-1.png" alt="" />
|
|
</div>
|
|
</div>
|
|
</a-col>
|
|
<a-col class="col-des-t">
|
|
<div class="col-des"> 应急任务完成率 </div>
|
|
<div class="col-des-d">
|
|
{{ statInfo.completionRate ?? '0' + '%' }}
|
|
<div style="flex: 1">
|
|
<img style="width: 20px; height: 25px" src="../../../../assets/images/bg-2.png" alt="" />
|
|
</div>
|
|
</div>
|
|
</a-col>
|
|
<a-col class="col-des-tr">
|
|
<div class="col-des"> 值班小组 </div>
|
|
<div class="col-des-d">
|
|
{{ statInfo.dutyTeamNum ?? '0' }}
|
|
<div style="flex: 1">
|
|
<img style="width: 20px; height: 25px" src="../../../../assets/images/bg-3.png" alt="" />
|
|
</div>
|
|
</div>
|
|
</a-col>
|
|
<a-col class="col-des-f">
|
|
<div class="col-des"> 应急统计 </div>
|
|
<div class="col-des-d">
|
|
{{ statInfo.totalNum ?? '0' }}
|
|
<div style="flex: 1">
|
|
<img style="width: 20px; height: 25px" src="../../../../assets/images/bg-4.png" alt="" />
|
|
</div>
|
|
</div>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row style="margin: 10px 0 0 20px">
|
|
<span style="font-size: 18px; font-weight: bold">值班</span>
|
|
</a-row>
|
|
<a-row class="calendar-row">
|
|
<a-calendar :weekStartsOn="3" :fullscreen="false" v-model:value="value" @panelChange="onPanelChange">
|
|
<template #headerRender="{ value: current, type, onChange, onTypeChange }">
|
|
<a-row style="display: flex; align-items: center; margin-bottom: 5px">
|
|
<a-col :span="8" style="font-size: 17px">
|
|
<div style="display: flex; cursor: pointer" @click="clickPreMonth(current, onChange)">
|
|
<div style="margin-right: 7px; display: flex; align-items: center; justify-content: center">
|
|
<svg
|
|
t="1684721034832"
|
|
class="icon"
|
|
viewBox="0 0 1024 1024"
|
|
version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
p-id="5243"
|
|
width="10"
|
|
height="10"
|
|
>
|
|
<path
|
|
d="M735.208665 65.582671l-446.41733 446.417329 446.41733 446.417329z"
|
|
p-id="5244"
|
|
fill="#999999"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
上月
|
|
</div>
|
|
</a-col>
|
|
<a-col :span="8" style="display: flex; justify-content: center">
|
|
<span style="font-size: 17px; font-weight: 500; display: flex; align-items: center">
|
|
{{ String(current.year()) }}
|
|
<svg
|
|
t="1684735413489"
|
|
class="icon"
|
|
viewBox="0 0 1024 1024"
|
|
version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
p-id="6335"
|
|
width="10"
|
|
height="10"
|
|
>
|
|
<path
|
|
d="M96 512a32 32 0 0 1 32-32h768a32 32 0 0 1 0 64H128a32 32 0 0 1-32-32z"
|
|
fill="#303133"
|
|
p-id="6336"
|
|
/>
|
|
</svg>
|
|
{{ String(current.month() + 1) < 10 ? '0' + String(current.month() + 1) : String(current.month() + 1) }}
|
|
</span>
|
|
</a-col>
|
|
<a-col :span="8" style="font-size: 17px">
|
|
<div style="cursor: pointer; display: flex; justify-content: flex-end" @click="clickNextMonth(current, onChange)">
|
|
下月
|
|
<div style="margin-left: 7px; display: flex; align-items: center; justify-content: end">
|
|
<svg
|
|
t="1684720978954"
|
|
class="icon"
|
|
viewBox="0 0 1024 1024"
|
|
version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
p-id="4154"
|
|
width="10"
|
|
height="10"
|
|
>
|
|
<path
|
|
d="M288.791335 65.582671l446.41733 446.417329-446.41733 446.417329z"
|
|
p-id="4155"
|
|
fill="#999999"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</a-col>
|
|
</a-row>
|
|
</template>
|
|
<template #dateFullCellRender="{ current }">
|
|
<div class="calendar-d">
|
|
<div :class="[isBackG(current) ? 'date-background' : 'date-no-background']">
|
|
<span style="font-weight: 500">{{ current.date() }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</a-calendar>
|
|
</a-row>
|
|
<forHelpAdv :isSpecialized="true" ref="forHelpAdvRef" />
|
|
<detail ref="detailRef" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { Dayjs } from 'dayjs';
|
|
import detail from './detail.vue';
|
|
import { stat, scheduleRecordApi, scheduleRecordNewApi } from './commApi';
|
|
import forHelpAdv from './forHelpAdv.vue';
|
|
import moment from 'moment';
|
|
import qs from 'qs';
|
|
import { imAddressSrc } from '/@/utils/imAddressSrc';
|
|
|
|
import { useRoute } from 'vue-router';
|
|
import { message } from 'ant-design-vue';
|
|
import { useUserStore } from '/@/store/modules/user';
|
|
const props = defineProps({
|
|
imProps: Object,
|
|
});
|
|
|
|
const route = useRoute();
|
|
|
|
moment.updateLocale('en', {
|
|
weekdaysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
|
|
});
|
|
const value = ref<Dayjs>();
|
|
const detailRef = ref();
|
|
const statInfo = ref<Object>({});
|
|
const dayS = ref<Array>();
|
|
const loadingVisible = ref<Boolean>(true); // loading
|
|
const forHelpDetail = (res) => {
|
|
detailRef.value.showDrawer(res);
|
|
};
|
|
const onPanelChange = (value: Dayjs, mode: string) => {
|
|
console.log('click');
|
|
console.log(value);
|
|
console.log(mode);
|
|
};
|
|
const isBackG = (current) => {
|
|
return dayS.value?.includes(current.month() + 1 + '-' + current.date());
|
|
};
|
|
const clickPreMonth = (current, onChange) => {
|
|
onChange(current.month(current.month() - 1));
|
|
scheduleRecord(current.year(), current.month());
|
|
};
|
|
const clickNextMonth = (current, onChange) => {
|
|
onChange(current.month(current.month() + 1));
|
|
scheduleRecord(current.year(), current.month() + 2);
|
|
};
|
|
const forHelpAdvRef = ref();
|
|
const forHelp = (userId, isDisabled) => {
|
|
forHelpAdvRef.value.showModal(userId, isDisabled);
|
|
};
|
|
|
|
window.onmessage = (msg) => {
|
|
const result = JSON.parse(msg.data);
|
|
switch (result.code) {
|
|
case 'forHelp':
|
|
forHelp(result.userId, result.isDisabled);
|
|
break;
|
|
case 'forHelpDetail':
|
|
forHelpDetail(result.userId);
|
|
break;
|
|
case 'closeLoading':
|
|
closeLoading();
|
|
break;
|
|
case 'permissionError':
|
|
message.error(result.msg);
|
|
break;
|
|
case 'kickOut':
|
|
useUserStore().passiveLogout();
|
|
break;
|
|
}
|
|
};
|
|
|
|
const closeLoading = () => {
|
|
loadingVisible.value = false;
|
|
};
|
|
const initStat = () => {
|
|
const params = {
|
|
personType: '7',
|
|
};
|
|
stat(params)
|
|
.then((res) => {
|
|
statInfo.value = res;
|
|
})
|
|
.catch((e) => {
|
|
console.log(e);
|
|
});
|
|
};
|
|
const scheduleRecord = (year, month) => {
|
|
if (month * 1 === 13) {
|
|
year = year * 1 + 1;
|
|
month = 1;
|
|
}
|
|
if (month * 1 === 0) {
|
|
year = year * 1 - 1;
|
|
month = 12;
|
|
}
|
|
const params = {
|
|
year: year,
|
|
month: month,
|
|
};
|
|
// scheduleRecordApi(params)
|
|
// .then((res) => {
|
|
// if (res.months !== null) {
|
|
// let result = [];
|
|
// res.months.forEach((item) => {
|
|
// item.days.forEach((it) => {
|
|
// result.push(item.month + '-' + it.day);
|
|
// });
|
|
// });
|
|
// dayS.value = result;
|
|
// }
|
|
// })
|
|
// .catch((e) => {
|
|
// console.log(e);
|
|
// });
|
|
scheduleRecordNewApi(params).then((res: any) => {
|
|
if (res) {
|
|
dayS.value = res.map((item) => {
|
|
return `${month}-${item}`;
|
|
});
|
|
}
|
|
});
|
|
};
|
|
const nowDate = new Date();
|
|
scheduleRecord(nowDate.getFullYear(), nowDate.getMonth() + 1);
|
|
initStat();
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.outer-s {
|
|
height: 100% !important;
|
|
display: flex;
|
|
padding: 0 5px 0 0;
|
|
}
|
|
.iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
.outer-inner-left,
|
|
.outer-inner-right {
|
|
height: 100%;
|
|
overflow: auto;
|
|
}
|
|
.outer-inner-left {
|
|
width: calc(100% - 370px);
|
|
}
|
|
.outer-inner-right {
|
|
width: 370px;
|
|
border-left: 2px solid #f9f9f9;
|
|
background: #ffffff;
|
|
}
|
|
.e-div {
|
|
display: flex;
|
|
}
|
|
.col-des,
|
|
.col-des-d {
|
|
padding: 0 10px !important;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
//.ant-col {
|
|
// padding: 10px 10px;
|
|
//}
|
|
.col-des {
|
|
height: 34px;
|
|
font-size: 10px;
|
|
align-items: flex-end;
|
|
}
|
|
.col-des-d {
|
|
align-items: flex-start;
|
|
height: 42px;
|
|
font-size: 20px;
|
|
> :nth-child(1) {
|
|
display: flex;
|
|
height: 100%;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
padding-right: 5px;
|
|
}
|
|
}
|
|
.col-des,
|
|
.col-des-d {
|
|
color: #ffffff;
|
|
}
|
|
.col-des-o {
|
|
background-color: #ffa845;
|
|
}
|
|
.col-des-t {
|
|
background-color: #4ad246;
|
|
}
|
|
.col-des-tr {
|
|
background-color: #0093fe;
|
|
}
|
|
.col-des-f {
|
|
background-color: #8068f2;
|
|
}
|
|
.col-des-o,
|
|
.col-des-t,
|
|
.col-des-tr,
|
|
.col-des-f {
|
|
width: calc(50% - 10px);
|
|
margin: 10px 0 0 5px;
|
|
border-radius: 15px;
|
|
}
|
|
.calendar-row {
|
|
padding: 0 10px;
|
|
margin-top: 5px;
|
|
}
|
|
.date-background {
|
|
background-color: #dae0ff;
|
|
border-radius: 10px;
|
|
}
|
|
.date-no-background,
|
|
.date-background {
|
|
padding: 5px 0;
|
|
}
|
|
.calendar-d {
|
|
padding: 5px;
|
|
}
|
|
</style>
|