update
init
This commit is contained in:
@@ -0,0 +1,278 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user