8.4

src/echarts/options.js

@@ -1861,8 +1861,8 @@ export function setLnxm(ele, dataIn) {
 	let xData = []; let data_zd = []; let data_ds = []
 	dataIn.forEach(row => {
 		xData.push(row.year)
-		data_zd.push(row.zd)
-		data_ds.push(row.ds)
+		data_zd.push(row['重点项目数量'])
+		data_ds.push(row['都市项目数量'])
 	})
 
 	let option = {
@@ -2414,4 +2414,4 @@ export function setWlwjcsb(ele, dataIn, showId) {
 	}
 
 	wlwjcsb = setOptions(ele, option)
-}
+}

src/services/majorProject.js

@@ -0,0 +1,39 @@
+import { service as request } from './index'
+
+/*-----重点项目------*/
+
+
+//历年项目
+export function GetLnxm() {
+    return request({
+        url: '/zdxm/lnxm',
+        method: 'get'
+    })
+}
+
+//项目概况
+export function GetXmgk() {
+    return request({
+        url: '/zdxm/xmgk',
+        method: 'get'
+    })
+}
+
+//项目简介、实景图
+export function GetXmjjAndPic(xmmc) {   //xmmc项目名称
+    return request({
+        url: `/zdxm/xmjj?xmmc=${xmmc}`,
+        method: 'get',
+    })
+}
+
+//项目清单
+export function GetXmList(params) {   //hyly行业领域、sj时间、xmlx项目类型0-全部;1-都市项目;2-重点项目、xz乡镇
+    return request({
+        url: '/zdxm/xmqd',
+        method: 'get',
+        params: {
+            ...params
+        }
+    })
+}

src/views/deck/pages/zhcj_sub/ZhcjZdxm.vue

@@ -22,40 +22,40 @@
       <span class="box-title2">项目清单</span>
       <div class="cl-b3">
         <div class="l3-sort">
-          <el-select v-model="sort_xmqd.type" placeholder="项目类型" class="select-default" popper-class="select-default-popper">
-            <el-option v-for="item in xmTypeArr" :key="item" :label="item" :value="item"></el-option>
+          <el-select v-model="sort_xmqd.xmlx" @change="showXmList" placeholder="项目类型" class="select-default" popper-class="select-default-popper">
+            <el-option v-for="item in xmTypeArr" :key="item.title" :label="item.title" :value="item.value"></el-option>
           </el-select>
-          <el-select v-model="sort_xmqd.year" placeholder="年度" class="select-default" popper-class="select-default-popper">
+          <el-select v-model="sort_xmqd.sj" @change="showXmList" placeholder="年度" class="select-default" popper-class="select-default-popper">
             <el-option v-for="item in yearArr" :key="item" :label="item+'年'" :value="item"></el-option>
           </el-select>
-          <el-select v-model="sort_xmqd.xz" placeholder="乡镇" class="select-default" popper-class="select-default-popper">
+          <el-select v-model="sort_xmqd.xz" @change="showXmList" placeholder="乡镇" class="select-default" popper-class="select-default-popper">
             <el-option label="全部" value="全部"></el-option>
             <el-option v-for="item in XZArr" :key="item.value" :label="item.label" :value="item.value"></el-option>
           </el-select>
-          <el-select v-model="sort_xmqd.hyly" placeholder="行业领域" class="select-default" popper-class="select-default-popper">
+          <el-select v-model="sort_xmqd.hyly" @change="showXmList" placeholder="行业领域" class="select-default" popper-class="select-default-popper">
             <el-option label="全部" value="全部"></el-option>
             <el-option v-for="item in HylyArr" :key="item.value" :label="item.label" :value="item.value"></el-option>
           </el-select>
         </div>
         <ul>
-          <li v-for="item in listData_xmqd" :key='item.name' @click="handlePick(item)">
+          <li v-for="item in listData_xmqd" :key='item.xmmc' @click="handlePick(item)">
             <img :src="item.img" alt="">
             <div>
-              <span class="text-28">{{ item.name }}</span>
+              <span class="text-28">{{ item.xmmc }}</span>
               <div class="li-row2">
                 <div>
                   <img src="@/assets/imgs/deck/page_zhcj/icon-year.png" alt="" class="small-icon">
-                  <span class="text-28">{{ item.year }}</span>
+                  <span class="text-28">{{ item.nd }}</span>
                 </div>
                 <div>
                   <img src="@/assets/imgs/deck/page_zhcj/icon-cny.png" alt="" class="small-icon">
-                  <span class="text-emp-36">{{ item.cost }}</span>
+                  <span class="text-emp-36">{{ item.tz }}</span>
                   <span class="text-28">万</span>
                 </div>
               </div>
               <div class="li-row3">
                 <img src="@/assets/imgs/deck/page_zhcj/icon-location.png" alt="" class="small-icon">
-                <span class="text-28">{{item.location}}</span>
+                <span class="text-28">{{item.dz}}</span>
               </div>
             </div>
           </li>
@@ -65,33 +65,33 @@
     <div class="c-right">
       <div class="cr-b1">
         <span class="box-title1">项目简介</span>
-        <span class="r1-title">{{ data_xmjj.name }}</span>
+        <span class="r1-title">{{ data_xmjj.xmmc }}</span>
         <div class="r1-info">
           <el-row>
             <el-col :span="8">
               <img src="@/assets/imgs/deck/page_zhcj/icon-year.png" alt="">
-              <span class="text-28">{{ data_xmjj.year }}</span>
+              <span class="text-28">{{ data_xmjj.nd }}</span>
             </el-col>
             <el-col :span="16">
               <img src="@/assets/imgs/deck/page_zhcj/icon-cny.png" alt="">
