279 lines
8.7 KiB
Vue
279 lines
8.7 KiB
Vue
<template>
|
|
<div style="width: 100%; height: 100%">
|
|
<a-row class="top-row">
|
|
<a-col :span="12" style="display: flex">
|
|
<div :class="['button-o', checked ? 'choose-this' : '']" @click="clickThis(true)">
|
|
应急服务
|
|
<!-- <div v-show="oneNumber > 0" class="number-d">-->
|
|
<!-- {{ oneNumber > 99 ? '99+' : oneNumber }}-->
|
|
<!-- </div>-->
|
|
</div>
|
|
<div :class="['button-t', checked ? '' : 'choose-this']" @click="clickThis(false)">
|
|
大病就医
|
|
<!-- <div v-show="twoNumber > 0" class="number-d">-->
|
|
<!-- {{ twoNumber > 99 ? '99+' : twoNumber }}-->
|
|
<!-- </div>-->
|
|
</div>
|
|
</a-col>
|
|
<a-col :span="12" style="display: flex; justify-content: flex-end; padding-right: 60px">
|
|
<a-row class="top-right-row" style="color: #ffa845">
|
|
<div> 应急响应率</div>
|
|
<div>
|
|
{{ stat.emeResRate + '%' }}
|
|
</div>
|
|
</a-row>
|
|
<a-row class="top-right-row" style="color: #4ad246">
|
|
<div> 大病就医率</div>
|
|
<div>
|
|
{{ stat.seriousRate + '%' }}
|
|
</div>
|
|
</a-row>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row class="bottom-row">
|
|
<a-spin
|
|
class="iframe"
|
|
style="display: flex; align-items: center; justify-content: center"
|
|
tip="加载中..."
|
|
v-if="checked && loadingVisible"
|
|
:spinning="loadingVisible"
|
|
/>
|
|
<!-- <iframe-->
|
|
<!-- v-show="checked && !loadingVisible"-->
|
|
<!-- id="iframeRef"-->
|
|
<!-- ref="iframeRef"-->
|
|
<!-- class="iframe"-->
|
|
<!-- :src="`http://localhost:8080?isSpecialized=false&${qs.stringify(props.imProps)}`"-->
|
|
<!-- ></iframe>-->
|
|
<iframe
|
|
v-show="checked && !loadingVisible"
|
|
id="iframeRef"
|
|
ref="iframeRef"
|
|
class="iframe"
|
|
:src="`${imAddressSrc}isSpecialized=false&${qs.stringify(props.imProps)}`"
|
|
></iframe>
|
|
<bigInformationDetail
|
|
v-show="!checked"
|
|
style="width: 100%; height: 100%; min-height: 0; overflow: visible"
|
|
ref="bigInformationDetailRef"
|
|
/>
|
|
</a-row>
|
|
<forHelpAdv :isSpecialized="false" ref="forHelpAdvRef" />
|
|
<detail ref="detailRef" />
|
|
<bigInformation ref="bigInformationRef" />
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref, unref } from 'vue';
|
|
import forHelpAdv from './forHelpAdv.vue';
|
|
import detail from './detail.vue';
|
|
import bigInformation from './bigInformation.vue';
|
|
import bigInformationDetail from './bigInformationDetail.vue';
|
|
import { getStatisticsApi, getSessionListApi, endBApi } from '/@/views/emergency/communication/components/commApi';
|
|
import qs from 'qs';
|
|
import { imAddressSrc } from '/@/utils/imAddressSrc';
|
|
import { message } from 'ant-design-vue';
|
|
import { useMessage } from '/@/hooks/web/useMessage';
|
|
const { createConfirm } = useMessage();
|
|
|
|
const stat = ref<Object>({ emeResRate: 0, seriousRate: 0 });
|
|
const checked = ref<Boolean>(true);
|
|
const loadingVisible = ref<Boolean>(true); // loading
|
|
// const oneNumber = ref<Number>(10);
|
|
// const twoNumber = ref<Number>(0);
|
|
const forHelpAdvRef = ref();
|
|
const detailRef = ref();
|
|
const bigInformationRef = ref();
|
|
const bigInformationDetailRef = ref();
|
|
const iframeRef = ref();
|
|
const initMap = ref<Boolean>(true);
|
|
const props = defineProps({
|
|
imProps: Object,
|
|
});
|
|
|
|
const clickThis = (type) => {
|
|
// if (!type) return message.info('敬请期待！');
|
|
checked.value = type;
|
|
changeTab(type ? '0' : '1');
|
|
if (!type && initMap.value) {
|
|
initMap.value = false;
|
|
unref(bigInformationDetailRef).initLatLon();
|
|
}
|
|
};
|
|
/*change后修改type，需通信*/
|
|
const changeTab = (type) => {
|
|
unref(iframeRef).contentWindow.postMessage(
|
|
JSON.stringify({
|
|
code: 'tabChange',
|
|
type: type,
|
|
}),
|
|
'*'
|
|
);
|
|
};
|
|
/*change后修改数据，需通信*/
|
|
// const changeData = (res) => {
|
|
// unref(iframeRef).contentWindow.postMessage(JSON.stringify({ code: 'dataList', type: res }), '*');
|
|
// };
|
|
|
|
// watch(loadingVisible, (nV, oV) => {
|
|
// console.log('watch===========================');
|
|
// console.log(nV);
|
|
// console.log(oV);
|
|
// nextTick(() => {
|
|
// unref(iframeRef).contentWindow.postMessage(JSON.stringify({ code: 'dataList', type: 'res' }), '*');
|
|
// });
|
|
// });
|
|
/*求助意见点击返回*/
|
|
const forHelp = (res) => {
|
|
forHelpAdvRef.value.showModal(res);
|
|
};
|
|
const forHelpDetail = (res) => {
|
|
detailRef.value.showDrawer(res);
|
|
};
|
|
const information = (res) => {
|
|
bigInformationRef.value.showDrawer(res);
|
|
};
|
|
/* 查询统计 */
|
|
const getStatInfo = () => {
|
|
getStatisticsApi()
|
|
.then((res) => {
|
|
stat.value = res;
|
|
})
|
|
.catch((e) => {
|
|
console.log(e);
|
|
});
|
|
};
|
|
getStatInfo();
|
|
/* 查询绘画列表 */
|
|
// const getSessionList = () => {
|
|
// getSessionListApi()
|
|
// .then((res) => {
|
|
// changeData(res.records);
|
|
// })
|
|
// .catch((e) => {
|
|
// console.log(e);
|
|
// });
|
|
// };
|
|
const endB = (item) => {
|
|
if (item.orderStatus === '3') return message.info('该应急单已经结束！');
|
|
createConfirm({
|
|
iconType: 'warning',
|
|
title: '结束应急',
|
|
content: '是否结束应急',
|
|
okText: '确认',
|
|
cancelText: '取消',
|
|
onOk: async () => {
|
|
try {
|
|
await endBApi({ id: item.orderId });
|
|
} catch (e) {
|
|
console.log(e);
|
|
}
|
|
},
|
|
});
|
|
};
|
|
window.onmessage = (msg) => {
|
|
const result = JSON.parse(msg.data);
|
|
console.log(result);
|
|
switch (result.code) {
|
|
case 'forHelp':
|
|
forHelp(result.userId);
|
|
break;
|
|
case 'forHelpDetail':
|
|
forHelpDetail(result.userId);
|
|
break;
|
|
case 'bigInformation':
|
|
information(result.userId);
|
|
break;
|
|
case 'closeLoading':
|
|
closeLoading();
|
|
break;
|
|
case 'endStatus':
|
|
endB(result.orderInfo);
|
|
break;
|
|
}
|
|
};
|
|
const closeLoading = () => {
|
|
loadingVisible.value = false;
|
|
};
|
|
defineExpose({
|
|
window,
|
|
forHelp,
|
|
});
|
|
</script>
|
|
<style scoped lang="less">
|
|
.outer {
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
background-color: #f2f2f2;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
.top-row {
|
|
padding: 10px;
|
|
background-color: #ffffff;
|
|
height: 60px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.bottom-row {
|
|
overflow: hidden;
|
|
margin-top: 1px;
|
|
min-height: 0;
|
|
height: calc(100% - 59px);
|
|
}
|
|
|
|
.button-o,
|
|
.button-t {
|
|
position: relative;
|
|
width: 120px;
|
|
height: 35px;
|
|
line-height: 35px;
|
|
border-radius: 10px;
|
|
border: 1px solid #d2d2d2;
|
|
text-align: center;
|
|
margin-right: 20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.choose-this {
|
|
color: #ffffff;
|
|
background-color: #466afb;
|
|
}
|
|
|
|
.number-d {
|
|
width: 20px;
|
|
height: 20px;
|
|
line-height: 20px;
|
|
background-color: red;
|
|
color: #ffffff;
|
|
position: absolute;
|
|
right: 5px;
|
|
top: 7.5px;
|
|
font-size: 9px;
|
|
border-radius: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.top-right-row {
|
|
display: inline;
|
|
margin-right: 40px;
|
|
|
|
> :nth-child(1) {
|
|
font-size: 10px;
|
|
}
|
|
|
|
> :nth-child(2) {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
</style>
|