fix

package.json

@@ -12,6 +12,7 @@
     "@element-plus/icons-vue": "^2.0.6",
     "@smallwei/avue": "^3.2.5",
     "dateformat": "^5.0.3",
+    "echarts": "^5.4.1",
     "element-plus": "^2.2.9",
     "js-base64": "^3.7.2",
     "js-md5": "^0.7.3",

src/components/echarts/index.vue

@@ -0,0 +1,77 @@
+<template>
+  <div :id="id" :style="[{ height: height }, { width: width }]"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  props: {
+    id: {
+      // 必填，图表唯一标识符避免id冲突不渲染
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: [String, Number],
+      default: '100%'
+    },
+    height: {
+      type: [String, Number],
+      default: '100%'
+    },
+    option: {
+      // 配置文件
+      type: [Object],
+      default: () => {}
+    }
+  },
+  watch: {
+    option: {
+      handler(val) {
+        this.$nextTick(() => {
+          setTimeout(() => this.chart.setOption(val), 20)
+        })
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  data() {
+    return {
+      chart: '',
+      config: {}
+    }
+  },
+  mounted() {
+    const self = this
+    setTimeout(() => self.drawChart(), 10) // 立即加载不会触发动画
+    // 监听窗口发生变化，resize组件
+    window.addEventListener('resize', self.handleResizeChart)
+  },
+  unmounted() {
+    window.removeEventListener('resize', self.handleResizeChart)
+  },
+  methods: {
+    drawChart() {
+      this.config = Object.assign(this.option)
+      // 基于准备好的dom，初始化echarts实例
+      // echarts.registerMap('lincang',yn)
+      this.chart = echarts.init(document.getElementById(this.id))
+      this.chart.setOption(this.config, true)
+
+      // 绑定点击事件
+      this.chart.on('click', params => {
+        // console.log(params)
+        this.$emit('clickItem', params)
+      })
+    },
+    handleResizeChart() {
+      this.chart.resize()
+    }
+  },
+  components: {}
+}
+</script>
+
+<style scoped lang="scss" type="text/scss"></style>

src/views/invest/components/amount.vue

@@ -1,6 +1,23 @@
 <template>
-  <div>
-    {{type}}
+  <div class='flex flex-justify-start flex-col'>
+    <span class='font-16 bold full-width text-left'>各部分/乡镇投资完成情况总览</span>
+    <div class='full-width flex-justify-end  flex'>
+      <el-select v-model="value" class="m-2" placeholder="请选择">
+        <el-option
+            v-for="item in selectOption"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+        />
+      </el-select>
+    </div>
+    <avue-crud
+        :option="option"
+        :data="data"
+        ref="crud"
+        v-model="form"
+        @on-load="onLoad">
+    </avue-crud>
   </div>
 </template>
 
@@ -12,10 +29,100 @@ export default {
       type: Number,
       default: 0
     }
+  },
+  watch: {
+    type: {
+      handler (val) {
+        this.initOption(val)
+      },
+      immediate: true
+    }
+  },
+  data () {
+    return {
+      form: {},
+      data: [],
+      option: {
+        height: '800',
+        align: 'center',
+        menuAlign: 'center',
+        menu: false,
+        size: 'mini',
+        addBtn: false,
+        refreshBtn: false,
+        columnBtn: false,
+        border: true,
+        index: true,
+        column: [
+          {
+            label: '部门/乡镇',
+            prop: 'noticeType'
+          },
+          {
+            label: '责任目标',
+            prop: 'noticeType'
+          },
+          {
+            label: '完成投资（万元）',
+            prop: 'noticeType'
+          },
+          {
+            label: '完成率',
+            prop: 'noticeType'
+          },
+          {
+            label: '计划入库',
+            prop: 'noticeType'
+          }
+        ]
+      },
+      selectOption: []
+    }
+  },
+  methods: {
+    onLoad () {
+      this.loading = true
+    },
+    initOption (res) {
+      this.selectOption.length = 0
+      switch (res.value) {
+        case 1:
+          for (let i = 1; i <= 3; i++) {
+            const item = { label: i + '月', value: i }
+            this.selectOption.push(item)
+          }
+          break
+        case 2:
+          for (let i = 4; i <= 6; i++) {
+            const item = { label: i + '月', value: i }
+            this.selectOption.push(item)
+          }
+          break
+        case 3:
+          for (let i = 7; i <= 9; i++) {
+            const item = { label: i + '月', value: i }
+            this.selectOption.push(item)
+          }
+          break
+        case 4:
+          for (let i = 10; i <= 12; i++) {
+            const item = { label: i + '月', value: i }
+            this.selectOption.push(item)
+          }
+          break
+        default:
+          for (let i = 1; i <= 12; i++) {
+            const item = { label: i + '月', value: i }
+            this.selectOption.push(item)
+          }
+          break
+      }
+    }
   }
 }
 </script>
 