-              <span class="text-emp-36">{{ data_xmjj.cost }}</span>
+              <span class="text-emp-36">{{ data_xmjj.tz }}</span>
               <span class="text-28">万</span>
             </el-col>
           </el-row>
           <el-row>
             <el-col :span="8">
               <img src="@/assets/imgs/deck/page_zhcj/icon-house.png" alt="">
-              <span class="text-28">{{ data_xmjj.town }}</span>
+              <span class="text-28">{{ data_xmjj.xz }}</span>
             </el-col>
             <el-col :span="16">
               <img src="@/assets/imgs/deck/page_zhcj/icon-building.png" alt="">
-              <span class="text-28">{{ data_xmjj.corp }}</span>
+              <span class="text-28">{{ data_xmjj.gs }}</span>
             </el-col>
           </el-row>
           <el-row>
             <el-col :span="24">
               <img src="@/assets/imgs/deck/page_zhcj/icon-location.png" alt="">
-              <span class="text-28">{{ data_xmjj.location }}</span>
+              <span class="text-28">{{ data_xmjj.dz }}</span>
             </el-col>
           </el-row>
         </div>
@@ -115,38 +115,64 @@
 <script>
 import { setLnxm } from '@/echarts/options'
 import { HylyArr, XZArr } from '@/utils/data/select-data'
+import { GetLnxm,GetXmgk,GetXmList,GetXmjjAndPic } from '@/services/majorProject'
 
 export default {
   name: 'ZhcjZdxm',
   data() {
     return {
+      active: 0,
       data_xmgk: [
         { title: '都市项目数量', count: 568 },
         { title: '重点项目数量', count: 568 }
       ],
       sort_xmqd: {
-        type: '',
-        year: '',
+        xmlx: '',
+        sj: '',
         xz: '',
         hyly: ''
       },
       HylyArr,
       XZArr,
       yearArr: [],
-      xmTypeArr: ['全部','都市项目','重点项目'],
+      xmTypeArr: [
+        {title: '全部',value: 0},
+        {title: '都市项目',value: 1},
+        {title: '重点项目',value: 2},
+      ],
       listData_xmqd: [],
       data_pics: [],
       data_jsnr: '',
-      data_xmjj: {}
+      data_xmjj: {},
+      chartData: [
+        { year: '2018年', '重点项目数量': '', '都市项目数量': '' },
+        { year: '2019年', '重点项目数量': '', '都市项目数量': '' },
+        { year: '2020年', '重点项目数量': '', '都市项目数量': '' },
+        { year: '2021年', '重点项目数量': '', '都市项目数量': '' },
+        { year: '2022年', '重点项目数量': '', '都市项目数量': '' },
+      ]
     }
   },
   mounted() {
     this.initDate()
     this.getChartHistory()
-    this.getXmqd()
     this.getProjectDetail()
+    this.showXmgc()
+    this.showXmList()
   },
   methods: {
+    showXmList(){
+      GetXmList(this.sort_xmqd).then(res => {
+        this.listData_xmqd  = res.data
+      })
+    },
+    showXmgc(){
+      GetXmgk().then(res => {
+        this.data_xmgk.forEach(i => {
+          i.count = res.data[i.title]
+        })
+      })
+    },
     initDate() {
       let lastYear = new Date().getFullYear()-1
       for(let i=0; i>-5; i--) {
@@ -155,25 +181,32 @@ export default {
       this.sort_xmqd.year = lastYear
     },
     getChartHistory() {
-      let chartData = [
-        { year: '2018', zd: 31, ds: 16 },
-        { year: '2019', zd: 34, ds: 22 },
-        { year: '2020', zd: 27, ds: 29 },
-        { year: '2021', zd: 23, ds: 33 },
-        { year: '2022', zd: 29, ds: 27 }
-      ]
-      setLnxm(document.getElementById('chart-lnxm'), chartData)
-    },
-    getXmqd() {
-      let tempArr = []
-      let temp = { img: require('@/assets/imgs/deck/page_zhcj/pic-project.png'), year: '2022', cost: '84112', location: '上海市崇明区向化镇花仓村' }
-      for(let i=0; i<10; i++) {
-        tempArr.push({...temp, name: '崇明区向化镇花仓村高标准设施菜田建设项目'+(i+1)})
-      }
-      this.listData_xmqd = tempArr
+      GetLnxm().then(res => {
+        let arr= []
+        Object.keys(res.data).forEach(key => {
+          arr.push({ year: key, ...res.data[key]})
+        })
+        let arr2 = arr.sort(function(a,b){
+          return a.year.substr(0,4)-b.year.substr(0,4)
+        })
+        this.chartData = arr2
+        console.log(arr)
+        setLnxm(document.getElementById('chart-lnxm'), this.chartData)
+      })
     },
+    // getXmqd() {
+    //   let tempArr = []
+    //   let temp = { img: require('@/assets/imgs/deck/page_zhcj/pic-project.png'), year: '2022', cost: '84112', location: '上海市崇明区向化镇花仓村' }
+    //   for(let i=0; i<10; i++) {
+    //     tempArr.push({...temp, name: '崇明区向化镇花仓村高标准设施菜田建设项目'+(i+1)})
+    //   }
+    //   this.listData_xmqd = tempArr
+    // },
     handlePick(item) {
-      console.log(item)
+      GetXmjjAndPic(item.xmmc).then(res => {
+        this.data_xmjj = res.data[0]
+        console.log(this.data_xmjj)
+      })
     },
     getProjectDetail() {
       let picList = []
@@ -398,4 +431,4 @@ export default {
     line-height: 60px;
   }
 }
-</style>
+</style>