ShibeiWorkPlatform_Frontend/src/views/modules/visual/communityGovern/processAnalyze.vue

<template>
  <cpt-card>
    <div class="title">
      <img src="@/assets/img/shuju/title-tip.png" />
      <span>项目处理分析</span>

      <div class="second-title">
        <div class="second-select cascader">
          <el-cascader class="customer_cascader"
                       ref="myCascader"
                       v-model="agencyIdArray"
                       :key="iscascaderShow"
                       :options="casOptions"
                       :props="optionProps"
                       @change="handleChangeAgency"
                       clearable></el-cascader>
        </div>
        <div class="second-select">
          <el-date-picker v-model="dateId"
                          type="date"
                          :clearable="false"
                          @change="handleChangeDate"
                          prefix-icon="el-icon-caret-bottom"
                          placeholder="选择日期"
                          value-format="yyyyMMdd">
          </el-date-picker>
        </div>
      </div>

    </div>
    <div class="g-cpt-resi">
      <div class="g-l">
        <div class="l_top">
          <div class="g-count">
            <div class="t_count">项目总数</div>
            <div class="c_count">{{projectTotal}}</div>
            <div class="t_yestoday">昨日
              <span class="c_yestoday">{{dateIncr}}</span>
            </div>
            <div class="t_today">上月
              <span class="c_today">{{monthIncr}}</span>
            </div>
          </div>
          <div class="g-pie">
            <screen-echarts-frame class="echart-wr"
                                  @myChartMethod="pieInitOk"
                                  ref="pieChart"></screen-echarts-frame>

            <div class="pie-legend">
              <div :class="['legend_item',{'item_last':index===legendArray.length-1}]"
                   v-for="(item,index) in legendArray"
                   :key="index">
                <div class="item_name">{{item.name}}</div>
                <img :src="item.url" />
                <div class="item_num">
                  <span class="item_count">{{item.count}}</span>
                  <span class="item_percent">{{item.percent}}</span>
                </div>
              </div>
            </div>

          </div>
        </div>
        <div class="l_bottom">
          <div class="bottom_label">近12月新增项目数</div>
          <screen-echarts-frame class="echart-line"
                                @myChartMethod="lineInitOk"
                                ref="lineChart"></screen-echarts-frame>
        </div>
      </div>
      <div class="g-r">
        <div class="r-map">
          <screen-map class="map"
                      ref="map"
                      @clickFeature="clickProject"
                      :showIconLayer="true"></screen-map>
          <div class="r-status">
            <div :class="['status', 'status-pending',  {'sel-status':status==='pending'}]"
                 @click="handleChangeStatus('pending')">未结案</div>
            <div :class="['status', 'status-closed',  {'sel-status':status==='closed'}]"
                 @click="handleChangeStatus('closed')">已结案</div>

          </div>
          <div class="r-legend">
            <img src="@/assets/img/shuju/weiwanjie.png"
                 mode="aspectFill" />
            <span>未结案</span>
            <img src="@/assets/img/shuju/yiwanjie.png"
                 mode="aspectFill" />
            <span>已结案</span>

          </div>

        </div>
      </div>
    </div>
  </cpt-card>
</template>

<script>
import { Loading } from "element-ui"; //引入Loading服务
import { Circle as CircleStyle, Icon, Fill, Stroke, Style, Text } from 'ol/style.js';
import { requestPost } from "@/js/dai/request";
import cptCard from "@/views/modules/visual/cpts/card";
import cptTb from "@/views/modules/visual/cpts/tb";
import screenEchartsFrame from "@/views/modules/visual/components/screen-echarts-frame";
import screenMap from "@/views/modules/visual/components/screen-map";

import { pieOption } from './processPieOption.js'
import { lineOption } from './processLineOption.js'


