DataCenter-gis/src/views/DataCenterGis/components/RightPanel.vue

<template>
  <div class="right-Panel-container">
    <div class="title-container">
      <span class="title-text">当日重点关注：发热门诊病历99例</span>
    </div>
    <div class="top-chart-container">
      <div class="chart-left-container">
        <titleContent>本市发热腹综情况</titleContent>
        <div class="charts-box" id="leftChartId" ref="leftChartId"></div>
      </div>
      <div class="chart-right-container">
        <titleContent>发热门诊、呼综情况</titleContent>
        <div class="charts-box" id="rightChartId" ref="rightChartId"></div>
      </div>
    </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 + ''"
          :class="{ activeCard: mapStore.selectPartKey == key }"
          @click="handleSelect(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][index2].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][index2].num }}</span>
              </div>
            </template>
          </template>
        </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"
        >
          <el-table-column show-overflow-tooltip align="left" label="" prop="" width="15">
            <template #default="scope">
              <div
                v-if="scope.row.ty == '无轨迹'"
                class="point-box"
                style="background: rgba(255, 127, 0, 0.4)"
              ></div>
              <div
                v-if="scope.row.ty == '有轨迹'"
                class="point-box"
                style="background: rgba(0, 128, 255, 0.4)"
              ></div>
              <div
                v-if="scope.row.ty == '无坐标'"
                class="point-box"
                style="background: rgba(248, 152, 152, 0.4)"
              ></div>
            </template>
          </el-table-column>
          <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 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 { watch, onMounted, ref } from 'vue';
import titleContent from './TitleContent.vue';
import * as echarts from 'echarts';
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,
  gotoPosition,
  regionZone,
  closePoint,
  fullExtent
} from '@/utils/map/mapOperation.js';
const partitionData = ref({});
const mapStore = useMapStore();
const drawPointStore = useDrawPointStore();

const leftChartId = ref('');
const rightChartId = ref('');
//初始化echarts图
const initChart = (chartDom, option) => {
  const myChart = echarts.init(chartDom);
  option && myChart.setOption(option);
};

const getBarData = async () => {
  try {
    const res = await getHistogramData();
    if (res.code == 200) {
      const data = res?.data || [];
      const dateArr = Object.keys(data);
      const data1 = dateArr.map((item) => {
        return { date: item, num: 0 };
      });
      const data2 = dateArr.map((item) => {
        return { date: item, num: 0 };
      });
      const data3 = dateArr.map((item) => {
        return { date: item, num: 0 };
      });
      const data4 = dateArr.map((item) => {
        return { date: item, num: 0 };
      });
      Object.values(data).forEach((item) => {
        item.forEach((element) => {
          if (element.type == '1') {
            data1.forEach((data) => {
              if (element.month == data.date) {
                data.num = element.num;
              }
            });
          } else if (element.type == '2') {
            data2.forEach((data) => {
              if (element.month == data.date) {
                data.num = element.num;
              }
            });
          } else if (element.type == '3') {
            data3.forEach((data) => {
              if (element.month == data.date) {
                data.num = element.num;
              }
            });
          } else if (element.type == '4') {
            data4.forEach((data) => {
              if (element.month == data.date) {
                data.num = element.num;
              }
            });
          }
        });
      });

      const yAxisData = {
        data1: Object.values(data1).map((item) => item.num),
        data2: Object.values(data2).map((item) => item.num),
        data3: Object.values(data3).map((item) => item.num),
        data4: Object.values(data4).map((item) => item.num)
      };
      const line = yAxisData.data1.map((item, index) => {
        return (
          (item + yAxisData.data2[index] + yAxisData.data3[index] + yAxisData.data4[index]) / 4
        );
      });
      yAxisData.line = line;
      initChart(rightChartId.value, stackRightOptions(dateArr, yAxisData));
      initChart(leftChartId.value, stackLeftOptions(dateArr, yAxisData));
    }
  } catch (error) {
    console.log(error);
  }
};

