emergencyManagement/pages/index/index.vue

<template>
  <view class="page-wrap">
    <uni-section :title="curGroupName">
      <template v-slot:decoration>
        <view class="decoration">
          <image class="icon" src="/static/images/admin_icon.png"></image>
        </view>
      </template>
      <view class="tab-container">
        <view class="item" @click="linkTo('duty')">
          <view class="icon">
            <image src="/static/images/duty.png" mode=""></image>
          </view>
          <view class="name">应急值守</view>
        </view>
        <view class="item" @click="linkTo('team')">
          <view class="icon">
            <image src="/static/images/team.png" mode=""></image>
          </view>
          <view class="name">队伍建设</view>
        </view>
        <view class="item" @click="linkTo('goods')">
          <view class="icon">
            <image src="/static/images/goods.png" mode=""></image>
          </view>
          <view class="name">物资储备</view>
        </view>
        <view class="item" @click="linkTo('industry')">
          <view class="icon">
            <image src="/static/images/industry.png" mode=""></image>
          </view>
          <view class="name">行业管理</view>
        </view>
        <view class="item" @click="linkTo('danger')">
          <view class="icon">
            <image src="/static/images/danger.png" mode=""></image>
          </view>
          <view class="name">隐患管理</view>
        </view>
        <view class="item" @click="linkTo('disaster')">
          <view class="icon">
            <image src="/static/images/disaster.png" mode=""></image>
          </view>
          <view class="name">自然灾害</view>
        </view>
        <view class="item" @click="linkTo('reporting')">
          <view class="icon">
            <image src="/static/images/reporting.png" mode=""></image>
          </view>
          <view class="name">突发事件</view>
        </view>
        <view class="item" @click="linkTo('camera')">
          <view class="icon">
            <image src="/static/images/camera.png" mode=""></image>
          </view>
          <view class="name">现场视频</view>
        </view>
      </view>
    </uni-section>
    <div class="duty-conatiner">
      <uni-section title="值班情况">
        <template v-slot:decoration>
          <view class="decoration">
            <image class="icon" src="/static/images/duty_icon.png"></image>
          </view>
        </template>
        <template v-slot:right>
          <view style="width: 200px;">
            <uni-data-select v-model="dutyGroupId" :localdata="groupList" :value="curGroupId" placeholder="请选择部门"
              :clear="false" @change="getdutyData"></uni-data-select>
          </view>
        </template>
        <view class="filter-box">
          <view class="bt lf" @click="changeDate(-1)">
            <uni-icons type="left" color="#777" size="30"></uni-icons>
          </view>
          <view class="time">{{dutyDate}}</view>
          <view class="bt rt" @click="changeDate(1)">
            <uni-icons type="right" color="#777" size="30"></uni-icons>
          </view>
        </view>
        <view class="duty-item" v-for="(duty,index) in dutys" :key="duty.accountId">
          <view class="avatar">
            <image class="icon" src="/static/images/avatar.png" mode=""></image>
          </view>
          <view class="info">
            <view class="top">
              <view class="posName">
                <text>{{duty.posName}}</text>
              </view>
              <view class="posbox">
                <view class="positionName">
                  <uni-tag :inverted="true" :text="duty.positionName" type="success" size="small"></uni-tag>
                </view>
                <view class="groupName">
                  <uni-tag :inverted="true" :text="duty.groupName" type="primary" size="small"></uni-tag>
                </view>
              </view>
            </view>
            <view class="bottom">
              <view class="user">
                <div class="userinfo">
                  <image class="icon" src="/static/images/user.png"></image>
                  <view class="name">{{duty.accountName}}</view>
                </div>
              </view>
              <view class="phone" @click="callPhone(duty.accountPhone)">
                <image class="icon" src="/static/images/phone.png"></image>
                <view class="phoneNumber">{{duty.accountPhone||'未填写'}}</view>
              </view>
            </view>
          </view>
        </view>
        <view class="isEmpty" v-if="dutys.length<1">
          暂无数据
        </view>
      </uni-section>
    </div>
    <div class="item-conatiner">
      <uni-section title="统计分析">
        <template v-slot:decoration>
          <view class="decoration">
            <image class="icon" src="/static/images/statistics_icon.png"></image>
          </view>
        </template>
        <view class="statisticsTabs">
          <uni-segmented-control :current="statisticsIdx" :values="statisticsTabs" style-type="text"
            active-color="#007aff" @clickItem="changeStatics" />
        </view>
        <view class="statisticscont">
          <uni-table border stripe emptyText="暂无更多数据">
            <uni-tr>
              <uni-th align="center" width='50'>序号</uni-th>
              <uni-th align="center">{{statisticsData.name}}</uni-th>
              <uni-th align="center">{{statisticsData.unit}}</uni-th>
            </uni-tr>
            <uni-tr v-for="(item,idx) in statisticsData.items" :key="idx">
              <uni-td align="center">{{idx+1}}</uni-td>
              <uni-td align="center">{{item.name}}</uni-td>
              <uni-td align="center">{{item.num}}</uni-td>
            </uni-tr>
          </uni-table>
        </view>
        <uni-card margin='10px 0' padding='0'>
          <StatisticsChart :data='chartdata'></StatisticsChart>
        </uni-card>
      </uni-section>
    </div>
  </view>