export default {
  name: "HomeMap",
  data () {
    return {
      showNoData: false,
      timer: null,
      isfirstInit: true,

      projectTotal: 0,
      dateIncr: 0,
      monthIncr: 0,

      lineChart: '',
      lineOption: {},
      lineInitState: false,
      lineColorArray: [],
      lineData: [820, 932, 901, 934, 1290, 1330, 1320],

      pieChartS: null,
      pieChart: '',
      pieOption: {},
      pieInitState: false,
      pieTotal: 0,
      colorArray: [],
      pieData: [
        { value: 1048, name: '未结案', color: '#FAC126', selected: true },
        { value: 735, name: '已结案', color: '#3DDA83' },

      ],

      legendArray: [
        {
          name: '未结案',
          count: 120,
          percent: '25.0%',
          url: require('../../../../assets/img/shuju/measure/huang@2x.png')
        },
        {
          name: '已结案',
          count: 351,
          percent: '50.0%',
          url: require('../../../../assets/img/shuju/measure/lv@2x.png')
        }
      ],

      dateId: '',
      agencyId: '',
      status: 'pending',//状态:待处理 pending，结案closed
      agencyInfo: {},
      projectList: [],
      projectList1: [
        {
          agencyId: '',
          projectId: '',
          origin: '',
          status: 'pending',
          title: '南宁第二网格南宁第二网格',
          latitude: 36.062227,
          longitude: 120.389455,
        },
        {
          agencyId: '',
          projectId: '',
          origin: '',
          status: 'closed',
          latitude: 36.082227,
          longitude: 120.389455,
          title: "南宁第二网格",
        }
      ],
      projectList2: [
        {
          agencyId: '',
          projectId: '',
          origin: '',
          status: 'pending',
          title: '山东路山东路',
          latitude: 36.062227,
          longitude: 120.379455,
        },
        {
          agencyId: '',
          projectId: '',
          origin: '',
          status: 'closed',
          latitude: 36.082227,
          longitude: 120.379455,
          title: "山东路",
        }
      ],
      iconUrlArray: [],
      iconTextStyle: {},

      casOptions: [],
      agencyIdArray: [],
      customerList: [],
      iscascaderShow: 0,

      optionProps: {
        multiple: false,
        value: 'agencyId',
        label: 'agencyName',
        children: 'subAgencyList',
        checkStrictly: true
      },

    };
  },
  // mixins: [animate]
  beforeDestroy () {
    this.timer && clearInterval(this.timer)
  },

  async mounted () {
    this.userId = this.uid;
    this.initData()
    await this.getWorkUserInfo()
    await this.getAgencylist()//获取组织级别
    this.getApiData();
  },

  methods: {
    initData () {
      var time = (new Date).getTime() - 24 * 60 * 60 * 1000;
      this.dateId = new Date(time); // 获取的是前一天日期

    },
    async getApiData () {
      await this.getProjectTotal()
      await this.loadProjectlist()
      await this.getLine()

    },

    handleChangeDate (value) {
      this.dateId = value
      this.getApiData()
    },

    // 获取当前管理员信息
    getWorkUserInfo () {
      const url = '/epmetuser/customerstaff/staffbasicinfo'
      let params = {}
      window.app.ajax.post(
        url,
        params,
        (data, rspMsg) => {
          this.agencyInfo = data
          if (!data.latitude) {
            this.agencyInfo.latitude = 36.072227
          }
          if (!data.longitude) {
            this.agencyInfo.longitude = 120.389455
          }
          if (!data.level) {
            this.agencyInfo.level = 'street'
          }

        },
        (rspMsg, data) => {
          this.$message.error(rspMsg)
        }
      )

    },

    async getAgencylist () {
      const url = '/gov/org/customeragency/agencylist'
      // const url = 'http://yapi.elinkservice.cn/mock/102/gov/org/agency/agencylist'

      const params = {
        // customerId: '613cc61a6b8ce4c70d21bd413dac72cc'
        customerId: '0c41b272ee9ee95ac6f184ad548a30eb'
      }
      const { data, code, msg } = await requestPost(url, params)
      if (code === 0) {
        ++this.iscascaderShow
        this.casOptions = []
        this.agencyIdArray.length = []

        if (data) {
          this.casOptions.push(data)
        }

      } else {
        this.$message.error(msg)
      }
    },

    //加载项目
    async getProjectTotal () {
      // const url = "/data/aggregator/project/projecttotal";
      const url = "http://yapi.elinkservice.cn/mock/245/data/aggregator/project/projecttotal";
      let params = {
        agencyId: '',
        dateId: this.dateId,
      };

      const { data, code, msg } = await requestPost(url, params);


      if (code === 0) {
        this.projectTotal = data.projectTotal
        this.dateIncr = data.dateIncr
        this.monthIncr = data.monthIncr

        this.pieData = [
          {
            name: "未结案",
            value: data.pendingTotal,
            selected: true,

          },
          {
            name: "已结案",
            value: data.pendingTotal
          }
        ]

        this.getPie()


      } else {
        this.$message.error(msg);
      }
    },

    //加载项目
    async loadProjectlist () {
      // const url = "/data/aggregator/project/projectstatuslist";
      const url = "http://yapi.elinkservice.cn/mock/245/data/aggregator/project/projectstatuslist";
      let params = {
        agencyId: '',
        dateId: this.dateId,
        status: this.status
      };

      const { data, code, msg } = await requestPost(url, params);


      if (code === 0) {

        // this.projectList = [...data]
        if (this.status === 'closed') {
          this.projectList = this.projectList1
        } else {
          this.projectList = this.projectList2

        }
        this.projectList.forEach(item => {
          item.values_ = {
            name: item.title
          }
          if (item.title.length > 10) {
            item.values_.name = item.title.substring(0, 9) + '...'
          }
          if (item.status === 'pending') {
            item.urlIndex = 0
          } else {
            item.urlIndex = 1
          }
        });

        this.iconUrlArray = [
          'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211209/0994757e8962405ca1cdf9792bf325e4.png',//未处理
          'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211209/2a80f800b04442448c41a6ed4592cd95.png'//已处理
        ]

        this.iconTextStyle = {
          textAlign: undefined,
          font: "15px Arial",
          //fontFamily: "Courier New, monospace",
          // fontWeight: "bold",
          text: '',
          backgroundFill: new Fill({
            color: "#194160",
          }),
          backgroundStroke: new Stroke({ color: "#2865FA", width: 2 }),
          padding: [5, 10, 4, 10],
          fill: new Fill({ color: "#ffffff" }),
          // stroke: new Stroke({ color: "#2865FA", width: 3 }),
          offsetY: -30,
          offsetX: 50,
          overflow: true,
        }

        //第一次加载完置为false
        this.loadMap()

        this.isfirstInit = false

      } else {
        this.$message.error(msg);
      }
    },

    loadMap () {

      if (this.isfirstInit) {
        //mapInfo, polygonArray, polIconUrlArray, iconArrays, iconUrlArray
        this.$refs.map.loadMap(this.agencyInfo, null, null, this.projectList, this.iconUrlArray, this.iconTextStyle)
      } else {
        this.$refs.map.refreshMap(null, this.projectList)


      }
    },

    //点击项目
    clickProject (feature) {
      console.log('项目信息', feature.values_.properties)
    },

    pieInitOk (dom) {

      this.pieChartS = dom
      this.pieInitState = true

    },
    lineInitOk () {

      this.lineInitState = true

    },
    getLine () {
      if (this.lineInitState) {
        this.getLineChart()
      } else {
        setTimeout(() => {
          this.getLine()
        }, 500)
      }
    },
    // 获取折线图
    async getLineChart () {
      this.$refs.lineChart.clear()

      const _that = this
      // this.$refs.pieChart.showLoading()
      //  const url ="/data/aggregator/project/projectmonthincr";
      const url = "http://yapi.elinkservice.cn/mock/245/data/aggregator/project/projectmonthincr";
      let params = {
        agencyId: this.agencyId,
        dateId: this.dateId,
      };

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        // 获取pieChart配置
        this.lineOption = lineOption()
        let xaxis = []
        let totalIndexData = []
        if (data && data.length > 0) {
          data.forEach(item => {
            xaxis.push(item.type)
            totalIndexData.push(item.value)
          });
          // this.lineData = data

        } else {

        }
        this.$refs.lineChart.setOption(this.lineOption, true)
        this.$refs.lineChart.setOption({
          xAxis: { data: xaxis },
          series: [
            { data: totalIndexData },

          ]
        }, true)


      } else {
        this.$message.error(msg);
      }


    },

    getPie () {
      if (this.pieInitState) {
        this.getPieChart()
      } else {
        setTimeout(() => {
          this.getPie()
        }, 500)
      }
    },
    // 获取饼状图
    async getPieChart () {
      this.$refs.pieChart.clear()
      this.pieTotal = 0
      const _that = this
      // this.$refs.pieChart.showLoading()

      // 获取pieChart配置
      this.pieOption = pieOption(this.pieChartS)

      this.pieData.forEach(item => {
        this.pieTotal = this.pieTotal + item.value

      });

      this.pieOption.title.text = this.pieTotal

      this.clickPie(0)

      let fun = function (params) {
        _that.clickPie(params.dataIndex)
      }
      this.$refs.pieChart.handleClick(fun)


    },

    clickPie (seriesIndex) {
      this.pieData.forEach((element, index) => {
        if (index === seriesIndex) {
          element.label = {
            show: true,

          };
          element.labelLine = {
            show: true,
            lineStyle: {
              opacity: 1,
            }

          };

        } else {
          element.label = {
            show: false,

          };
          element.labelLine = {
            show: false,
            lineStyle: {
              opacity: 0,
              color: 'rgba(255,255,255,0)'
            }
          };
        }
      });
      this.pieOption.series[1].data = this.pieData
      // this.$refs.pieChart.hideLoading()
      this.$refs.pieChart.setOption(this.pieOption)
    },

    handleChangeStatus (status) {
      this.status = status
      this.loadProjectlist()
    },

    handleChangeAgency (value) {

      this.agencyName = this.$refs["myCascader"].getCheckedNodes()[0].label
      this.agencyId = this.agencyIdArray.length > 0 ? this.agencyIdArray[this.agencyIdArray.length - 1] : ''
      this.getApiData()
      console.log(this.agencyIdArray)
    },



    toUserInfo (uid) {
      this.$router.push({ path: `/main-shuju/visual-basicinfo-people/${uid}` });
    },
  },
  props: {
    uid: {
      type: String,
      default: "",
      // default: "8ada68cb6f1e4b9a8333348a39ef3aee",
    },
  },

  computed: {},

  components: {
    cptCard,
    cptTb,
    screenEchartsFrame,
    screenMap,
  },

  watch: {
    uid (id) {
      this.userId = id;
    },
    userId () {
      this.getApiData();
      window.scrollTo(0, 0);
    },
  },
};
</script>