const clickBlbh = async (scope) => {
  try {
    const row = scope.row;
    const res = await getCaseDetailsByBh({
      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.8)' : 'rgba(255, 127, 0, 0.8)';
    let borderColor = row.ty == '有轨迹' ? 'rgba(0, 128, 255, 1)' : 'rgba(255, 127, 0, 1)';
    addPoint([row], 'clickView', {
      color: color,
      borderColor: borderColor
    });
  }
};

const selectPartKey = ref('');
//选择区
const handleSelect = (key) => {
  closePoint('cityLine');
  if (mapStore.selectPartKey == key) {
    mapStore.selectPartKey = '';
    fullExtent();
    return;
  }
  mapStore.selectPartKey = key;
  if (key == '浦东新区') {
    regionZone('浦东新区');
  } else {
    regionZone(key);
  }
};

const handleDbView = async (row) => {
  try {
    if (row?.x && row?.y) {
      let color = row.ty == '有轨迹' ? 'rgba(0, 128, 255, 0.8)' : 'rgba(255, 127, 0, 0.8)';
      gotoPosition(row, color);
    }
    //有轨迹就有id，无轨迹无id，此时将编号作为id
    if (row?.id) {
      const res = await getTrajectorPointOnPeopleById({
        id: row?.id
      });
      if (res.code == 200) {
        drawPointStore.currentSelectName = row.name;
        drawPointStore.currentSelectId = row.id;
        drawPointStore.currentSelectCode = row.code;
        drawPointStore.currentDrawPointList = res.data || [];
        drawPointStore.openBiddingTable = true;
      } else {
        console.log('获取病例轨迹数据错误');
      }
    } else {
      drawPointStore.currentSelectName = row.name;
      drawPointStore.currentSelectId = row.blbh;
      drawPointStore.currentSelectCode = row.blbh;
      drawPointStore.currentDrawPointList = [];
      drawPointStore.openBiddingTable = true;
    }
  } catch (error) {
    console.log(error);
  }
};

//分区看板
const getLeftChartData = async () => {
  try {
    const res = await getDataByArea();
    if (res.code == 200 && res.data) {
      //重塑数据结构

      Object.keys(res.data).forEach((key) => {
        if (res.data && res.data[key]) {
          res.data[key].forEach((item) => {
            if (!partitionData.value[key]) {
              partitionData.value[key] = {};
            }
            let keyName;
            if (item.diseaseType == '1') {
              //传染病
              keyName = 'infection';
            } else if (item.diseaseType == '2') {
              //发热
              keyName = 'fever';
            } else if (item.diseaseType == '3') {
              //腹宗
              keyName = 'fuzong';
            } else if (item.diseaseType == '4') {
              //感冒
              keyName = 'cold';
            }
            if (keyName) {
              if (!partitionData.value[key][keyName]) {
                partitionData.value[key][keyName] = [];
              }
              partitionData.value[key][keyName].push(item);
            }
          });
        }
      });
      console.log(partitionData.value);
    } else {
      console.log(res.msg || 'getDataByArea:error');
    }
  } catch (error) {
    console.log(error);
  }
};

//求和
const getSum = (numArr) => {
  return numArr
    .map((item) => item.num)
    .reduce((pre, next) => {
      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" scoped>
.right-Panel-container {
  .title-container {
    background-image: url('@/assets/image/message-bg.png');
    margin-top: 67px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-size: 100% 100%;
    width: 703px;
    height: 50px;
    .title-text {
      font-weight: bold;
      font-size: 18px;
      color: #ffffff;
      line-height: 29px;
      padding-left: 15px;
    }
  }

  .top-chart-container {
    display: flex;
    justify-content: space-between;
    padding-top: 36px;
    .chart-left-container,
    .chart-right-container {
      width: calc(50% - 30px);
      .charts-box {
        width: 100%;
        height: 175px;
        margin-top: 30px;
      }
    }
  }
  .title-box {
    width: calc(50% - 10px);
    margin-top: 20px;
  }
  .partition-box {
    display: flex;
    justify-content: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
    height: 621px;
    overflow-y: auto;
    padding-top: 29px;
    gap: 24px;
    scrollbar-width: none;
    .partition-card {
      width: 162px;
      background-image: url('@/assets/image/normal-bg.png');
      background-repeat: no-repeat;
      background-size: 100% 60px;
      margin-bottom: 5%;
      .title {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #0080ff;
        line-height: 32px;
        font-style: italic;
        padding-left: 14px;
        position: relative;
        top: -13px;
      }
      .text-box {
        color: #585858;
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        padding: 5px 5px 0 9px;

        .num {
          color: #0080ff;
          font-size: 16px;
        }
      }
      .text-box-border {
        border-bottom: 1px solid #0080ff;
      }
      .text-child-box {
        padding-left: 20px;
      }
    }
    .activeCard {
      background-image: url('@/assets/image/red-bg.png');
      .title {
        color: rgb(253, 1, 0);
      }
      .text-box {
        .num {
          color: rgb(253, 1, 0);
        }
      }
      .text-box-border {
        border-bottom: 1px solid rgb(253, 1, 0);
      }
    }
  }
  .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;
    }
    :deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
      background-color: rgba(90, 172, 255, 0.2);
      color: #1257bc;
    }
    .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>

<style lang="scss">
.bigSize {
  .right-Panel-container {
    .title-container {
      .title-text {
        font-size: 22px;
      }
    }
    .partition-box {
      scrollbar-width: none;
      .partition-card {
        .title {
          font-size: 20px;
        }
        .text-box {
          font-size: 18px;
          .num {
            font-size: 20px;
          }
        }
      }
    }
    .table-container {
      .table-row-head,
      .table-row-box {
        font-size: 18px;
      }
      .el-table {
        .cell {
          font-size: 16px;
        }
      }
    }
  }
}

.veryBigSize {
  .right-Panel-container {
    .title-container {
      .title-text {
        font-size: 25px;
      }
    }
    .partition-box {
      scrollbar-width: none;
      .partition-card {
        .title {
          font-size: 24px;
        }
        .text-box {
          font-size: 22px;
          .num {
            font-size: 24px;
          }
        }
      }
    }
    .table-container {
      .table-row-head,
      .table-row-box {
        font-size: 22px;
      }
      .el-table {
        .cell {
          font-size: 20px;
        }
      }
    }
  }
}
</style>