ShibeiWorkPlatform_Frontend/src/views/modules/visual/measure/service.vue

<template>
  <div class="warning-box">
    <cpt-card>
      <div class="card-title">
        <img class="title-icon" src="../../../../assets/img/shuju/title-tip.png" />
        <div class="title-label">
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              全部网格<i class="el-icon-caret-bottom el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>黄金糕</el-dropdown-item>
              <el-dropdown-item>狮子头</el-dropdown-item>
              <el-dropdown-item>螺蛳粉</el-dropdown-item>
              <el-dropdown-item>双皮奶</el-dropdown-item>
              <el-dropdown-item>蚵仔煎</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="title-time">
          <div class="title-time-label">选择时间</div>
          <div class="">
            <el-date-picker
              v-model="value2"
              type="month"
              placeholder="选择月">
            </el-date-picker>
          </div>
        </div>
      </div>

      <div class="card-echart">
        <div class="card-left">
          <div class="echart-wr">
            <div class="echart-cicle"></div>
            <div id="echartOrg" class="echart-org"></div>
          </div>
          <div class="echarts-tips">
            <div class="tips-list">
              <div class="tips-item">
                <div class="tips-item-icon"></div>
                <div class="tips-item-text">为民服务</div>
              </div>
              <div class="tips-item">
                <div class="tips-item-icon"></div>
                <div class="tips-item-text">社会治安综合</div>
              </div>
              <div class="tips-item">
                <div class="tips-item-icon"></div>
                <div class="tips-item-text">社会治安综合</div>
              </div>
              <div class="tips-item">
                <div class="tips-item-icon"></div>
                <div class="tips-item-text">卫生计生监管执法</div>
              </div>
              <div class="tips-item">
                <div class="tips-item-icon"></div>
                <div class="tips-item-text">卫生计生监管执法</div>
              </div>
              <div class="tips-item">
                <div class="tips-item-icon"></div>
                <div class="tips-item-text">建设管理</div>
              </div>
              
              <div class="tips-item">
                <div class="tips-item-icon"></div>
                <div class="tips-item-text">为民服务</div>
              </div>
            </div>
          </div>
        </div>
        <div class="card-left">
          <div class="echart-wr">
            <div class="echart-cicle"></div>
            <div id="echartType" class="echart-org"></div>
          </div>
          <div class="echarts-tips echarts-tips-wd50">
            <div class="tips-lists">
              <div class="tips-items">
                <div class="tips-items-title">
                  <div>志愿者</div>
                </div>
                <div class="tips-items-num">
                  <div class="tips-item-count">17513</div>
                  <div class="tips-item-has">（服务次数：2430）</div>
                </div>
              </div>
              <div class="tips-items">
                <div class="tips-items-title">
                  <div>志愿者</div>
                </div>
                <div class="tips-items-num">
                  <div class="tips-item-count">17</div>
                  <div class="tips-item-has">（服务次数：2430）</div>
                </div>
              </div>
              <div class="tips-items">
                <div class="tips-items-title">
                  <div>志愿者</div>
                </div>
                <div class="tips-items-num">
                  <div class="tips-item-count">175</div>
                  <div class="tips-item-has">（服务次数：2430）</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="warning-box-bottom">
        <screen-table
          :headerList="headerList"
          :tableData="tableData"
          :visibleLoading="visibleLoading"
        ></screen-table>
        <div class="pagination">
          <el-pagination
            :current-page="pageNo"
            :page-size="pageSize"
            background
            layout="prev, pager, next"
            @size-change="pageSizeChangeHandleNew"
            @current-change="pageCurrentChangeHandleNew"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </cpt-card>
  </div>
</template>

<script>
import { requestPost } from "@/js/dai/request";
import screenTable from "../components/screen-table/index";
import cptCard from "@/views/modules/visual/cpts/card";
import nextTick from "dai-js/tools/nextTick";