<style
  lang="scss"
  src="@/assets/scss/modules/visual/processAnalyze.scss"
  scoped
></style>

<style lang=scss >
.customer_select {
  /* 未选中任何选项的时候 placeholder的样式 需要先选中父元素 增加权重 */
  /deep/ input::-webkit-input-placeholder {
    color: #fff;
  }
  /deep/ input::-moz-input-placeholder {
    color: #fff;
  }
  /deep/ input::-ms-input-placeholder {
    color: #fff;
  }

  /* 修改的是el-input的样式 */
  /* 一种方法是设置最里层el-input__inner的背景色 外层的两级父元素设置为透明色 */
  /* 另一种方法是从el-select到el-input__inenr的背景色都设置为需要的颜色 */
  /deep/ .el-select,
  /deep/ .el-input,
  /deep/ .el-input__inner {
    background-color: #08164d00;
    color: #fff;
    border: 0px;
    border-radius: 0px;
    text-align: left;
    font-size: 22px;
    font-family: PingFang SC;
    font-weight: 800;
    color: #ffffff;
    display: flex;
  }

  /* el-input聚焦的时候 外层的border会有一个样式 */
  /deep/ .el-select .el-input.is-focus .el-input__inner {
    border: 0px;
  }

  /* 修改的是el-input上下的小图标的颜色 */
  /deep/ .el-select .el-input .el-select__caret::before {
    color: #fff;
    content: "";
    background: url("../../../../assets/img/xiala.png") center center no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* 修改总体选项的样式 最外层 */
  /deep/ .el-select-dropdown {
    background-color: #08164d;
    margin: 0px;
    border: 0px;
    border-radius: 0px;
  }

  /* 修改选项整体的样式 */
  /deep/ .el-select-dropdown__list {
    padding: 6px 0 20px 0;
  }
  /* 修改单个的选项的样式 */
  /deep/ .el-select-dropdown__item {
    background-color: transparent;
    color: #fff;
  }

  /* item选项的hover样式 */
  /deep/ .el-select-dropdown__item.hover,
  /deep/ .el-select-dropdown__item:hover {
    color: #409eff;
  }

  /* 修改的是下拉框选项内容上方的尖角 */
  /deep/ .el-popper .popper__arrow,
  .el-popper .popper__arrow::after {
    display: none;
  }
}