xj-screen/src/views/indexSon.vue

<template>
  <div class="outer">
    <div class="title-d">
      <div class="title-d-left">
                <span style="cursor: pointer" @click="clickBack">
                    <a-space>
                        <rollback-outlined/>
                    </a-space>
                    返回
                </span>
      </div>
      <div class="title-d-middle"> 应急就医服务中心</div>
      <div class="title-d-right"> 累计运行时间：{{ dayTimeT }}</div>
    </div>
    <div class="body-d">
      <div class="body-d-left">
        <PieCharts/>
      </div>
      <div class="body-d-middle">
        <SecondMap>
          <template #rightForm>
            <a-select
                placeholder="选择单位"
                v-model:value="orgCode"
                class="type-select"
                :options="option"
                :fieldNames="fieldNames"
            ></a-select>
            <a-select placeholder="选择时间范围" v-model:value="type" class="type-select"
                      :options="timeRangeOption"></a-select>
          </template>
        </SecondMap>
      </div>
      <div class="body-d-right">
        <one-r/>
        <two-r/>
        <three-r/>
      </div>
    </div>
    <div class="bottom-d"></div>
  </div>
</template>
<script setup lang="ts">
import {RollbackOutlined} from '@ant-design/icons-vue';
import {ref} from 'vue';
import OneR from '/@/components/secondaryScreen/screen-right/oneR.vue';
import TwoR from '/@/components/secondaryScreen/screen-right/twoR.vue';
import ThreeR from '/@/components/secondaryScreen/screen-right/threeR.vue';
import SecondMap from '/@/components/secondaryScreen/secondMap/secondMap';
import PieCharts from '/@/components/secondaryScreen/screen-left/PieCharts.vue'
import router from '/@/router';
import ItemD from '/@/components/item-d/item-d.vue';
import {useDepart, useTimeType} from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';
import {useTopTime} from '/@/utils/utils.ts';

const dayTimeT = ref();


function init() {
  getTime();
  setInterval(() => {
    getTime();
  }, 1000);
}

init();

function getTime() {
  const {timeRight} = useTopTime();
  dayTimeT.value = timeRight;
}

function clickBack() {
  router.go(-1);
}

const {orgCode, option, fieldNames} = useDepart({});
const {type, timeRangeOption} = useTimeType('week');
</script>
<style lang="less" scoped>
.outer {
  height: 100%;
  box-sizing: border-box;
  background: url('../assets/images/bg.png') no-repeat;
  background-size: 100% 100%;
}

.title-d {
  height: 80px;
  line-height: 80px;
  display: flex;
  padding-bottom: 9px;
  background: url('../assets/images/top-title.png') no-repeat;
  background-size: 100% 100%;

  .title-d-left,
  .title-d-middle,
  .title-d-right {
    font-size: 27px;
    color: #ffffff;
    line-height: 60px;
    text-align: center;
  }

  .title-d-left {
    text-align: left !important;
    padding-left: 80px;
  }

  > :nth-child(1) {
    width: 29%;
  }

  > :nth-child(2) {
    width: 42%;
    font-size: 40px;
    font-weight: bold;
  }

  > :nth-child(3) {
    width: 29%;
  }
}

.body-d {
  display: flex;
  height: calc(100% - 120px);
  //padding-top: 10px;

  > :nth-child(1) {
    width: 25%;
  }

  > :nth-child(2) {
    width: 50%;
  }

  > :nth-child(3) {
    width: 25%;
  }

  .body-d-left,
  .body-d-right {
    text-align: center;
  }

  .body-d-right {
    > :nth-child(1) {
      width: 100%;
      height: calc(100% / 4);
      max-height: calc(100% / 4);
      padding: 10px;
    }

    > :nth-child(2) {
      width: 100%;
      height: calc(100% / 4);
      max-height: calc(100% / 4);
      padding: 10px;
    }

    > :nth-child(3) {
      width: 100%;
      height: calc(100% / 2);
      padding: 10px;
    }
  }

  .body-d-left {
    > :nth-child(n) {
      width: 100%;
      height: calc(100% / 4);
      padding: 10px;
    }
  }

  .body-d-middle {
    display: flex;
    flex-direction: column;
  }

  .type-select {
    width: 120px;
    color: #008cff;
    margin-right: 10px;
  }
}

.bottom-d {
  height: 40px;
  background: url('../assets/images/bottom-b.png') no-repeat;
  background-size: 100% 100%;
}
</style>