目录代码整合

packages/grid/AppBuildMap/toolBar/buildingInfo.vue

@@ -0,0 +1,239 @@
+<template>
+  <section class="buildingInfo">
+    <ai-title title="人口信息"/>
+    <div class="infoPane">
+      <div class="staZone">
+        <div v-for="(value, name) in staData" :key="name">
+          <b>{{ value }}</b>
+          <span>{{ name }}</span>
+        </div>
+      </div>
+    </div>
+    <ai-title title="房屋信息"/>
+    <div class="infoPane">
+      <el-row type="flex" justify="space-between" class="info-item">
+        <span>所属社区</span>
+        <span>{{build.areaName}}</span>
+      </el-row>
+      <el-row type="flex" justify="space-between" class="info-item">
+        <span>所属小区</span>
+        <span>{{build.communityName}}</span>
+      </el-row>
+      <el-row type="flex" justify="space-between" class="info-item">
+        <span>房屋类型</span>
+        <span>{{root.dict.getLabel("communityBuildingType",build.buildingType)}}</span>
+      </el-row>
+      <el-row type="flex" justify="space-between" class="info-item">
+        <span>楼长姓名</span>
+        <span>{{build.managerName}}</span>
+      </el-row>
+      <el-row type="flex" justify="space-between" class="info-item">
+        <span>联系方式</span>
+        <span>{{build.managerPhone}}</span>
+      </el-row>
+    </div>
+  </section>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  name: "buildingInfo",
+  inject: ['root', 'sta'],
+  computed: {
+    chartData() {
+      return this.root.dict.getDict("residentTipType").map(e => ({
+        name: e.dictName,
+        key: e.dictValue,
+        color: e.dictColor,
+        v1: 0
+      }))
+    },
+    colConfigs() {
+      return [
+        {prop:"areaName",label:"所属社区"}
+      ];
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      staData: {},
+      tag:{},
+      color:{},
+      build:{},
+    }
+  },
+  methods: {
+    initChart(data) {
+      this.chart = echarts.init(document.getElementById("PersonStaChart"))
+      let selected = {}, color = []
+      this.chartData.map(e => {
+        selected[e.name] = false
+        color.push(e.color)
+      })
+      this.chart.setOption({
+        grid: {top: 31, right: 0, height: 135},
+        tooltip: {},
+        legend: {
+          top: 185,
+          left: 0,
+          orient: "vertical",
+          selected,
+          itemWidth: 14,
+          itemHeight: 14,
+          itemGap: 12,
+          icon: "rect",
+          formatter: name => {
+            let item = data.find(e => this.root.dict.getLabel('residentTipType', e.name) == name)
+            return `{a|${name}}  {b|${item.v1}}`
+          },
+          textStyle: {
+            rich: {
+              a: {color: "#666", width: 123},
+              b: {color: "#333", fontWeight: 'bold', align: 'right'}
+            }
+          }
+        }, color,
+        yAxis: {type: 'value', min: 0, minInterval: 1, axisTick: false, axisLine: false, axisLabel: {color: "#666"}},
+        xAxis: {type: 'category', axisTick: false, axisLine: false, axisLabel: false},
+        series: data.map(e => ({
+          type: 'bar',
+          barWidth: 8,
+          barGap: '250%',
+          name: this.root.dict.getLabel('residentTipType', e.name)
+        }))
+      })
+      this.chart.on('legendselectchanged', ({selected}) => {
+        let tips = Object.keys(selected)?.filter(e => selected[e])?.map(e => this.root.dict.getValue('residentTipType', e))
+        this.sta?.selectedTips(tips)
+      })
+      this.getChartData(data)
+    },
+    getChartData(data) {
+      this.chart?.setOption({
+        series: data.map(e => ({data: [e.v1]}))
+      })
+    }
+  },
+  created(){
+    this.root.dict?.load("communityBuildingType")
+  },
+  mounted() {
+    this.root.instance.post("/app/appcommunitybuildinginfo/statistics", null, {
+      params: {
+        id: this.root.isFormDv ? this.root.info.id : this.$route.query.buildingId,
+        unitNum: this.root.isFormDv ? this.root.info.unitNumber : this.$route.query.unitNum,
+      }
+    }).then(res => {
+      if (res?.data) {
+        this.staData = res.data.unit;
+        this.tag = res.data.tag;
+        this.color = res.data.color;
+        this.build = res.data.build;
+        // this.root.dict.load('residentTipType').then(() => {
+        //   this.initChart(res.data.lx)
+        // })
+      }
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.buildingInfo {
+  ::v-deep .infoPane {
+    box-sizing: border-box;
+    padding: 10px 20px;
+
+    .info-item{
+      height: 32px;
+      box-sizing: border-box;
+      padding: 0 12px;
+      font-size: 12px;
+      color: #666666;
+      align-items: center;
+
+      span:last-child{
+        color: #333333;
+      }
+
+      &:nth-child(2n-1){
+        background-color: #F3F6F9;
+      }
+    }
+
+    .static-wrap{
+      width: 360px;
+      box-sizing: border-box;
+      padding-top: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex-wrap: wrap;
+
+      .sta-item{
+        width: 46%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 8px;
+
+        .sta-left{
+          display: flex;
+          align-items: center;
+          .tag{
+            width: 14px;
+            height: 14px;
+            background: #DC1739;
+            border-radius: 2px;
+            margin-right: 3px;
+          }
+          & > label{
+            font-size: 12px;
+            color: #666666;
+          }
+        }
+        .num{
+          font-size: 12px;
+          color: #333333;
+        }
+      }
+    }
+    .staZone {
+      height: 80px;
+      background: #F5F7F9;
+      border-radius: 4px;
+      overflow: hidden;
+      display: flex;
+
+      & > div {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+        font-size: 12px;
+        color: #333;
+
+        b {
+          font-size: 24px;
+          font-family: DINAlternate-Bold, DINAlternate,serif;
+          color: #2266FF;
+          margin-bottom: 4px;
+        }
+      }
+
+
+    }
+
+    #PersonStaChart {
+      width: 100%;
+      height: 350px;
+    }
+  }
+}
+</style>

packages/grid/AppBuildMap/toolBar/communityOverview.vue

@@ -0,0 +1,116 @@
+<template>
+  <section class="communityOverview">
+    <ai-title title="小区总览"/>
+    <div class="units" v-if="Object.keys(buildingUnits).length>0">
+      <div class="building" v-for="(value,name) in buildingUnits" :key="name">
+        <div class="unit" v-for="(op,j) in value" :key="j" @click="sta.selectedBuilding(op,j+1)"
+             :class="{selected:sta.unitNumber==j+1 && sta.currentBuilding.buildingNumber==name}">
+          <b>{{ name}}栋</b>
+          <div>{{ j+1 }}单元</div>
+        </div>
+      </div>
+    </div>
+    <AiEmpty v-else>暂无楼栋信息,请进入【楼栋管理】添加</AiEmpty>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "communityOverview",
+  inject: ['root', 'sta'],
+  computed: {
+    buildingUnits() {
+      let obj = {}
+      this.units.map(e => {
+        for(let i=0;i<e.unitNumber;i++){
+          obj[e.buildingNumber]?.push(e) || (obj[e.buildingNumber] = [e])
+        }
+      })
+      return obj;
+    }
+  },
+  data() {
+    return {
+      units: []
+    }
+  },
+  methods: {
+    getUnits(communityId) {
+      this.root.instance.post("/app/appcommunitybuildinginfo/list", null, {
+        params: {
+          communityId,
+          size: 999
+        }
+      }).then(res => {
+        if (res?.data) {
+          this.units = res.data.records
+        }
+      })
+    }
+  },
+  created() {
+    this.getUnits(this.root.isFormDv ? this.root.info.communityId : this.$route.query.communityId)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.communityOverview {
+  max-width: 400px;
+
+  .units {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0 20px 20px;
+    align-items: flex-start;
+
+    .building {
+      display: flex;
+      align-items: center;
+      height: auto;
+      flex-wrap: wrap; 
+
+      .unit {
+        margin-right: 10px;
+        margin-bottom: 10px;
+
+        &:nth-of-type(5) {
+          margin-right: 0;
+        }
+      }
+    }
+
+    .unit {
+      width: 64px;
+      height: 56px;
+      background: #F8FBFF;
+      border-radius: 2px 0 0 2px;
+      border: 1px solid #829CCF;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      font-size: 12px;
+      color: #999;
+      cursor: pointer;
+
+      b {
+        color: #424242;
+      }
+
+      &.selected {
+        color: #fff;
+        background: #2266FF;
+
+        b {
+          color: #fff;
+        }
+      }
+    }
+  }
+
+  .ai-empty {
+    height: 240px;
+  }
+}
+</style>

packages/grid/AppBuildMap/toolBar/nearbyGCS.vue

@@ -0,0 +1,129 @@
+<template>
+  <section class="nearbyGCS">
+    <ai-title title="全部网格员"/>
+    <div class="radarPane">
+      <div class="radar">
+        <div class="indicator"/>
+      </div>
+      <div class="gcsItem" v-for="(op,i) in userList" :key="i" :style="op.style">
+        <i class="dot" :class="{offline:op.offline}"/>
+        <span>{{ op.name }}</span>
+        <ai-icon icon="iconIM"/>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "nearbyGCS",
+  inject: ['root', 'sta'],
+
+  data () {
+    return {
+      userList: []
+    }
+  },
+
+  mounted () {
+    this.getInfo()
+  },
+
+  methods: {
+    getInfo () {
+      this.root.instance.post('/app/appgirdmemberinfo/queryGirdMemberByBuilding', null, {
+        params: {buildingId: this.$route.query.buildingId}
+      }).then(res => {
+        if (res?.data) {
+          this.gcsList(res.data)
+        }
+      })
+    },
+
+    gcsList (data) {
+      this.userList = data.map(e => ({
+        ...e,
+        style: {
+          transform: `translate(
+        ${Math.round(160 * (Math.random() - 0.5))}px,
+        ${Math.round(160 * (Math.random() - 0.5))}px)`}
+      }))
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.nearbyGCS {
+  .radarPane {
+    width: 100%;
+    height: 360px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+
+    .gcsItem {
+      position: absolute;
+      width: 92px;
+      height: 28px;
+      background: #FFFFFF;
+      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+      border-radius: 16px;
+      font-size: 12px;
+      color: #333333;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      z-index: 3;
+      gap: 8px;
+
+      .AiIcon {
+        width: 16px;
+        height: 16px;
+      }
+
+      .dot {
+        width: 4px;
+        height: 4px;
+        background: #30BC77;
+
+        &.offline {
+          background: #FF4466;
+        }
+      }
+    }
+  }
+
+  .radar {
+    width: 320px;
+    height: 320px;
+    position: relative;
+    border-radius: 50%;
+    overflow: hidden;
+    background-image: url("https://cdn.cunwuyun.cn/buildSta/radarBg.png");
+
+    .indicator {
+      position: absolute;
+      width: 160px;
+      height: 160px;
+      top: 0;
+      left: 0;
+      transform-origin: 100% 100%;
+      background: linear-gradient(190deg, rgba(162, 255, 182, 0.5) 0%, rgba(162, 255, 215, 0) 100%);
+      border-right: 1px solid #A2FFB6;
+      animation: radar 5s linear infinite;
+      z-index: 2;
+    }
+  }
+}
+
+@keyframes radar {
+  0% {
+    transform: rotate(0deg)
+  }
+  100% {
+    transform: rotate(360deg)
+  }
+}
+</style>

packages/grid/AppBuildMap/toolBar/recentEvents.vue

@@ -0,0 +1,81 @@
+<template>
+  <section class="recentEvents">
+    <ai-title title="楼栋近期相关事件"/>
+    <div class="recentEvents-list">
+      <div class="recentEvents-item" v-for="(item, index) in 4" :key="index">
+        <div class="recentEvents-item__top">
+          <i>[已解决]</i>
+          <span>102室与402室矛盾纠纷</span>
+        </div>
+        <div class="recentEvents-item__middle">
+          <span>102室与402室矛盾纠纷</span>
+          <em>[张三]</em>
+          <span>接到了</span>
+          <em>[矛盾调解]</em>
+          <span>任务，事件目前</span>
+          <i>[已完成]</i>
+        </div>
+        <div class="recentEvent-item__bottom">2019-06-18 13:35:45</div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "recentEvents"
+}
+</script>
+
+<style lang="scss" scoped>
+.recentEvents {
+  font-size: 14px;
+  width: 100%;
+
+  .recentEvents-list {
+    .recentEvents-item {
+      border-bottom: 1px solid #E6E8EE;
+      background: transparent;
+      padding: 10px;
+      box-sizing: border-box;
+      .recentEvent-item__bottom {
+        color: #999;
+        font-size: 12px;
+      }
+
+      &:first-child {
+        background: #EFF6FF;
+        border-bottom: none;
+      }
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      .recentEvents-item__top {
+        display: flex;
+      }
+
+      .recentEvents-item__middle {
+        margin: 6px 0 10px;
+      }
+
+      span {
+        color: #666666;
+      }
+
+      em {
+        color: #2266FF;
+        font-style: normal;
+      }
+
+      i {
+        font-style: normal;
+        color: #2EA222;
+      }
+    }
+  }
+
+
+}
+</style>