import * as echarts from 'echarts';
export default {
  name: "warning-box",
  components: {
    cptCard,
    screenTable,
  },
  data() {
    return {
      warningList: [],
      headerList: [
        { title: "序号", coulmn: 'index' },
        { title: "需求类型", coulmn: 'gridName' },
        { title: "具体内容", coulmn: 'buildingName' },
        { title: "上报情况", coulmn: 'neighborhoodName' },
        { title: "上报人", coulmn: 'residentNames' },
        { title: "上报时间", coulmn: 'residentNames' },
        { title: "是否认领", coulmn: 'residentNames' },
        { title: "认领方", coulmn: 'residentNames' },
        { title: "认领时间", coulmn: 'residentNames' }
      ],
      tableData: [
        // [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
      ],
      value2: '',
      visibleLoading: true,
      pageNo: 1,
      pageSize: 10,
      total: 0,
      activeIndex: 0,
      activeLevel: "1",
    };
  },
  async mounted() {
    await nextTick(100);
    this.initCharts()
    this.initChartType()
    this.getBuildingwarnlist();
  },
  methods: {
    initCharts() {
      const eId = document.getElementById('echartOrg')
      let _charts = echarts.init(eId)
      let option = {
        tooltip: {
          show: false,
          trigger: 'item'
        },
        legend: {
          show: false,
          orient: 'vertical',
          top: '40%',
          left: 'right',
          textStyle: {
            color: '#fff'
          }
        },
        title: {
          text: '12000',  //图形标题，配置在中间对应效果图的80%
          subtext: '总数',
          left: "center",
          top: "center",
          textStyle: {
            color: "#fff",
            fontSize: 28,
            align: "center"
          },
          subtextStyle: {
            fontSize: 16,
            color: '#fff'
          }
        },
        series: [
          {
            // name: 'Access From',
            type: 'pie',
            // center: ['10%', '50%'],
            radius: ['40%', '60%'],
            avoidLabelOverlap: false,
            // top: top + '%',
            // height: '80%',
            left: 'center',
            width: 400,
            label: {
              show: true,
              position: 'outer',
              alignTo: 'edge',
              formatter: '{a|{c}}\n{r|}\n{name|{b}}',
              minMargin: 5,
              edgeDistance: 20,
              lineHeight: 15,
              color: '#fff',
              fontSize: 12,
              // padding: [5],
              distanceToLabelLine: 10,
              rich: {
                name: {
                  padding: [0, 6, 0, 6]
                },
                a: {
                  fontSize: 15,
                  color: '#fff',
                  padding: [0, 6, 0, 6]
                },
                r: {
                  backgroundColor: 'auto',
                  borderRadius: 6,
                  width: 6,
                  height: 6,
                  // padding: [3, 3, 0, -12]
                }
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '14',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: true,
              length: 20,
              length2: 0,
              maxSurfaceAngle: 80,
              lineStyle: {
                cap: 'round'
              }
            },
            labelLayout: function (params) {
              const isLeft = params.labelRect.x < _charts.getWidth() / 2;
              const points = params.labelLinePoints;
              // Update the end point.
              points[2][0] = isLeft
                ? params.labelRect.x
                : params.labelRect.x + params.labelRect.width;
              return {
                labelLinePoints: points
              };
            },
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ]
          }
        ]
      }
      option && _charts.setOption(option);

    },
    initChartType() {
      const eId = document.getElementById('echartType')
      let _charts = echarts.init(eId)
      let option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          show: false,
          orient: 'vertical',
          top: '40%',
          left: 'right',
          textStyle: {
            color: '#fff'
          }
        },
        title: {
          text: '12000',  //图形标题，配置在中间对应效果图的80%
          subtext: '总数',
          left: "center",
          top: "center",
          textStyle: {
            color: "#fff",
            fontSize: 28,
            align: "center"
          },
          subtextStyle: {
            fontSize: 16,
            color: '#fff'
          }
        },
        series: [
          {
            // name: 'Access From',
            type: 'pie',
            // center: ['10%', '50%'],
            radius: ['40%', '60%'],
            avoidLabelOverlap: false,
            // top: top + '%',
            // height: '80%',
            left: 'center',
            width: 400,
            label: {
              position: 'outer',
              alignTo: 'labelLine',
              formatter: '{name|{b}}\n{time|{c} 小时}',
              minMargin: 5,
              edgeDistance: 20,
              lineHeight: 15,
              color: '#fff',
              fontSize: 15,
              rich: {
                time: {
                  fontSize: 10,
                  color: '#fff'
                }
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '14',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: true,
              length: 20,
              length2: 0,
              maxSurfaceAngle: 80
            },
            labelLayout: function (params) {
              const isLeft = params.labelRect.x < _charts.getWidth() / 2;
              const points = params.labelLinePoints;
              // Update the end point.
              points[2][0] = isLeft
                ? params.labelRect.x
                : params.labelRect.x + params.labelRect.width;
              return {
                labelLinePoints: points
              };
            },
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ]
          }
        ]
      }
      option && _charts.setOption(option);

    },
    onClickList(index, level) {
      this.activeIndex = index;
      this.activeLevel = level;
      this.pageNo = 1;
      this.getUserwarnlist();
    },
    //具体人员列表
    async getUserwarnlist() {
      const { activeIndex, activeLevel, warningList } = this;
      const reqItem = warningList[activeIndex];
      let tableData = [];
      const url = "/epmetuser/statsresiwarn/userwarnlist";
      let params = {
        configId: reqItem.configId,
        buildingIdList: reqItem["buildingIdList" + activeLevel],
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      };
      const { data, code, msg } = await requestPost(url, params);
      if (code === 0) {
        tableData = data.list.map((item, index) => {
          return {
            ...item,
            index: index + 1,
            residentNames: item.residentNames || "暂无"
          }
        });
        this.tableData = tableData;
        this.total = data.total;
      } else {
      }
    },
    // 【人员预警】 楼宇预警数量列表
    async getBuildingwarnlist() {
      const url = "/epmetuser/statsresiwarn/buildingwarnlist";
      let params = {
        agencyId: this.$store.state.user.agencyId,
      };
      const { data, code, msg } = await requestPost(url, params);
      if (code === 0) {
        this.warningList = data;
        this.visibleLoading = false;
        this.getUserwarnlist();
      } else {
      }
    },
    pageSizeChangeHandleNew(val) {
      this.pageNo = 1;
      this.pageSize = val;
    },
    pageCurrentChangeHandleNew(val) {
      this.pageNo = val;
      this.getUserwarnlist();
    },
  },
};
</script>

