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";
import AiEchart from "dui/packages/tools/AiEchart.vue";
import NavTabs from "./comps/navTabs.vue";

const handlePercent = v => parseFloat(isNaN(v) ? 0 : v.toFixed(2))
const calcComparePercent = (v = 1, target = 1) => {
  const value = (v - target) / target * 100
  return handlePercent(value)
}
const hide = {show: false}
const aiTrend = {
  series: {
    type: "bar", barWidth: 12, itemStyle: {
      color: {
        type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [
          {offset: 0, color: "#00EFFF"},
          {offset: 1, color: "#00527D"},
        ]
      }
    }, encode: {x: 'd', y: 'c'}
  },
  yAxis: {type: "value", axisLabel: hide, axisLine: hide, splitLine: hide},
  xAxis: {type: "category", axisLabel: hide, axisLine: {itemStyle: {color: 'rgba(179,223,255,0.4)'}}},
  legend: {show: false},
  grid: {left: 0, right: 0, bottom: 1, top: 0, containLabel: true},
}
const workChain = {
  series: Array(5).fill({type: "bar"}),
  yAxis: {type: "category"},
  xAxis: {show: false, type: "value"}
}
const residentDistribution = {
  series: {
    type: "bar", barWidth: 12, itemStyle: {
      color: {
        type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [
          {offset: 0, color: "#00EFFF"},
          {offset: 1, color: "#00527D"},
        ]
      }
    },
    encode: {x: 'name', y: 'c'}
  },
  yAxis: {type: "value", axisLine: {show: false}, splitLine: {lineStyle: {type: 'dashed', color: 'rgba(61,82,102,0.65)'}}},
  xAxis: {type: "category", axisTick: {show: false}, axisLabel: {rotate: 45}},
  grid: {left: 12, right: 12, top: 20, bottom: 0, containLabel: true},
  legend: {show: false},
}
export default {
  name: "AppDvWeiyang",
  components: {NavTabs, AiEchart, ChargingPercent, ValueUnit, IconSmallPanel, IconStaPanel, SubHeader},
  label: "未央最新定制大屏",
  props: {
    instance: Function,
    dict: Object,
    menuName: {default: '未央最新定制大屏'}
  },
  data() {
    return {
      areaId: "",
      integralOrderType: "",
      sta: {},
      chartData: {}
    }
  },
  computed: {
    ...mapState(["user"]),
    currentAreaId: v => v.areaId || v.user.info.areaId,
    isLastAreaLevel: v => !/0{3}$/.test(v.currentAreaId),
    areaSta: v => [
      {label: "社区数", icon: "66d80346ec1ea", prop: "communityCount", unit: "个"},
      {label: "小区数", icon: "66d7fd4c0445d", prop: "residentialQuartersCount", unit: "个"},
      {label: "村数", icon: "66d7fd4d28f1b", prop: "villageCount", unit: "个"},
    ].map(e => ({...e, label: v.getLabel(e.prop), value: v.sta[e.prop] || 0, icon: `https://cdn.sinoecare.com/i/2024/09/04/${e.icon}.png`})),
    workorderSta: v => [
      {label: "已处理", prop: 'workOrderCountFinishNowMonth', unit: "个"},
      {label: "办理中", prop: 'workOrderCountProcessingNowMonth', unit: "个"},
      {label: "待受理", prop: 'workOrderCountPendingNowMonth', unit: "个"},
      {label: "延期", prop: 'workOrderCountExtensionNowMonth', unit: "个", isRed: !0},
    ].map(e => ({...e, label: v.getLabel(e.prop), value: v.sta[e.prop] || 0})),
    workorderTable: v => ({
      header: ['时间', '状态', '事件描述'],
      headerBGC: '#21b4fd1a',
      oddRowBGC: "transparent",
      evenRowBGC: "transparent",
      data: []
    }),
    tabs: v => v.$dict.getDict("wyIntegralOrderType").map(e => {
      return {
        label: e.dictName,
        value: e.dictValue
      }
    }),
    monthOnMonth: v => calcComparePercent(v.sta.residentCountLastMonth, v.sta.residentCount),
    yearOnYear: v => calcComparePercent(v.sta.residentCountLastYear, v.sta.residentCount),
    workorderFinishedPercent: v => handlePercent(v.sta.workOrderCountFinish / v.sta.workOrderCount * 100),
    chart: v => {
      return {aiTrend, workChain, residentDistribution}
    },
  },
  methods: {
    getData() {
      const {instance: http, currentAreaId: areaId, integralOrderType} = this
      return Promise.all([
        http.post("/app/wyDiy/pvr", null, {params: {areaId}}).then(res => {
          if (res?.data) {
            this.sta = res.data
          }
        }),
        http.post("/app/wyDiy/aiTrend", null, {params: {areaId}}).then(res => {
          if (res?.data) {
            this.$set(this.chartData, "aiTrend", res.data.map(e => [e.d, e.c]))
          }
        }),
        http.post("/app/wyDiy/integralOrder", null, {params: {areaId, type: integralOrderType}}).then(res => {
          if (res?.data) {

          }
        }),
        http.post("/app/wyDiy/residentDistribution", null, {params: {areaId}}).then(res => {
          if (res?.data) {
            this.$set(this.chartData, "residentDistribution", res.data)
          }
        }),
        http.post("/app/wyDiy/spDistribution", null, {params: {areaId}}).then(res => {
          if (res?.data) {

          }
        }),
        http.post("/app/wyDiy/workChain", null, {params: {areaId}}).then(res => {
          if (res?.data) {

          }
        }),
        http.post("/app/wyDiy/wotDistribution", null, {params: {areaId}}).then(res => {
          if (res?.data) {

          }
        }),
      ])
    },
    getLabel(key) {
      return this.dict.getLabel("wyBasicCount", key) || key
    }
  },
  created() {
    this.dict.load("wyBasicCount", "wyIntegralOrderType")
    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('partyOrgCount')" :value="sta.partyOrgCount" unit="人" icon="https://cdn.sinoecare.com/i/2024/09/04/66d7cd06f269b.png"/>
      <icon-sta-panel class="a1 pad-24" :label="getLabel('partyCount')" :value="sta.partyCount" 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('residentCount')" :value="sta.residentCount" unit="人" icon="https://cdn.sinoecare.com/i/2024/09/04/66d7cd083a9b0.png"/>
        <div class="flex staPercent">
          <div class="flex fill">月环比<p :class="{minus:monthOnMonth<0}" v-text="monthOnMonth"/></div>
          <div class="flex fill">年同比<p :class="{minus:yearOnYear<0}" v-text="yearOnYear"/></div>
        </div>
      </div>
      <div class="b2 pad-v8 pad-h12 flex column normal font-12">
        <div v-text="getLabel('aiCount')"/>
        <value-unit :value="sta.aiCount" unit="次" color="#fff"/>
        <ai-echart :ops="chart.aiTrend" :data="chartData.aiTrend"/>
        <div class="flex">
          {{ getLabel('aiCountLastDay') }}
          <value-unit class="mar-l8" :value="sta.aiCountLastDay" unit="次" size="mini"/>
        </div>
      </div>
      <div class="c flex column center">
        <div class="mar-b40" v-text="'工单处置率'"/>
        <charging-percent label="已完成工单" :value="workorderFinishedPercent"/>
      </div>
      <div class="c1 grid">
        <icon-small-panel class="item row pad-h16" :label="getLabel('workOrderCountNowMonth')" :value="sta.workOrderCountNowMonth" 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 flex column normal">
        <sub-header title="五条工作链"/>
        <ai-echart/>
      </div>
      <div class="f"></div>
      <div class="g flex column normal">
        <sub-header title="工单分类"/>
        <ai-echart/>
        <dv-scroll-board class="pad-h12" :config="workorderTable"/>
      </div>
      <div class="h flex column normal">
        <sub-header title="全区积分排名(前10)">
          <nav-tabs class="pad-r8" slot="right" :list="tabs" @click="s=>integralOrderType=s.value"/>
        </sub-header>
        <ai-echart/>
      </div>
      <div class="i flex column normal">
        <sub-header title="居民统计">
          <div class="info pad-r8" slot="right" v-text="`按街道进行汇总统计`"/>
        </sub-header>
        <ai-echart :ops="chart.residentDistribution" :data="chartData.residentDistribution"/>
      </div>
      <div class="j flex column normal">
        <sub-header title="特殊人群数量统计"/>
        <ai-echart/>
      </div>
    </template>
  </section>
</template>
<style lang="scss">
.AiDvWrapper {
  .viewPanel {
    background-image: url("https://cdn.sinoecare.com/i/2024/09/03/66d6a644bcc6e.png");

    & > .primary, & > .fill {
      padding: 0 24px !important;
    }
  }
}
</style>
<style scoped lang="scss">
.AppDvWeiyang {
  font-size: 14px;
  color: #fff;
  display: grid;
  gap: 10px;
  padding: 16px 0;
  grid-auto-rows: 128px;
  grid-template-columns: 245px 245px 240px 240px 180px 180px 230px 1fr;
  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;
    white-space: nowrap;

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

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

      &:after {
        font-size: 12px;
        content: "%";
      }

      &.minus {
        color: #FF2727;

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

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

    :deep(.valueUnit) {
      color: #FF2727;
    }
  }

  @each $s in (12, 14, 16, 20, 24, 36) {
    .font-#{$s} {
      font-size: #{$s}px;
    }
  }
}
</style>