dvcp_v2_webapp/project/biaopin/dv/weiyang/AppDvWeiyang.vue

<script>
import {mapState} from "vuex"
import SubHeader from "./comps/subHeader.vue";
import IconStaPanel from "./comps/iconStaPanel.vue";
import IconSmallPanel from "./comps/iconSmallPanel.vue";
import ValueUnit from "./comps/valueUnit.vue";
import ChargingPercent from "./comps/chargingPercent.vue";

export default {
  name: "AppDvWeiyang",
  components: {ChargingPercent, ValueUnit, IconSmallPanel, IconStaPanel, SubHeader},
  label: "未央最新定制大屏",
  props: {
    instance: Function,
    dict: Object,
    menuName: {default: '未央最新定制大屏'}
  },
  data() {
    return {
      areaId: ""
    }
  },
  computed: {
    ...mapState(["user"]),
    currentAreaId: v => v.areaId || v.user.info.areaId,
    isLastAreaLevel: v => !/0{3}$/.test(v.currentAreaId),
    areaSta: v => [
      {label: "社区数", icon: "https://cdn.sinoecare.com/i/2024/09/04/66d80346ec1ea.png", value: 0, unit: "个"},
      {label: "小区数", icon: "https://cdn.sinoecare.com/i/2024/09/04/66d7fd4c0445d.png", value: 0, unit: "个"},
      {label: "村数", icon: "https://cdn.sinoecare.com/i/2024/09/04/66d7fd4d28f1b.png", value: 0, unit: "个"},
    ],
    workorderSta: v => [
      {label: "已处理", value: 0, unit: "个"},
      {label: "办理中", value: 0, unit: "个"},
      {label: "待受理", value: 0, unit: "个"},
      {label: "延期", value: 0, unit: "个", isRed: !0},
    ]
  },
  methods: {
    getData() {

    },
    getLabel(key) {
      return this.dict.getLabel("wyBasicCount", key) || key
    }
  },
  created() {
    this.dict.load("wyBasicCount")
    this.getData()
  }
}
</script>

<template>
  <section class="AppDvWeiyang" :class="{isLastAreaLevel}">
    <template v-if="isLastAreaLevel">
      <icon-sta-panel class="a" :label="getLabel('党组织数')" :value="0" unit="人" icon=""/>
      <div class="a1"></div>
      <div class="b"></div>
      <div class="bb grid">
        <div class="item" v-for="(e,i) in Array(4)" :key="i"></div>
      </div>
      <div class="b2"></div>
      <div class="cc grid">
        <div class="item" v-for="(e,i) in Array(3)" :key="i"></div>
      </div>
      <div class="d"></div>
      <div class="e"></div>
      <div class="f"></div>
      <div class="g"></div>
      <div class="h"></div>
      <div class="i"></div>
      <div class="j"></div>
    </template>
    <template v-else>
      <icon-sta-panel class="a pad-24" :label="getLabel('党组织数')" :value="0" unit="人" icon="https://cdn.sinoecare.com/i/2024/09/04/66d7cd06f269b.png"/>
      <icon-sta-panel class="a1 pad-24" :label="getLabel('党员人数')" :value="0" unit="人" icon="https://cdn.sinoecare.com/i/2024/09/04/66d7cd0560bea.png"/>
      <div class="b pad-l16 pad-r12 pad-v6">
        <icon-small-panel v-for="(e,i) in areaSta" :key="i" v-bind="e"/>
      </div>
      <div class="b1 pad-v10 pad-h20">
        <icon-sta-panel :label="getLabel('居民人数')" :value="0" unit="人" icon="https://cdn.sinoecare.com/i/2024/09/04/66d7cd083a9b0.png"/>
        <div class="flex staPercent">
          <div class="flex fill">月环比<p v-text="0"/></div>
          <div class="flex fill">年同比<p class="minus" v-text="0"/></div>
        </div>
      </div>
      <div class="b2"></div>
      <div class="c flex column center">
        <div class="mar-b40" v-text="'工单处置率'"/>
        <charging-percent label="已完成工单" :value="80"/>
      </div>
      <div class="c1 grid">
        <icon-small-panel class="item row pad-h16" :label="getLabel('工单总数')" :value="0" unit="个"/>
        <div class="item pad-v12 flex column center" v-for="(e,i) in workorderSta" :key="i" :class="{isRed:e.isRed}">
          <div v-text="e.label"/>
          <value-unit :value="e.value" :unit="e.unit" size="mini"/>
        </div>
      </div>
      <div class="d"></div>
      <div class="e">
        <sub-header title="五条工作链"/>
      </div>
      <div class="f"></div>
      <div class="g">
        <sub-header title="工单分类"/>
      </div>
      <div class="h">
        <sub-header title="全区积分排名(前10)"/>
      </div>
      <div class="i">
        <sub-header title="居民统计">
          <div class="info pad-r8" slot="right" v-text="`按街道进行汇总统计`"/>
        </sub-header>
      </div>
      <div class="j">
        <sub-header title="特殊人群数量统计"/>
      </div>
    </template>
  </section>
</template>
<style lang="scss">
.AiDvWrapper {
  .viewPanel {
    background-image: url("https://cdn.sinoecare.com/i/2024/09/03/66d6a644bcc6e.png");
  }
}
</style>
<style scoped lang="scss">
.AppDvWeiyang {
  font-size: 14px;
  color: #fff;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(8, 1fr);
  padding: 16px 0;
  grid-auto-rows: 128px;
  grid-template-areas:
  "a a1 b b1 b2 b2 c c1"
  "e e f f f f c c1"
  "e e f f f f g g"
  "e e f f f f g g"
  "e e f f f f g g"
  "h h i i j j g g"
  "h h i i j j g g";

  &.isLastAreaLevel {
    grid-template-areas:
    "a a1 b bb b2 b2 cc cc"
    "e e f f f f g g"
    "e e f f f f g g"
    "j j f f f f g g"
    "j j f f f f g g"
    "h h i i i i g g"
    "h h i i i i g g";

    .bb {
      gap: 10px;
      grid-template-columns: repeat(2, 1fr);
    }

    .cc {
      grid-area: cc;
      gap: 10px;
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .item {
    background: #7583900f;
    backdrop-filter: blur(8px);
  }

  @each $area in (a, a1, b, b1, b2, c, c1, c2, d, e, f, g, h, i, j) {
    .#{$area} {
      grid-area: $area;
      @if not index((c1),$area) {
        @extend .item;
      }
    }
  }

  .c1 {
    gap: 10px;
    grid-template-columns: repeat(2, 1fr);

    .row {
      grid-column: 1/3
    }
  }

  .info {
    font-size: 12px;
    color: #BDCCDB;
  }

  .staPercent {
    margin-top: 9px;
    line-height: 40px;
    font-size: 12px;

    p {

      font-size: 16px;
      color: #26FF9A;
      display: flex;
      align-items: center;
      font-family: DINAlternate;

      &:before {
        margin-left: 8px;
        margin-right: 2px;
        font-size: 10px;
        content: "▲";
      }

      &:after {
        content: "%";
      }

      &.minus {
        color: #FF2727;

        &:before {
          content: "▼";
        }
      }
    }
  }

  .isRed {
    background: #fa35351a;
    border: 1px solid #f76e6e52;

    :deep(.valueUnit) {
      color: #FF2727;
    }
  }
}
</style>