数据统计图

src/api/zdsz/overhead.js

@@ -29,9 +29,16 @@ export function getEnginSpecificationsList(materId) {
      params: {materId:materId}
   })
 }
-export function getsumStatus(materId) {
+export function getsumStatus(district) {
   return request({
-    url: `/zdsz/engineeringCivil/getsumStatus?enginCycle=0`,
+    url: `/zdsz/engineeringCivil/getsumStatus?district=`+district,
+    method: 'get',
+  })
+}
+
+export function selectByDistrictStatistics(district) {
+  return request({
+    url: `/zdsz/engineeringCivil/selectByDistrictStatistics?district=`+district,
     method: 'get',
   })
 }

src/components/EnginNodeInfo/index.vue

@@ -159,7 +159,7 @@
           >
             <!--                  :rules="[{required: true, message: '请输入数量', trigger: 'change'},{validator: [checkPositiveInteger], trigger: 'blur'}]"-->
             <div class="block" style="display: inline-block; margin-right: 20px;">
-              <el-input v-model="item.number" placeholder="请输入数量" style="width: 100%" type="number" oninput="value = value.replace(/[^\d]/g, '');if(value.length>9); value=value.slice(0,9)" :disabled="status == 'read-only'"></el-input>
+              <el-input-number v-model="item.number" placeholder="请输入数量" style="width: 100%" max="999999" precision="1" :controls="false" :disabled="status == 'read-only'"></el-input-number>
             </div>
           </el-form-item>
         </el-col>
@@ -323,7 +323,6 @@ export default {
   },
   created(){
     let data = {enginType:this.enginType}
-    debugger
     if (this.enginSort !== undefined){
       data['enginSort'] = this.enginSort
       data['enginNode'] = this.enginNode

src/views/zdsz/enginee/material/echarts_statistics/index.vue

@@ -1,4 +1,3 @@
-
 <template>
   <div class="MaterialStatistics_Contain">
     <el-radio-group v-model="currentMenu" style="margin-bottom: 20px;" @input="toModule">
@@ -8,65 +7,83 @@
       <el-radio-button label="3">可视化进度</el-radio-button>
     </el-radio-group>
     <!--        <div class="topContain">-->
-    <div style="width: 100%;height: 100%;display: flex;">
-      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-<!--    <el-form-item label="工程周期" prop="enginCycle">-->
-<!--      <el-select v-model="queryParams.enginCycle" filterable clearable placeholder="请选择工程周期"-->
-<!--                 @change="getsumStatus(queryParams.enginCycle)"-->
-<!--      >-->
-<!--        <el-option-->
-<!--          v-for="dict in dict.type.engin_cycle"-->
-<!--          :key="dict.value"-->
-<!--          :label="dict.label"-->
-<!--          :value="dict.value"-->
-<!--        />-->
-<!--      </el-select>-->
-<!--    </el-form-item>-->
-      </el-form>
-  </div>
-    <div style="height: 800px;width: 1700px">
-<div id="main" style="height: 100%;width: 100%"></div>
-      </div>
+    <div style="width: 100%;height: 100%;display: flex;text-align: center">
+      <el-button type="primary" size="mini" plain v-if="fhShow" @click="getDicts()">返回上级</el-button>
+    </div>
+    <div style="width: 100%;height: 100%;display: flex;text-align: center">
+      <span v-if="fhShow" style="font-size: 20px;width:100%;text-align: center"> {{xxxqushuju}} - 数据统计图</span>
+    </div>
+    <div style="height: 75vh;width: 1700px;">
+      <el-row v-if="!fhShow">
+        <el-col :span="6" v-for=" (item,index) in dictValueList" style="height: 25vh;border: #2b2f3a">
+          <div :id="'maim_'+index" style="height: 100%;width: 100%;"
+               :key="index"></div>
+        </el-col>
+      </el-row>
+      <div id="zhuzhuangtu" style="width: 100%;height: 75vh" v-if="fhShow"></div>
+    </div>
+
   </div>
 </template>
 
 <script>
 import * as echarts from 'echarts';
-import {getsumStatus} from "@/api/zdsz/overhead";
+import {getsumStatus, selectByDistrictStatistics} from "@/api/zdsz/overhead";
+import {getDicts} from "@/api/system/dict/data";
+
 export default {
-  name:'EchartsStatistics',
-  dicts:['engin_cycle'],
-  data(){
+  name: 'EchartsStatistics',
+  dicts: ['engin_cycle'],
+  data() {
     return {
-      currentMenu:2,   // 0:用料管理 1:进度统计 2:可视化进度
-      showSearch:true,
-      queryParams:{enginCycle:'0'},
-
+      currentMenu: 2,   // 0:用料管理 1:进度统计 2:可视化进度
+      showSearch: true,
+      fhShow: true,
+      xxxqushuju: '',
+      dictValueList: [],
+      dictLabelList: [],
+      queryParams: {enginCycle: '0'},
     }
   },
-  mounted(){
-  this.getsumStatus(0)
+  mounted() {
+    this.getDicts()
   },
   methods: {
-    getsumStatus(val)
-    {
-      getsumStatus(val).then(res=>{
-        let data=[{
-          value: parseInt(res.data.notstart),name:'未施工'
-        },{
-          value: parseInt(res.data.willDone),name:'施工中'
-        },{
-          value: parseInt(res.data.done),name:'竣工'
+    getDicts() {
+      this.fhShow = false
+      getDicts("district").then(res => {
+        this.dictValueList = res.data.map(t => t.dictValue)
+        this.dictLabelList = res.data.map(t => t.dictLabel)
+        for (let i = 0; i < this.dictValueList.length; i++) {
+          this.getsumStatus(this.dictValueList[i], i)
+        }
+      })
+    },
+    getsumStatus(district, index) {
+      getsumStatus(district).then(res => {
+        console.log(this.dictLabelList[index], res)
+        let data = [{
+          value: parseInt(res.data.weishigong), name: '未施工'
+        }, {
+          value: parseInt(res.data.shigongzhong), name: '施工中'
+        }, {
+          value: parseInt(res.data.jungong), name: '竣工'
         }]
         let color = ['#FFC881', '#5DB3FF', '#80D9AE'];
-        let  option={
+        let option = {
+          title: {
+            text: this.dictLabelList[index],
+            textStyle: {
+              color: 'rgb(0 0 0)',
+              fontSize: 18,
+              // fontWeight: 'normal',
+            },
+            x: 'center',
+            y: '85%',
+          },
           tooltip: {
             trigger: 'item'
           },
-          legend: {
-            top: '5%',
-            left: 'center'
-          },
           color: color,
           series: [
             {
@@ -84,22 +101,407 @@ export default {
             }
           ]
         }
-        this.initmian(option)
+        this.initmian(option, index)
       })
     },
-    initmian(option)
-    {
+    initmian(option, index) {
       console.log(option)
-      var chartDom = document.getElementById('main');
+      let that = this
+      var chartDom = document.getElementById('maim_' + index);
       var myChart = echarts.init(chartDom);
       myChart.clear()
-      myChart.setOption(option,true)
+      myChart.setOption(option, true)
+      myChart.on('click', function (params) {
+        // 此处一般写：click事件触发后的回调，来完成额外的功能
+        selectByDistrictStatistics(that.dictValueList[index]).then(res => {
+          that.fhShow = true
+          that.xxxqushuju = that.dictLabelList[index]
+          setTimeout(()=>that.initZhuzhangtu(res.data),500)
+        })
+
+      });
+    },
+    initZhuzhangtu(data){
+      let arr = [];
+      let list = [];
+      let series = [];
+      let legend = [];
+      let fontSize = 16;
+      let barWidth = 26;
+      let barGap = 0;
+      let maxList = [];
+      let mapx = [Math.max.apply(null,data.wsh),Math.max.apply(null,data.ysg),Math.max.apply(null,data.jg)]
+      let max = Math.max.apply(null,mapx); //背景最大值取y轴刻度线（最后注释部分）
+      let colorStartList = ['transparent', 'transparent', 'transparent'];
+      let colorLeftList = ['#000', '#000', '#000'];
+      let colorTopList = ['#1E7EFF', '#FFA75A', '#6ACC29'];
+      let colorEndList = ['#4084EE', '#FF8D28', '#6ACC29'];
+      let chartObj = {
+        series: [
+          { name: '未施工', data: data.wsh },
+          { name: '已施工', data: data.ysg },
+          { name: '竣工', data: data.jg },
+        ],
+        chartList: data.name,
+      };
+      function colorRgba(str, alpha) {
+        let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
+        var sColor = str.toLowerCase();
+        if (sColor == 'transparent') {
+          return 'transparent';
+        }
+        if (sColor && reg.test(sColor)) {
+          if (sColor.length === 4) {
+            var sColorNew = '#';
+            for (let i = 1; i < 4; i += 1) {
+              sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
+            }
+            sColor = sColorNew;
+          }
+          //处理六位的颜色值
+          var sColorChange = [];
+          for (let i = 1; i < 7; i += 2) {
+            sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)));
+          }
+          return 'rgba(' + sColorChange.join(',') + ',' + alpha + ')';
+        } else {
+          return sColor;
+        }
+      }
+      if (chartObj.series && chartObj.series.length) {
+        chartObj.series.forEach((ele, i) => {
+          arr = arr.concat(ele.data);
+        });
+        maxList = chartObj.series[0].data.map(() => {
+          return max;
+        });
+        list = chartObj.series[0].data.map((item, index) => {
+          return 1;
+        });
+        chartObj.series.forEach((item, index) => {
+          legend.push({
+            name: item.name,
+            itemStyle: {
+              color: colorEndList[index % colorEndList.length],
+            },
+          });
+
+          //底部切片
+          series.push({
+            data: list,
+            color: colorStartList[index % colorStartList.length],
+            type: 'pictorialBar',
+            tooltip: {
+              show: false,
+            },
+            barMaxWidth: fontSize * 3,
+            symbol: 'diamond',
+            symbolOffset: [
+              (-0.5 * (chartObj.series.length - 1) +
+                index +
+                -0.5 * barGap * 0.01 * (chartObj.series.length - 1) +
+                barGap * 0.01 * index) *
+              barWidth,
+              '50%',
+            ],
+            symbolSize: [barWidth, barWidth * 0.5],
+          });
+
+          //实际数据顶部切片
+          series.push({
+            data: item.data,
+            type: 'pictorialBar',
+            tooltip: {
+              show: false,
+            },
+            barMaxWidth: fontSize * 3,
+            color: colorTopList[index],
+            symbolPosition: 'end',
+            symbol: 'diamond',
+            symbolOffset: [
+              (-0.5 * (chartObj.series.length - 1) +
+                index +
+                -0.5 * barGap * 0.01 * (chartObj.series.length - 1) +
+                barGap * 0.01 * index) *
+              barWidth,
+              '-50%',
+            ],
+            symbolSize: [barWidth, barWidth * 0.4],
+            zlevel: 2,
+          });
+          //实际数据侧边切片
+          series.push({
+            data: item.data,
+            type: 'pictorialBar',
+            tooltip: {
+              show: false,
+            },
+            barMaxWidth: fontSize * 3,
+            color: {
+              x: 0,
+              y: 1,
+              x2: 0,
+              y2: 0,
+              type: 'linear',
+              global: false,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: 'transparent',
+                },
+                {
+                  offset: 0.2,
+                  color: colorRgba(colorLeftList[index % colorLeftList.length], 0.2),
+                },
+                {
+                  offset: 1,
+                  color: colorRgba(colorLeftList[index % colorLeftList.length], 0.3),
+                },
+              ],
+            },
+            symbolPosition: 'end',
+            symbol: 'rect',
+            symbolSize: [barWidth / 2, '100%'],
+            symbolOffset: [
+              (-0.5 * (chartObj.series.length - 1) +
+                index +
+                -0.5 * barGap * 0.01 * (chartObj.series.length - 1) +
+                barGap * 0.01 * index -
+                0.25) *
+              barWidth,
+              0,
+            ],
+            zlevel: 1,
+          });
+          //柱子
+          series.push({
+            data: item.data,
+            type: 'bar',
+            name: item.name,
+            barGap: barGap + '%',
+            barWidth: barWidth,
+            barMaxWidth: fontSize * 3,
+            label: {
+              show: false,
+              position: 'top',
+              distance: fontSize * 0.3,
+              textStyle: {
+                color: colorEndList[index % colorEndList.length],
+                fontSize: fontSize,
+              },
+              // formatter: function (a, b) {
+              //     return a.value==0?'':a.value;
+              // },
+            },
+            showBackground: true,
+            backgroundStyle: {
+              color: "#fff"
+            },
+            itemStyle: {
+              color: {
+                x: 0,
+                y: 1,
+                x2: 0,
+                y2: 0,
+                type: 'linear',
+                global: false,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: colorStartList[index % colorStartList.length],
+                  },
+                  {
+                    offset: 0.2,
+                    color: colorRgba(colorEndList[index % colorEndList.length], 0.2),
+                  },
+                  {
+                    offset: 1,
+                    color: colorRgba(colorEndList[index % colorEndList.length], 1),
+                  },
+                ],
+              },
+            },
+          });
+        });
+      }
+      let option = {
+        // backgroundColor: "#061326",
+        title: {
+          text: '',
+          top: 20,
+          left: 'center',
+          textStyle: {
+            color: '#fff',
+            fontSize: 20,
+          },
+        },
+        dataZoom: [
+          {
+            // 设置滚动条的隐藏与显示
+            show: true,
+            // 设置滚动条类型
+            type: "slider",
+            // 设置背景颜色
+            backgroundColor: "#778899",
+            // 设置选中范围的填充颜色
+            fillerColor: "#87CCFF",
+            // // 设置边框颜色
+            // borderColor: "rgb(19, 63, 100)",
+            // 是否显示detail，即拖拽时候显示详细数值信息
+            showDetail: false,
+            // 数据窗口范围的起始数值
+            startValue: 0,
+            // 数据窗口范围的结束数值（一页显示多少条数据）
+            endValue: 8,
+            // empty：当前数据窗口外的数据，被设置为空。
+            // 即不会影响其他轴的数据范围
+            filterMode: "empty",
+            // 设置滚动条宽度，相对于盒子宽度
+            width: "100%",
+            // 设置滚动条高度
+            height: 8,
+            // 设置滚动条显示位置
+            left: "center",
+            // 是否锁定选择区域（或叫做数据窗口）的大小
+            zoomLoxk: true,
+            // 控制手柄的尺寸
+            handleSize: 0,
+            // dataZoom-slider组件离容器下侧的距离
+            bottom: 3,
+          },
+          {
+            // 没有下面这块的话，只能拖动滚动条，
+            // 鼠标滚轮在区域内不能控制外部滚动条
+            type: "inside",
+            // 滚轮是否触发缩放
+            zoomOnMouseWheel: false,
+            // 鼠标滚轮触发滚动
+            moveOnMouseMove: true,
+            moveOnMouseWheel: true,
+          },
+        ],
+        tooltip: {
+          show: true,
+          trigger: 'axis',
+          backgroundColor: 'rgba(116,176,222,0.3)',
+          extraCssText: 'box-shadow: 0 0 8px rgba(0, 128, 255, 0.27) inset;',
+          borderWidth: 0,
+          confine: false,
+          appendToBody: true,
+          formatter: (params) => {
+            ////console.log(params,'---paramsshopping')
+            let result = "<div style='margin-bottom:5px;'>" + params[0].name + '</div>';
+            params.forEach((item, index) => {
+              var dotHtml = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:${fontSize}px;height:${fontSize}px;background:${colorEndList[index]}"></span>`;
+              result +=
+                "<div style='display:flex;align-items:center;margin-bottom:5px'>" +
+                dotHtml +
+                item.seriesName +
+                (item.seriesName ? "<span style='display:inline-block;margin-right:6px;'></span>" : '') +
+                item.data +
+                '</div>';
+            });
+            return result;
+          },
+          //轴触发提示才有效
+          axisPointer: {
+            type: 'shadow',
+            shadowStyle: {
+              color: 'rgba(35,49,77,0.01)',
+            },
+          },
+          textStyle: {
+            color: '#fff',
+            fontSize: fontSize,
+          },
+        },
+        grid: {
+          top: fontSize * 3.5,
+          left: 5,
+          right: 5,
+          bottom: fontSize,
+          containLabel: true, //包括文本，居中
+        },
+        legend: {
+          show: true,
+          data: legend,
+          selectedMode: false, //图例是否可以点击
+          type: 'scroll',
+          icon: 'circle',
+          itemWidth: fontSize,
+          itemHeight: fontSize,
+          textStyle: {
+            color: '#C3E3F9',
+            fontSize: fontSize,
+          },
+        },
+        xAxis: {
+          data: chartObj.chartList,
+          type: 'category',
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#2B72A1',
+            },
+          },
+          axisLabel: {
+            fontSize: fontSize,
+            color: '#87CCFF',
+          },
+          splitLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          interval: 0,
+        },
+        yAxis: [
+          {
+            type: 'value',
+            name: '房间数',
+            nameGap: fontSize * 1.5,
+            nameTextStyle: {
+              align: 'center',
+              fontSize: fontSize,
+              color: '#2869A9',
+            },
+            splitNumber: 4,
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: 'rgba(255,255,255,0.1)',
+              },
+            },
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              margin: 10,
+              fontSize: fontSize,
+              color: '#2869A9',
+            },
+            axisTick: {
+              show: true,
+              lineStyle: {
+                color: '#2869A9',
+              },
+            },
+          },
+        ],
+        series: series,
+      };
+
+      var myChart = echarts.init(document.getElementById('zhuzhuangtu'));
+      if(option){
+        myChart.setOption(option);
+      }
     },
-    toModule(){
+    toModule() {
       console.log(this.$router)
-      const currentPage = this.currentMenu == 0 ? 'material_statistics' : this.currentMenu == 1 ? 'progres_statistics' :this.currentMenu == 2 ? 'echarts_statistics': 'progres_visual'
+      const currentPage = this.currentMenu == 0 ? 'material_statistics' : this.currentMenu == 1 ? 'progres_statistics' : this.currentMenu == 2 ? 'echarts_statistics' : 'progres_visual'
       this.$router.push({
-        path:`/${currentPage}`
+        path: `/${currentPage}`
       })
     }
   }
@@ -107,22 +509,25 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.tags-view-container{
+.tags-view-container {
   display: none;
 }
-.MaterialStatistics_Contain{
+
+.MaterialStatistics_Contain {
   width: 100%;
   height: 100%;
   padding: 1%;
-  .topContain{
+
+  .topContain {
     display: flex;
     justify-content: space-between;
     width: 100%;
     height: 40px;
 
-    ::v-deep .projectSelect{
+    ::v-deep .projectSelect {
       width: 16%;
-      .el-input__inner{
+
+      .el-input__inner {
         // font-size: 15px;
         // height: 40px ;
         // background-color: #1890FF;
@@ -131,74 +536,91 @@ export default {
       }
     }
 
-    ::v-deep .districtSelect{
+    ::v-deep .districtSelect {
       width: 200px;
     }
-    ::v-deep .communitySelect{
+
+    ::v-deep .communitySelect {
       margin-left: 2%;
       width: 200px;
     }
-    ::v-deep .projectSelect:not(:nth-child(1)){
+
+    ::v-deep .projectSelect:not(:nth-child(1)) {
       margin-left: 1%;
     }
-    ::v-deep .projectSelect:nth-child(3){
+
+    ::v-deep .projectSelect:nth-child(3) {
       width: 10%;
     }
-    ::v-deep .projectSelect:nth-child(4){
+
+    ::v-deep .projectSelect:nth-child(4) {
       width: 10%;
     }
-    .projectDropDown{
+
+    .projectDropDown {
       background-color: #1890FF;
-      .el-select-dropdown__item{
+
+      .el-select-dropdown__item {
         background-color: #1890FF;
         color: #fff;
       }
+
       ::v-deep .el-select-dropdown__list {
         padding-top: 0 !important;
         padding-bottom: 0;
       }
     }
-    .projectDropDown >ul{
-      padding-top: 0 ;
+
+    .projectDropDown > ul {
+      padding-top: 0;
       padding-bottom: 0;
     }
   }
-  .materialStatisticsTable{
+
+  .materialStatisticsTable {
     margin-top: 1%;
     border: 2px solid #000066 !important;
 
   }
-  .materialStatisticsTable::before{
-    background-color:#000066 ;
+
+  .materialStatisticsTable::before {
+    background-color: #000066;
   }
-  .materialStatisticsTable::after{
-    background-color:#000066 ;
+
+  .materialStatisticsTable::after {
+    background-color: #000066;
   }
 }
 </style>
 
 <style lang="scss" scoped>
-.customTable{
-  .el-table__header-wrapper th{
+.customTable {
+  .el-table__header-wrapper th {
     background-color: #199ED8;
   }
-  .el-table--border th.el-table__cell{
+
+  .el-table--border th.el-table__cell {
     border: 2px solid #000066 !important;
   }
-  .el-table__empty-block{
+
+  .el-table__empty-block {
     background-color: #199ED8;
   }
-  .el-table__empty-text{
+
+  .el-table__empty-text {
     color: #000066;
   }
-  .el-table__cell{
-    background-color: #199ED8 ;
+
+  .el-table__cell {
+    background-color: #199ED8;
     border: 2px solid #000066 !important;
   }
-  .el-table__cell >div{
+
+  .el-table__cell > div {
     text-align: center;
   }
-  .el-button{
+
+  .el-button {
     background-color: #169BD5;
     color: #fff;
   }