|
|
@@ -13,69 +13,144 @@
|
|
|
<div class="charts-box" id="rightChartId" ref="rightChartId"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="title-box">
|
|
|
- <titleContent>发热门诊病例分区</titleContent>
|
|
|
- </div>
|
|
|
- <div class="partition-box">
|
|
|
- <div
|
|
|
- class="partition-card"
|
|
|
- v-for="(key, index) in Object.keys(partitionData)"
|
|
|
- :key="index + key + ''"
|
|
|
- >
|
|
|
- <div class="title">{{ key }}</div>
|
|
|
- <template v-for="(childKey, index1) in Object.keys(partitionData[key])" :key="index1">
|
|
|
- <template v-if="childKey == 'infection'">
|
|
|
- <div class="text-box">
|
|
|
- <span>传染病</span>
|
|
|
- <span class="num">{{ partitionData[key][childKey][0].num }}</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template v-else-if="childKey == 'fever'">
|
|
|
- <div class="text-box">
|
|
|
- <span>发热</span> <span class="num">{{ partitionData[key][childKey][0].num }}</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template v-else-if="childKey == 'fuzong'">
|
|
|
- <div class="text-box text-box-border">
|
|
|
- <span>腹综</span>
|
|
|
- <span class="num">{{ getSum(partitionData[key][childKey]) }}</span>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="text-box text-child-box"
|
|
|
- v-for="(item, index2) in partitionData[key][childKey]"
|
|
|
- :key="index2"
|
|
|
- >
|
|
|
- <span>{{ item.type }}</span>
|
|
|
- <span class="num">{{ partitionData[key][childKey][0].num }}</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template v-else-if="childKey == 'cold'">
|
|
|
- <div class="text-box">
|
|
|
- <span>感冒</span>
|
|
|
- <span class="num">{{ getSum(partitionData[key][childKey]) }}</span>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="text-box text-child-box"
|
|
|
- v-for="(item, index2) in partitionData[key][childKey]"
|
|
|
- :key="index2"
|
|
|
- >
|
|
|
- <span>{{ item.type }}</span>
|
|
|
- <span class="num">{{ partitionData[key][childKey][0].num }}</span>
|
|
|
- </div>
|
|
|
+ <template v-if="!mapStore.currentToolSelectArray.includes('Bidding')">
|
|
|
+ <div class="title-box">
|
|
|
+ <titleContent>发热门诊病例分区</titleContent>
|
|
|
+ </div>
|
|
|
+ <div class="partition-box">
|
|
|
+ <div
|
|
|
+ class="partition-card"
|
|
|
+ v-for="(key, index) in Object.keys(partitionData)"
|
|
|
+ :key="index + key + ''"
|
|
|
+ >
|
|
|
+ <div class="title">{{ key }}</div>
|
|
|
+ <template v-for="(childKey, index1) in Object.keys(partitionData[key])" :key="index1">
|
|
|
+ <template v-if="childKey == 'infection'">
|
|
|
+ <div class="text-box">
|
|
|
+ <span>传染病</span>
|
|
|
+ <span class="num">{{ partitionData[key][childKey][0].num }}</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="childKey == 'fever'">
|
|
|
+ <div class="text-box">
|
|
|
+ <span>发热</span> <span class="num">{{ partitionData[key][childKey][0].num }}</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="childKey == 'fuzong'">
|
|
|
+ <div class="text-box text-box-border">
|
|
|
+ <span>腹综</span>
|
|
|
+ <span class="num">{{ getSum(partitionData[key][childKey]) }}</span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="text-box text-child-box"
|
|
|
+ v-for="(item, index2) in partitionData[key][childKey]"
|
|
|
+ :key="index2"
|
|
|
+ >
|
|
|
+ <span>{{ item.type }}</span>
|
|
|
+ <span class="num">{{ partitionData[key][childKey][0].num }}</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="childKey == 'cold'">
|
|
|
+ <div class="text-box">
|
|
|
+ <span>感冒</span>
|
|
|
+ <span class="num">{{ getSum(partitionData[key][childKey]) }}</span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="text-box text-child-box"
|
|
|
+ v-for="(item, index2) in partitionData[key][childKey]"
|
|
|
+ :key="index2"
|
|
|
+ >
|
|
|
+ <span>{{ item.type }}</span>
|
|
|
+ <span class="num">{{ partitionData[key][childKey][0].num }}</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
</template>
|
|
|
- </template>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <div class="title-box">
|
|
|
+ <titleContent>病例列表</titleContent>
|
|
|
+ </div>
|
|
|
+ <div class="table-container">
|
|
|
+ <el-table
|
|
|
+ :data="mapStore.currentAllPointList"
|
|
|
+ @row-click="handleView"
|
|
|
+ @row-dblclick="handleDbView({ scoped })"
|
|
|
+ >
|
|
|
+ <el-table-column label="序号" align="center" type="index" width="50" />
|
|
|
+ <el-table-column
|
|
|
+ show-overflow-tooltip
|
|
|
+ align="center"
|
|
|
+ label="病例编号"
|
|
|
+ prop="blbh"
|
|
|
+ min-width="60"
|
|
|
+ >
|
|
|
+ <template #default="scope">
|
|
|
+ <div @click="clickBlbh(scope)" style="color: #1257bc">{{ scope.row.blbh }}</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column show-overflow-tooltip align="center" label="图标" prop="" min-width="60">
|
|
|
+ <template #default="scope">
|
|
|
+ <div
|
|
|
+ v-if="scope.row.ty == '无轨迹'"
|
|
|
+ class="point-box"
|
|
|
+ style="background: rgba(255, 127, 0, 0.8)"
|
|
|
+ ></div>
|
|
|
+ <div
|
|
|
+ v-if="scope.row.ty == '有轨迹'"
|
|
|
+ class="point-box"
|
|
|
+ style="background: rgba(0, 128, 255, 0.8)"
|
|
|
+ ></div>
|
|
|
+ <div
|
|
|
+ v-if="scope.row.ty == '无坐标'"
|
|
|
+ class="point-box"
|
|
|
+ style="background: rgba(248, 152, 152, 0.8)"
|
|
|
+ ></div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column show-overflow-tooltip label="疾病名称" prop="type" min-width="60">
|
|
|
+ <template #default="scope">
|
|
|
+ <span v-if="scope.row.type == 1">传染病</span>
|
|
|
+ <span v-if="scope.row.type == 2">发热</span>
|
|
|
+ <span v-if="scope.row.type == 3">腹综</span>
|
|
|
+ <span v-if="scope.row.type == 4">感冒</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column show-overflow-tooltip label="流调情况" prop="ty" min-width="60">
|
|
|
+ </el-table-column>
|
|
|
+ <!-- <el-table-column fixed="right" label="操作" min-width="40">
|
|
|
+ <template #default="scoped">
|
|
|
+ <el-button class="option-button" @click="handleView(scoped)" type="text"
|
|
|
+ >查看</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column> -->
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { onMounted, ref } from 'vue';
|
|
|
+import { computed, onMounted, ref } from 'vue';
|
|
|
import titleContent from './TitleContent.vue';
|
|
|
import * as echarts from 'echarts';
|
|
|
-import { getDataByArea, getHistogramData } from '@/service/api/mapRequest';
|
|
|
+import {
|
|
|
+ getDataByArea,
|
|
|
+ getHistogramData,
|
|
|
+ getTrajectorPointOnPeople,
|
|
|
+ getTrajectorPointOnPeopleById,
|
|
|
+ getCaseDetailsByBh,
|
|
|
+ getAllSaDian
|
|
|
+} from '@/service/api/mapRequest';
|
|
|
import { stackRightOptions, stackLeftOptions } from '@/utils/chartsOptions.js';
|
|
|
+import { useMapStore } from '@/stores/mapStore.js';
|
|
|
+import { useDrawPointStore } from '@/stores/drawPointManage.js';
|
|
|
+import { addPoint } from '@/utils/map/mapOperation.js';
|
|
|
const partitionData = ref({});
|
|
|
+const mapStore = useMapStore();
|
|
|
+const drawPointStore = useDrawPointStore();
|
|
|
|
|
|
const leftChartId = ref('');
|
|
|
const rightChartId = ref('');
|
|
|
@@ -153,6 +228,56 @@ const getBarData = async () => {
|
|
|
}
|
|
|
};
|
|
|
|
|
|
+const activeName = ref('1');
|
|
|
+
|
|
|
+const handleClick = () => {};
|
|
|
+
|
|
|
+const clickBlbh = async (scope) => {
|
|
|
+ try {
|
|
|
+ const row = scope.row;
|
|
|
+ const res = await getTrajectorPointOnPeopleById({
|
|
|
+ bh: row.blbh,
|
|
|
+ type: row.type
|
|
|
+ });
|
|
|
+ if (res.code == 200) {
|
|
|
+ } else {
|
|
|
+ console.log('获取病例详情数据错误');
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error);
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const handleView = (row) => {
|
|
|
+ if (row?.x && row?.y) {
|
|
|
+ let color = row.ty == '有轨迹' ? 'rgba(0, 128, 255, 0.5)' : 'rgba(255, 127, 0, 0.5)';
|
|
|
+ let borderColor = row.ty == '有轨迹' ? 'rgba(0, 128, 255, 0.9)' : 'rgba(255, 127, 0, 0.9)';
|
|
|
+ addPoint([{ x: row.x, y: row.y }], 'clickView', {
|
|
|
+ color: color,
|
|
|
+ borderColor: borderColor
|
|
|
+ });
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const handleDbView = async (scope) => {
|
|
|
+ try {
|
|
|
+ const row = scope.row;
|
|
|
+ const res = await getTrajectorPointOnPeopleById({
|
|
|
+ id: row.id
|
|
|
+ });
|
|
|
+ if (res.code == 200) {
|
|
|
+ drawPointStore.currentSelectName = row.name;
|
|
|
+ drawPointStore.currentSelectId = row.id;
|
|
|
+ drawPointStore.currentDrawPointList = res.data || [];
|
|
|
+ drawPointStore.openBiddingTable = true;
|
|
|
+ } else {
|
|
|
+ console.log('获取病例轨迹数据错误');
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error);
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
//分区看板
|
|
|
const getLeftChartData = async () => {
|
|
|
try {
|
|
|
@@ -205,13 +330,36 @@ const getSum = (numArr) => {
|
|
|
return pre + next;
|
|
|
});
|
|
|
};
|
|
|
+
|
|
|
+const getAllPoint = async () => {
|
|
|
+ try {
|
|
|
+ const res = await getAllSaDian();
|
|
|
+ if (res.code == 200) {
|
|
|
+ let arr = [];
|
|
|
+ Object.keys(res.data).forEach((key) => {
|
|
|
+ if (key == '有轨迹') {
|
|
|
+ arr = [...res.data[key], ...arr];
|
|
|
+ } else {
|
|
|
+ arr = [...arr, ...res.data[key]];
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ mapStore.currentAllPointList = arr;
|
|
|
+ } else {
|
|
|
+ throw 'getTrajectorPointOnPeople:error';
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error);
|
|
|
+ }
|
|
|
+};
|
|
|
onMounted(() => {
|
|
|
getLeftChartData();
|
|
|
getBarData();
|
|
|
+ getAllPoint();
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss">
|
|
|
+<style lang="scss" scoped>
|
|
|
.right-Panel-container {
|
|
|
.title-container {
|
|
|
background-image: url('@/assets/image/message-bg.png');
|
|
|
@@ -297,5 +445,73 @@ onMounted(() => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .table-container {
|
|
|
+ width: 100%;
|
|
|
+ height: 600px;
|
|
|
+ background: rgba(0, 0, 0, 0);
|
|
|
+ box-shadow: 0px 4px 5px #cccccc;
|
|
|
+ margin-top: 25px;
|
|
|
+ overflow: hidden;
|
|
|
+ .option-button {
|
|
|
+ width: 30px;
|
|
|
+ }
|
|
|
+ .top-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ padding-right: 20px;
|
|
|
+ span {
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .add-box {
|
|
|
+ width: 40px;
|
|
|
+ height: 30px;
|
|
|
+ margin-left: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ :deep(.el-table) {
|
|
|
+ height: calc(100% - 30px);
|
|
|
+ background: rgba(0, 0, 0, 0);
|
|
|
+ .cell {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ .el-table__cell {
|
|
|
+ padding: 5px 3px;
|
|
|
+ }
|
|
|
+ .el-button + .el-button {
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
+ tr,
|
|
|
+ td {
|
|
|
+ background-color: unset;
|
|
|
+ }
|
|
|
+
|
|
|
+ th {
|
|
|
+ background-color: rgba(90, 172, 255, 0.5);
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .table-row-head,
|
|
|
+ .table-row-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ align-items: center;
|
|
|
+ height: 25px;
|
|
|
+ font-size: 14px;
|
|
|
+ .table-td {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // .table-row-head {
|
|
|
+ // background-color: #dde2eb;
|
|
|
+ // }
|
|
|
+ .table-row-box {
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.point-box {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ border-radius: 50px;
|
|
|
}
|
|
|
</style>
|
citygis-lhh