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>
    <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>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import titleContent from './TitleContent.vue';
import * as echarts from 'echarts';
import { getDataByArea } from '@/service/api/mapRequest';
import { stackRightOptions, stackLeftOptions } from '@/utils/chartsOptions.js';
const partitionData = ref({});

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

//分区看板
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;
    });
};
onMounted(() => {
  getLeftChartData();
  let xAxisData = [];
  const yAxisData = {
    data1: [],
    data2: [],
    data3: [],
    data4: []
  };

  for (let i = 0; i < 10; i++) {
    xAxisData.push('202' + i);
    yAxisData.data1.push(+(Math.random() * 2).toFixed(2));
    yAxisData.data2.push(+(Math.random() * 5).toFixed(2));
    yAxisData.data3.push(+(Math.random() + 0.3).toFixed(2));
    yAxisData.data4.push(+Math.random().toFixed(2));
  }
  initChart(rightChartId.value, stackRightOptions(xAxisData, yAxisData));
  initChart(leftChartId.value, stackLeftOptions(xAxisData, yAxisData));
});
</script>

<style lang="scss">
.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;
      }
    }
  }
}
</style>