task 46154 产业一张图

src/api/index.js

@@ -15,3 +15,12 @@ export function getThreeList (query) {
         params: query
     })
 }
+
+
+export function getIndustry (query) {
+    return request({
+        url: '/api/asset/industry/dataScreen',
+        method: 'get',
+        params: query
+    })
+}

src/components/charts/bar-stack/index.js

@@ -12,11 +12,13 @@ export default {
         return [
           {
             name: '1月',
-            value: '10'
+            value: '10',
+            data: []
           },
           {
             name: '2月',
-            value: '19'
+            value: '19',
+            data: []
           }
         ];
       }
@@ -29,10 +31,6 @@ export default {
       type: Number,
       default: null
     },
-    rotate: {
-      type: Number,
-      default: 0
-    },
     serverName: {
       type: String,
       default: '面积'
@@ -52,7 +50,8 @@ export default {
   },
   data () {
     return {
-      chart: null
+      chart: null,
+      rotate: 0
     };
   },
   watch: {
@@ -108,15 +107,30 @@ export default {
     chartSetOption () {
       let xAxisData = [];
       let data = [];
-      let bgData = [];
+      this.data[0]?.data.forEach(child =>{
+        data.push({
+          name: child.dataNum1,
+          barWidth: 20,
+          type: 'bar',
+          stack: 'Ad',
+          emphasis: {
+            focus: 'series'
+          },
+          data: []
+        })
+      })
       this.data.forEach(item => {
-        xAxisData.push(item.name)
-        data.push(item.value)
-        bgData.push(100)
+        xAxisData.push(item.deptName);
+        item.data.forEach(child =>{
+          data.forEach(son =>{
+            if (child.dataNum1 == son.name ){
+              son.data.push(child.dataNum2)
+            }
+          })
+        })
       });
-
       const option = {
-        color: ["#2195fe","#04e26f","#f7cc3a","#f77e3f"],
+        color: ["#2195fe","#04e26f","#f7cc3a","#e23ff7","#f77e3f"],
         tooltip: {
           trigger: "axis",
           axisPointer: {
@@ -127,16 +141,15 @@ export default {
           }
         },
         legend: {
-          data: ["村集体", "农民", "公司", "其它"],
-          top: '3%',
-          right: '5%',
+          top: '0%',
+          right: '2%',
           textStyle: {
             color: 'rgba(210, 238, 255, 1)',
           },
         },
         grid: {
           left: "5%",
-          right: "5%",
+          right: "2%",
           bottom: "5%",
           top: "15%",
           containLabel: true,
@@ -159,7 +172,7 @@ export default {
             },
             type: "category",
             gridIndex: 0,
-            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],//xAxisData
+            data: xAxisData,//xAxisData
             axisTick: {
               alignWithLabel: true,
             },
@@ -222,45 +235,7 @@ export default {
             }
           },
         ],
-        series: [
-          {
-            name: '村集体',
-            barWidth: 20,
-            type: 'bar',
-            stack: 'Ad',
-            emphasis: {
-              focus: 'series'
-            },
-            data: [320, 332, 301, 334, 390, 330, 320]
-          },
-          {
-            name: '农民',
-            type: 'bar',
-            stack: 'Ad',
-            emphasis: {
-              focus: 'series'
-            },
-            data: [120, 132, 101, 134, 90, 230, 210]
-          },
-          {
-            name: '公司',
-            type: 'bar',
-            stack: 'Ad',
-            emphasis: {
-              focus: 'series'
-            },
-            data: [220, 182, 191, 234, 290, 330, 310]
-          },
-          {
-            name: '其它',
-            type: 'bar',
-            stack: 'Ad',
-            emphasis: {
-              focus: 'series'
-            },
-            data: [150, 232, 201, 154, 190, 330, 410]
-          },
-        ]
+        series: data
       };
       this.chart.setOption(option);
       this.initResizeCallBack();

src/components/charts/lines/index.js

@@ -12,11 +12,13 @@ export default {
         return [
           {
             name: '1月',
-            value: '10'
+            value1: '10',
+            value2: '20',
           },
           {
             name: '2月',
-            value: '19'
+            value1: '19',
+            value2: '20',
           }
         ];
       }
@@ -36,11 +38,27 @@ export default {
   },
   data () {
     return {
-      chart: null
+      chart: null,
+      rotate: 0
     };
   },
+  watch: {
+    data: {
+      handler: function (val) {
+        this.$nextTick(function () {
+          setTimeout(() => {
+            this.initChart();
+          }, 2000)
+        });
+      },
+      immediate: true,
+      deep: true
+    }
+  },
   mounted () {
-    this.initChart();
+    // setTimeout(()=>{
+    //   this.initChart();
+    // },2000)
   },
   computed: {
   },
@@ -50,7 +68,20 @@ export default {
       const erd = elementResizeDetectorMaker();
       erd.listenTo(document.getElementById(this.id), () => {
         this.$nextTick(() => {
+          if (document.getElementById(this.id).offsetWidth > 500){
+            this.rotate = 60;
+          }else{
+            this.rotate = 0;
+          }
           this.chart.resize();
+          this.chart.setOption({
+            // 新的配置项，例如：
+            xAxis: {
+              axisLabel: {
+                rotate: this.rotate
+              },
+            }
+          });
         });
       });
     },
@@ -60,16 +91,19 @@ export default {
     },
     chartSetOption () {
 
-      // let xAxisData = [];
-      // let data = [];
-      // this.data.forEach(item => {
-      //   xAxisData.push(item.name)
-      //   data.push(item.value)
-      // });
+      let xAxisData = [];
+      let data1 = [];
+      let data2 = [];
+      let legend = this.data[0]?.legend;
+      this.data.forEach(item => {
+        xAxisData.push(item.name)
+        data1.push(item.value1)
+        data2.push(item.value2)
+      });
       const option = {
         grid: {
           left: "5%",
-          right: "10%",
+          right: "2%",
           top: "15%",
           bottom: "10%",
           containLabel: true,
@@ -109,7 +143,7 @@ export default {
             splitLine: {
               show: false
             },
-            data: ['鸭池镇','梨树镇','岔河镇','田坝镇','长春镇堡','八寨镇','林口镇'] //xAxisData
+            data: xAxisData
           },
         ],
         yAxis: [
@@ -143,7 +177,7 @@ export default {
         ],
         series: [
           {
-            name: 'Email',
+            name: legend[0],
             type: 'line',
             stack: 'Total',
             smooth: true,
@@ -168,10 +202,10 @@ export default {
                 },
               },
             },
-            data: [120, 132, 101, 134, 90, 230, 210]
+            data: data1
           },
           {
-            name: 'Union Ads',
+            name: legend[1],
             type: 'line',
             stack: 'Total',
             smooth: true,
@@ -196,7 +230,7 @@ export default {
                 },
               },
             },
-            data: [220, 182, 191, 234, 290, 330, 310]
+            data: data2
           },
           // {
           //   name: "",

src/views/industry/comps/buttom/1/index.html

@@ -1,52 +1,51 @@
 <div class="buttom2">
-    <div style="display: flex;justify-content: space-between;">
-        <div class="flex_main">
-            <i></i>
-            <p class="tt">集体资源资产统计</p>
-            <div class="flex_block">
-                <p>数量</p>
-                <p>{{data.jtzyzc.num}}个</p>
-            </div>
-            <div class="flex_block">
-                <p>用地面积</p>
-                <p>{{data.jtzyzc.ydmj}}亩</p>
-            </div>
-            <div class="flex_block">
-                <p>建筑面积</p>
-                <p>{{data.jtzyzc.jzmj}}㎡</p>
-            </div>
+  <table>
+    <tr>
+      <td>
+        <div class="block_value">
+          <img src="./bg2.png" alt="">
+          <div class="value_pos">
+            <div class="value nowrap‌">{{data.dataNum1}}</div>
+            <div class="name nowrap‌">产业总数（个）</div>
+          </div>
         </div>
-        <div class="flex_main">
-            <i></i>
-            <p class="tt">农业设施设备统计</p>
-            <div class="flex_block">
-                <p>数量</p>
-                <p>{{data.nysssb.num}}个</p>
-            </div>
-            <div class="flex_block">
-                <p>用地面积</p>
-                <p>{{data.nysssb.ydmj}}亩</p>
-            </div>
-            <div class="flex_block">
-                <p>建筑面积</p>
-                <p>{{data.nysssb.jzmj}}㎡</p>
-            </div>
+      </td>
+      <td>
+        <div class="block_value">
+          <img src="./bg2.png" alt="">
+          <div class="value_pos">
+            <div class="value nowrap‌">{{data.dataNum2}}</div>
+            <div class="name nowrap‌">产业占地面积（亩）</div>
+          </div>
         </div>
-        <div class="flex_main">
-            <i></i>
-            <p class="tt">农户资产统计</p>
-            <div class="flex_block">
-                <p>数量</p>
-                <p>{{data.nhzc.num}}个</p>
-            </div>
-            <div class="flex_block">
-                <p>用地面积</p>
-                <p>{{data.nhzc.ydmj}}亩</p>
-            </div>
-            <div class="flex_block">
-                <p>建筑面积</p>
-                <p>{{data.nhzc.jzmj}}㎡</p>
-            </div>
+      </td>
+      <td>
+        <div class="block_value">
+          <img src="./bg2.png" alt="">
+          <div class="value_pos">
+            <div class="value nowrap‌">{{data.dataNum3}}</div>
+            <div class="name nowrap‌">产业投资额（万）</div>
+          </div>
         </div>
-    </div>
+      </td>
+      <td>
+        <div class="block_value">
+          <img src="./bg2.png" alt="">
+          <div class="value_pos">
+            <div class="value nowrap‌">{{data.dataNum4}}</div>
+            <div class="name nowrap‌">产业估值（万）</div>
+          </div>
+        </div>
+      </td>
+      <td>
+        <div class="block_value">
+          <img src="./bg2.png" alt="">
+          <div class="value_pos">
+            <div class="value nowrap‌">{{data.dataNum5}}</div>
+            <div class="name nowrap‌">年利润（万）</div>
+          </div>
+        </div>
+      </td>
+    </tr>
+  </table>
 </div>

src/views/industry/comps/buttom/1/index.js

@@ -1,8 +1,5 @@
-import BlockValue from '@/components/value/index.vue';
+import { mapGetters } from 'vuex'
 export default {
-  components: {
-    BlockValue
-  },
   props: {
     data: {
       type: Object,
@@ -11,6 +8,26 @@ export default {
       }
     }
   },
+  components: {
+  },
+  computed: {
+    ...mapGetters(['year', 'deptId'])
+  },
+
+  watch: {
+    // year: {
+    //   handler () {
+    //     this.getData();
+    //   },
+    //   immediate: true, // 立即执行
+    // },
+    // deptId: {
+    //   handler () {
+    //     this.getData();
+    //   },
+    //   immediate: true, // 立即执行
+    // }
+  },
   data () {
     return {
     };
@@ -20,5 +37,21 @@ export default {
   mounted () {
   },
   methods: {
+    getData () {
+      if (this.year, this.deptId) {
+        this.isLoad = false;
+        // Resources(this.deptId, this.year).then(res => {
+        //   this.data[0][0].value = res.data.nyd
+        //   this.data[0][1].value = res.data.jsyd
+        //   this.data[0][2].value = res.data.wlydjlm
+        //   this.data[0][3].value = res.data.numNyd
+        //   this.data[0][4].value = res.data.numJsyd
+        //   this.data[0][5].value = res.data.numWlydjlm
+        //
+        //   this.data = data
+        //   this.isLoad = true;
+        // })
+      }
+    },
   }
 };

src/views/industry/comps/buttom/1/index.scss

@@ -1,94 +1,70 @@
 .buttom2 {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  position: absolute;
-  bottom: 30px;
-  left: 460px;
-  z-index: 2;
-  flex: 1;
-  .flex_main{
-    background: url("bg.png") no-repeat 10px center;
-    background-size: calc(100% - 10px) 100%;
-    width: 220px;
-    height: 150px;
-    padding: 15px 15px 15px 25px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    margin-bottom: 15px;
-    position: relative;
-    .flex_block{
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      p:nth-child(1){
-        color: #e6f1ff;
-      }
-    }
-    .tt{
-      text-shadow: 2px 2px 4px #000000;
-      font-size: 18px;
-      font-weight: bold;
-    }
-    i{
-      display: block;
-      height: 100%;
-      width: 5px;
-      position: absolute;
-      top: 0;
-      left: 0;
-    }
-    &:nth-child(1){
-      i{
-        background-color: #00d6f8;
-      }
-      .flex_block{
-        p:nth-child(2){
-          color: #00d6f8;
-        }
-      }
-    }
-    &:nth-child(2){
-      i{
-        background-color: #f7cc3a;
-      }
-      .flex_block{
-        p:nth-child(2){
-          color: #f7cc3a;
-        }
-      }
-    }
-    &:nth-child(3){
-      i{
-        background-color: #04e26f;
-      }
-      .flex_block{
-        p:nth-child(2){
-          color: #04e26f;
-        }
+  width: 960px;
+
+  table {
+    width: 100%;
+
+    tr {
+      width: 100%;
+
+      td {
+
+        width: 16.6%;
       }
     }
   }
-
-  .flex_main_right{
-    background: url("bg2.png") no-repeat center;
-    background-size: 100% 100%;
-    width: 220px;
-    height: 100px;
-    margin-bottom: 15px;
+}
+.block_value {
+  background: url('./bg1.png');
+  background-size: 100% 100%;
+  width: 130px;
+  height: 130px;
+  position: relative;
+  img{
+    height: 90px;
+    width: 100%;
+    position: absolute;
+    z-index: -1;
+    animation: 2s timeAmXsf1 0.1s infinite;
+  }
+  .value_pos {
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: space-evenly;
-    p:nth-child(1){
-      color: #01d5f8;
-      font-size: 26px;
+    height: 70px;
+    .value {
+      font-family: Arial;
       font-weight: bold;
-      span{
-        font-size: 14px;
-      }
+      font-size: 24px;
+      color: #FFFFFF;
+      line-height: 30px;
+      text-shadow: 0px 3px 2px #05357D;
+    }
+
+    .name {
+      font-weight: 500;
+      font-size: 14px;
+      color: #B9D3EB;
+      text-shadow: 0px 3px 3px rgba(30, 63, 112, 0.6);
+      background: linear-gradient(180deg, #FEFFFF 17.4072265625%, #e0e9f9 99.6337890625%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
     }
   }
 
 }
+
+
+@keyframes timeAmXsf1 {
+  0% {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}

src/views/industry/comps/left/top/1/index.html

@@ -5,7 +5,7 @@
               :color="['#f7cc3a', '#f7803f']"
               :barBorderRadius="[15, 15, 15, 15]"
               :data="data"
-              unit="单位：亩"
+              unit="单位：个"
       ></Bar>
     </div>
   </div>

src/views/industry/comps/right/top/1/index.html

@@ -4,7 +4,7 @@
       <Bar id="bar4"
             :color="['#f7cc3a', '#f7803f']"
             :data="data"
-            unit="单位：亩"
+            unit="单位：个"
       ></Bar>
     </div>
   </div>

src/views/industry/index.html

@@ -2,7 +2,7 @@
   <MainGis @getData="getData"></MainGis>
   <Header title="产业一张图" callBack></Header>
   <!-- 项目初始化 -->
-  <div class="row">
+  <div class="buttom_side row space_between zIndextop">
     <component :is="item.name" v-for="(item, index) in currentComp.buttom" :key="index" :data="item.data"></component>
   </div>
   <div class="left_side col space_between zIndextop">

src/views/industry/index.js

@@ -18,7 +18,7 @@ import MainGis from './main-gis/index.vue';
 
 import { comps } from './data.js'
 
-import { getStatistic } from "@/api/index";
+import { getIndustry } from "@/api/index";
 import { getInfo } from "@/api/login";
 import {mapGetters} from "vuex";
 
@@ -86,56 +86,75 @@ export default {
       this.currentComp.left[0].data = [];
       this.currentComp.left[1].data = [];
       this.currentComp.left[2].data = [];
-      getStatistic({deptId: deptId}).then((response) => {
-        response.data.jtzyzcDeptList.map(rr => {
-          this.currentComp.right[0].data.push({
+      getIndustry({deptId: deptId}).then((response) => {
+
+        // let XArr = response.data.industryRightsDistributionData.map(item => item.deptName).filter((name, index, self) => self.indexOf(name) === index && name !== null);
+        let json = JSON.parse(response.data.industryRightsDistributionData);
+        this.currentComp.left[0].data = json;
+
+        let json2 = JSON.parse(response.data.industryTypeDistributionData);
+        this.currentComp.right[0].data = json2;
+        // console.log(this.currentComp.left[0].data)
+
+        response.data.industryScaleData.map(rr => {
+          this.currentComp.left[1].data.push({
             name: rr.deptName,
-            value: rr.ydmj
+            legend: ['投资金额','产业估值'],
+            value1:rr.dataNum1,
+            value2:rr.dataNum2,
           })
         })
-        response.data.nysssbDeptList.map(rr => {
+
+        response.data.industryOperateData.map(rr => {
           this.currentComp.right[1].data.push({
             name: rr.deptName,
-            value: rr.ydmj
-          })
-        })
-        response.data.nhzcDeptList.map(rr => {
-          this.currentComp.right[2].data.push({
-            name: rr.deptName,
-            value: rr.ydmj
+            legend: ['年销售额','年利润'],
+            value1:rr.dataNum1,
+            value2:rr.dataNum2,
           })
         })
 
-        response.data.jtzyzcTypeList.map(rr => {
-          this.currentComp.left[0].data.push({
-            name: rr.threeDetailType,
-            value: rr.ydmj
-          })
-        })
-        response.data.nysssbTypeList.map(rr => {
-          this.currentComp.left[1].data.push({
-            name: rr.threeDetailType,
-            value: rr.ydmj
+        response.data.industryTypeData.map(rr => {
+          this.currentComp.left[2].data.push({
+            name: rr.dataNum1,
+            value: rr.dataNum2,
+            unit: '万元'
           })
         })
-        response.data.nhzcTypeList.map(rr => {
-          this.currentComp.left[2].data.push({
-            name: rr.threeDetailType,
-            value: rr.ydmj,
+
+        response.data.industryRightsData.map(rr => {
+          this.currentComp.right[2].data.push({
+            name: rr.dataNum1,
+            value: rr.dataNum2,
             unit: '万元'
           })
         })
 
-        this.currentComp.buttom[0].data = {
-          jtzyzc: response.data.jtzyzc,//集体资源资产
-          nysssb: response.data.nysssb,//农业设施设备
-          nhzc: response.data.nhzc,
-        }
+        // response.data.jtzyzcDeptList.map(rr => {
+        //   this.currentComp.right[0].data.push({
+        //     name: rr.deptName,
+        //     value: rr.ydmj
+        //   })
+        // })
+        // response.data.nysssbDeptList.map(rr => {
+        //   this.currentComp.right[1].data.push({
+        //     name: rr.deptName,
+        //     value: rr.ydmj
+        //   })
+        // })
+        // response.data.nhzcDeptList.map(rr => {
+        //   this.currentComp.right[2].data.push({
+        //     name: rr.deptName,
+        //     value: rr.ydmj
+        //   })
+        // })
 
-        this.currentComp.buttom[1].data = {
-          xy23: response.data.xy23,
-          xy24: response.data.xy24
-        }
+        this.currentComp.buttom[0].data = response.data.bottomStatistics[0]
+        //
+        // this.currentComp.buttom[1].data = {
+        //   xy23: response.data.xy23,
+        //   xy24: response.data.xy24
+        // }
 
         console.log(this.currentComp)
         this.allData = response.data;

src/views/industry/index.scss

@@ -5,8 +5,8 @@
   right: 0;
   bottom: 0;
 }
-.buttom_side {
-  top: 100px;
-  bottom: auto;
-  left: 685px;
-}
+//.buttom_side {
+//  top: 100px;
+//  bottom: auto;
+//  left: 685px;
+//}