<style
  lang="scss"
  src="@/assets/scss/modules/visual/warning.scss"
  scoped
></style>
<style lang="scss" scoped>
.card-title {
  display: flex;
  align-items: center;
  cursor: pointer;
  .title-icon {
    display: block;
    width: 46px;
    height: 34px;
    box-sizing: border-box;
    margin-right: 6px;
  }
  ::v-deep .el-dropdown {
    font-size: 16px;
    color: #fff;
    font-weight: 800;
  }
  .title-time {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    margin-left: 30px;
    font-size: 14px;
    color: #fff;
    .title-time-label {
      margin-right: 10px;
    }
    ::v-deep .el-date-editor--month {
      width: 100px;
      .el-input__inner {
        width: 100px;
        height: 24px;
        box-sizing: border-box;
        padding: 0;
        font-size: 14px;
        color: #fff;
        line-height: 24px;
        text-align: center;
        background: #06186D;
        border: 1px solid #1A64CC;
        border-radius: 2px;
      }
      .el-input__prefix {
        display: none;
      }
      .el-input__suffix {
        right: 0;
        .el-input__icon {
          line-height: 24px;
        }
      }
      
    }
  }
}
.card-echart {
  display: flex;
  margin-top: 40px;
  .card-left {
    position: relative;
    flex: 1;
    display: flex;
    
  }
}
.echart-wr {
  position: relative;
  flex-shrink: 0;
  width: 50%;
  height: 320px;
  box-sizing: border-box;
  .echart-org {
    width: 100%;
    height: 100%;
  }
  .echart-cicle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 240px;
    height: 240px;
    box-sizing: border-box;
    margin-top: -120px;
    margin-left: -120px;
    border: 1px dashed rgba(0, 96, 240, 1);
    border-radius: 50%;
  }
}

.echarts-tips {
  width: 40%;
  // flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.echarts-tips-wd50 {
  width: 50%;
}
.tips-list, .tips-item, .tips-lists, .tips-items-num {
  display: flex;
  align-items: center;
}
.tips-list {
  // width: 100%;
  // height: 100%;
  flex-wrap: wrap;
  // justify-content: center;
  .tips-item {
    // flex: 1;
    width: 50%;
    margin-top: 20px;
    // margin-right: 40px;
    cursor: pointer;
    .tips-item-icon {
      width: 20px;
      height: 10px;
      box-sizing: border-box;
      margin-right: 8px;
      background: #1B51FF;
      border-radius: 2px;
    }
    .tips-item-text {
      font-size: 16px;
      color: #D2E7FF;
    }
  }
}
.tips-lists {
  width: 100%;
  flex-wrap: wrap;
  .tips-items {
    margin-bottom: 30px;
    width: 50%;
    .tips-items-title {
      font-size: 16px;
    }
    .tips-items-num {
      justify-content: space-between;
      box-sizing: border-box;
      margin-top: 20px;
      padding-right: 30px;
      font-size: 20px;
      .tips-item-has {
        font-size: 14px;
      }
    }
  }
}
</style>