renkang/xj-admin
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source 
init
This commit is contained in:
weixin
2025-06-27 17:42:38 +08:00
commit bd6402478b
5317 changed files with 785994 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/emergency/communication/components/specialized.vue
+363
View File
@@ -0,0 +1,363 @@
<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"
: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 } 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';
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;
}
};
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);
});
};
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>