-<style scoped>
-
+<style lang='scss' scoped>
+.m-2 {
+}
 </style>

src/views/invest/components/chart.vue

@@ -0,0 +1,120 @@
+<template>
+  <div>
+    <charts id="chart" height="405px" :option="option"/>
+  </div>
+</template>
+
+<script>
+import charts from '../../../components/echarts/index.vue'
+
+export default {
+  components: { charts },
+  data () {
+    return {
+      option: {
+        title: {
+          text: '单位（个）',
+          x: 'right',
+          y: 'top',
+          textStyle: {
+            color: 'white',
+            fontSize: '12'
+          }
+        },
+        color: ['#ED7B30', '#64D4F4'],
+        legend: {
+          textStyle: {
+            color: 'white'
+          },
+          data: ['项目入库', '项目开工']
+        },
+        toolbox: {
+          show: true
+        },
+        xAxis: {
+          type: 'category',
+          axisTick: { show: false },
+          splitLine: { show: false },
+          boundaryGap: true,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#B0F0EE',
+              width: '2'
+            }
+          },
+          data: []
+        },
+        yAxis: {
+          type: 'value',
+          axisTick: { show: false },
+          splitLine: { show: false },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#B0F0EE',
+              width: '2'
+            }
+          }
+        },
+        series: [
+          {
+            name: '项目入库',
+            type: 'line',
+            data: [9, 15, 14, 12, 11, 12],
+            smooth: true,
+            itemStyle: {
+              normal: {
+                color: '#ED7B30',
+                label: {
+                  show: true,
+                  color: '#ED7B30',
+                  fontSize: 14
+                }
+              }
+            },
+            markPoint: {
+              data: [
+                { type: 'max', name: 'Max' },
+                { type: 'min', name: 'Min' }
+              ]
+            }
+          },
+          {
+            name: '项目开工',
+            type: 'line',
+            data: [6, 12, 12, 15, 13, 12],
+            itemStyle: {
+              color: '#5EC7D5',
+              borderColor: '#5EC7D5',
+              normal: {
+                color: '#5EC7D5',
+                label: {
+                  show: true,
+                  color: '#5EC7D5',
+                  fontSize: 14
+                }
+              }
+            },
+            smooth: true,
+            markPoint: {
+              data: [
+                { type: 'max', name: 'Max' },
+                { type: 'min', name: 'Min' }
+              ]
+            }
+          }
+        ]
+      },
+      type: 1
+    }
+  },
+  created () {
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style scoped lang="scss" type="text/scss"></style>

src/views/invest/components/chart2.vue

@@ -0,0 +1,120 @@
+<template>
+  <div>
+    <charts id="chart2" height="405px" :option="option"/>
+  </div>
+</template>
+
+<script>
+import charts from '../../../components/echarts/index.vue'
+
+export default {
+  components: { charts },
+  data () {
+    return {
+      option: {
+        title: {
+          text: '单位（个）',
+          x: 'right',
+          y: 'top',
+          textStyle: {
+            color: 'white',
+            fontSize: '12'
+          }
+        },
+        color: ['#ED7B30', '#64D4F4'],
+        legend: {
+          textStyle: {
+            color: 'white'
+          },
+          data: ['项目入库', '项目开工']
+        },
+        toolbox: {
+          show: true
+        },
+        xAxis: {
+          type: 'category',
+          axisTick: { show: false },
+          splitLine: { show: false },
+          boundaryGap: true,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#B0F0EE',
+              width: '2'
+            }
+          },
+          data: []
+        },
+        yAxis: {
+          type: 'value',
+          axisTick: { show: false },
+          splitLine: { show: false },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#B0F0EE',
+              width: '2'
+            }
+          }
+        },
+        series: [
+          {
+            name: '项目入库',
+            type: 'line',
+            data: [9, 15, 14, 12, 11, 12],
+            smooth: true,
+            itemStyle: {
+              normal: {
+                color: '#ED7B30',
+                label: {
+                  show: true,
+                  color: '#ED7B30',
+                  fontSize: 14
+                }
+              }
+            },
+            markPoint: {
+              data: [
+                { type: 'max', name: 'Max' },
+                { type: 'min', name: 'Min' }
+              ]
+            }
+          },
+          {
+            name: '项目开工',
+            type: 'line',
+            data: [6, 12, 12, 15, 13, 12],
+            itemStyle: {
+              color: '#5EC7D5',
+              borderColor: '#5EC7D5',
+              normal: {
+                color: '#5EC7D5',
+                label: {
+                  show: true,
+                  color: '#5EC7D5',
+                  fontSize: 14
+                }
+              }
+            },
+            smooth: true,
+            markPoint: {
+              data: [
+                { type: 'max', name: 'Max' },
+                { type: 'min', name: 'Min' }
+              ]
+            }
+          }
+        ]
+      },
+      type: 1
+    }
+  },
+  created () {
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style scoped lang="scss" type="text/scss"></style>

src/views/invest/components/years.vue

@@ -1,7 +1,9 @@
 <template>
   <div class='flex flex-center flex-col'>
-    <basic-tab :tabs='tabs' :full='true' @change='change'/>
-    <div class='flex flex-center full-width mt-20'>
+    <div class='full-width'>
+      <basic-tab :tabs='tabs' :full='true' @change='change' style='width:99%'/>
+    </div>
+    <div class='flex flex-center full-width mt-10'>
       <div   v-for='i in dash' class='flex-child-average' :key='i'>
         <div class='box' :style='`box-shadow: `+ i.box'>
           <div class='flex flex-justify-start font-16'>
@@ -36,11 +38,11 @@ export default {
     return {
       times: [],
       tabs: [
-        { name: '总览', value: 1 },
-        { name: '一季度', value: 2 },
+        { name: '总览', value: 0 },
+        { name: '一季度', value: 1 },
         { name: '二季度', value: 2 },
-        { name: '三季度', value: 2 },
-        { name: '四季度', value: 2 }
+        { name: '三季度', value: 3 },
+        { name: '四季度', value: 4 }
       ],
       dash: [
         {
@@ -101,7 +103,7 @@ export default {
 }
 .box {
   border-radius: 8px;
-  min-height: 65px;
+  min-height: 85px;
   margin: 20px;
   padding: 20px;
   background-color: #F6F9FD;

src/views/invest/index.vue

@@ -11,10 +11,19 @@
           </div>
         </basic-container>
         <basic-container>
-          <div class='flex'>
-            <div class='flex-child-average'>
-              chart
+          <div class='flex '>
+            <div class='flex-child-average full-width flex flex-col flex-justify-start'>
+              <span class='font-16 bold full-width text-left '>投资数据统计</span>
+              <div class='full-width mt-10' style='background-color: #F7FAFD'>
+                <chart />
+              </div>
+
+              <span class='font-16 bold full-width text-left mt-20'>项目入库统计</span>
+              <div class='full-width mt-10' style='background-color: #F7FAFD'>
+                <chart2 />
+              </div>
             </div>
+            <div class='white-bg padding'></div>
             <div class='flex-child-average'>
               <amount :type='yearType'/>
             </div>
@@ -30,10 +39,12 @@ import BasicContainer from '@/components/basic-container/main.vue'
 import left from './components/left.vue'
 import years from '@/views/invest/components/years.vue'
 import amount from '@/views/invest/components/amount.vue'
+import chart from '@/views/invest/components/chart.vue'
+import chart2 from '@/views/invest/components/chart2.vue'
 
 export default {
   name: 'index',
-  components: { BasicContainer, left, years, amount },
+  components: { BasicContainer, left, years, amount, chart, chart2 },
   data () {
     return {
       yearType: 0

yarn.lock

@@ -516,11 +516,6 @@ ajv@^6.10.0, ajv@^6.12.4:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-animate.css@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/animate.css/-/animate.css-4.1.1.tgz#614ec5a81131d7e4dc362a58143f7406abd68075"
-  integrity sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==
-
 ansi-regex@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
@@ -977,6 +972,14 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
+echarts@^5.4.1:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/echarts/-/echarts-5.4.1.tgz#d7f65a584d78beff62568d878b16151b3381811c"
+  integrity sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==
+  dependencies:
+    tslib "2.3.0"
+    zrender "5.4.1"
+
 element-plus@^2.2.9:
   version "2.2.9"
   resolved "https://registry.yarnpkg.com/element-plus/-/element-plus-2.2.9.tgz#f0366dfb2048d614813926274cb443f17e5fdef2"
@@ -3343,6 +3346,11 @@ tsconfig-paths@^3.14.1:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
+tslib@2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
+  integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
+
 type-check@^0.4.0, type-check@~0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
@@ -3613,3 +3621,10 @@ yaml@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.1.1.tgz#1e06fb4ca46e60d9da07e4f786ea370ed3c3cfec"
   integrity sha512-o96x3OPo8GjWeSLF+wOAbrPfhFOGY0W00GNaxCDv+9hkcDJEnev1yh8S7pgHF0ik6zc8sQLuL8hjHjJULZp8bw==
+
+zrender@5.4.1:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/zrender/-/zrender-5.4.1.tgz#892f864b885c71e1dc25dcb3c7a4ba42678d3f11"
+  integrity sha512-M4Z05BHWtajY2241EmMPHglDQAJ1UyHQcYsxDNzD9XLSkPDqMq4bB28v9Pb4mvHnVQ0GxyTklZ/69xCFP6RXBA==
+  dependencies:
+    tslib "2.3.0"