</template>

<script>
  import StatisticsChart from '@/components/IndexBarChart.vue'
  import Echart from '@/components/Echart.vue'
  import dutyApi from '@/api/duty.js'
  import teamApi from '@/api/team.js'
  import goodsApi from '@/api/goods.js'
  import industryApi from '@/api/industry.js'
  import dangerApi from '@/api/danger.js'
  import reportingApi from '@/api/reporting.js'
  import {
    parseTime
  } from '@/libs/index.js'
  import {
    selectGroupUser,
    getGroupView
  } from '@/api/system.js'
  export default {
    components: {
      StatisticsChart
    },
    computed: {
      groupList() {
        let groupView = this.groupView;
        if (groupView && groupView.length > 0) {
          let groupList = []
          groupView.map((item, index) => {
            groupList.push({
              ...item,
              value: item.groupId,
              text: item.groupName
            })
            if (Array.isArray(item.children) && item.children.length > 0) {
              groupList = groupList.concat(item.children.map(item => {
                return {
                  ...item,
                  value: item.groupId,
                  text: item.groupName
                }
              }))
            }
          })
          this.dutyGroupId = this.curGroupId
          return groupList
        } else {
          return []
        }
      }
    },
    data() {
      return {
        curGroupId: null,
        curGroupName: "",
        dutys: [],
        groupView: [],
        statisticsIdx: 0,
        dutyDate: parseTime(new Date(), '{y}-{m}-{d}'),
        dutyGroupId: undefined,
        statisticsTabs: ['队伍建设', '物资储备', '行业管理', '隐患管理', '突发事件'],
        statisticsData: {
          name: "救援队",
          unit: "人数",
          items: []
        },
        chartdata: {
          yData: [],
          xData: []
        }
      }
    },
    onShow() {
      this.init()
    },
    methods: {
      init() {
        let userData = uni.getStorageSync('accountInfo')
        this.curGroupId = userData.groupId
        this.curGroupName = userData.groupName
        this.getdutyData();
        this.getStatisticsData()
        this.getBaseData()
      },
      changeDate(step) {
        let date = new Date(this.dutyDate)
        date.setDate(date.getDate() + step)
        this.dutyDate = parseTime(date, '{y}-{m}-{d}')
        this.getdutyData()
      },
      getdutyData() {
        dutyApi.getRecordByList({
          dutyDate: this.dutyDate,
          groupId: this.dutyGroupId
        }).then((res) => {
          this.dutys = res.data
        })
      },
      getBaseData() {
        //dutyApi.getByList().then((res) => {
        //  uni.setStorageSync("dutys", res.data)
        //})
        selectGroupUser().then((res) => {
          uni.setStorageSync("groupUser", res.data)
        })
        getGroupView().then((res) => {
          uni.setStorageSync("groupView", res.data)
          this.groupView = res.data
        })
      },
      getStatisticsData() {
        if (this.statisticsIdx === 0) {
          teamApi.counterByMember().then((res) => {
            let data = res.data;
            this.statisticsData.items = data.map(item => {
              return {
                name: item.teamName,
                num: item.count
              }
            });
          })
          teamApi.counterByCat().then((res) => {
            let data = res.data;
            this.chartdata = {
              yData: data.map(item => item.count),
              xData: data.map(item => item.teamCatTitle),
              name: "队伍建设"
            }
          })
        }
        if (this.statisticsIdx === 1) {
          goodsApi.totalByCat().then((res) => {
            let data = res.data;
            this.statisticsData.items = data.map(item => {
              return {
                name: item.goodsCatTitle,
                num: item.total
              }
            });
            this.chartdata = {
              yData: data.map(item => item.total),
              xData: data.map(item => item.goodsCatTitle),
              name: "数量"
            }
          })
        }
        if (this.statisticsIdx === 2) {
          industryApi.counterByGroup().then((res) => {
            let data = res.data;
            this.statisticsData.items = data.map(item => {
              return {
                name: item.groupName,
                num: item.count
              }
            });
          })
          industryApi.counterByCat().then((res) => {
            let data = res.data;
            this.chartdata = {
              yData: data.map(item => item.count),
              xData: data.map(item => item.entCatTitle),
              name: "企业/单位数目"
            }
          })
        }
        if (this.statisticsIdx === 3) {
          dangerApi.counterByGroup().then((res) => {
            let data = res.data;
            this.statisticsData.items = data.map(item => {
              return {
                name: item.groupName,
                num: item.count
              }
            });
          })
          dangerApi.counterByCat().then((res) => {
            let data = res.data;
            this.chartdata = {
              yData: data.map(item => item.count),
              xData: data.map(item => item.dangerCatTitle),
              name: "隐患数目"
            }
          })
        }
        if (this.statisticsIdx === 4) {
          reportingApi.counterByType().then((res) => {
            let data = res.data;
            this.statisticsData.items = data.map(item => {
              return {
                name: item.reportingTypeTitle,
                num: item.count
              }
            });
            this.chartdata = {
              yData: data.map(item => item.count),
              xData: data.map(item => item.reportingTypeTitle),
              name: "突发事件"
            }
          })
        }
      },
      linkTo(type) {
        uni.navigateTo({
          url: `/packageA/pages/${type}/index`
        })
      },
      changeStatics({
        currentIndex
      }) {
        if (this.statisticsIdx !== currentIndex) {
          this.statisticsIdx = currentIndex
          let ths = [{
            name: "救援队",
            unit: "人数"
          }, {
            name: "物资分类",
            unit: "数量"
          }, {
            name: "监管单位",
            unit: "企业/单位数目"
          }, {
            name: "监管单位",
            unit: "隐患数目"
          }, {
            name: "突发事件",
            unit: "数目"
          }]
          this.statisticsData = {
              name: ths[currentIndex].name,
              unit: ths[currentIndex].unit,
              items: []
            },
            this.getStatisticsData()
        }
      },
      callPhone(phoneNumber) {
        if (!phoneNumber) return
        wx.makePhoneCall({
          phoneNumber
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .page-wrap {
    padding: 20rpx;
    background-color: #f5f5f5;

    .decoration {
      padding-right: 6rpx;

      image {
        display: block;
        width: 30rpx;
        height: 30rpx;
      }
    }

    .tab-container {
      background: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      padding-bottom: 20rpx;

      .item {
        width: 25%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        padding: 0 10rpx 20rpx;
        box-sizing: border-box;

        .icon {
          width: 80rpx;
          height: 80rpx;

          image {
            display: block;
            width: 80rpx;
            height: 80rpx;
          }
        }

        .name {
          padding-top: 16rpx;
          line-height: 1;
          font-size: 28rpx;
          color: #222222;
          text-align: center;
        }
      }
    }

    .duty-conatiner {
      margin-top: 40rpx;
      padding-bottom: 10rpx;
      background-color: #fff;

      .filter-box {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 20rpx;

        .time {
          padding: 16rpx 20rpx;
          width: 260rpx;
          border: 1px solid #ddd;
          text-align: center;
          border-radius: 6px;
          margin: 0 40rpx;
          font-size: 32rpx;
          line-height: 1;
          color: #424242;
          font-weight: 600;
          box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
        }
      }

      .isEmpty {
        text-align: center;
        font-size: 36rpx;
        line-height: 1;
        padding: 36rpx;
        color: #999999;
        background-color: #f8f8f8;
      }

      .duty-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.08);
        padding: 20rpx 14rpx;
        margin: 20rpx;

        .icon,
        .icon image {
          display: block;
          width: 30rpx;
          height: 30rpx;
          flex-shrink: 0;
        }

        .avatar {
          image {
            width: 60rpx;
            height: 60rpx;
          }
        }

        .posbox {
          // display: flex;
          // align-items: center;
          // justify-content: space-between;
          padding: 20rpx 0;

          // .groupName,.positionName{
          // 	width: 45%;
          // 	overflow: hidden;
          // 	text-overflow: ellipsis;
          // 	&.positionName{
          // 		display: flex;
          // 		align-items: center;
          // 		justify-content: flex-end;
          // 	}
          // }
          .groupName {
            margin-top: 16rpx;
          }
        }

        .info {
          flex: 1;
          padding: 0 14rpx;

          .user,
          .phone {
            display: flex;
            align-items: center;

            .name,
            .phoneNumber {
              color: #999;
              font-size: 12px;
              font-weight: normal;
              // overflow: hidden;
              line-height: 1;
            }
          }

          .user {
            padding: 10rpx 0;

            .userinfo {
              display: flex;
              align-items: center;
            }
          }

          .bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
        }
      }
    }

    .statisticsTabs {
      padding: 0 16rpx 40rpx 16rpx;
    }

    .statisticscont {
      padding: 0 16rpx;
    }
  }
</style>