【修改】首页增加统计图、理事会滚动条修改

src/views/dashboard/AllMoneyTenEcharts.vue

@@ -5,39 +5,39 @@
     <div class="echarts-box" id="allMoney"></div>
 
     <!--   表格区域beign -->
-    <div style="width: 100%">
-      <a-table
-        ref="table"
-        size="middle"
-        bordered
-        rowKey="projectId"
-        :columns="columns"
-        :scroll="{x: 1100}"
-        :dataSource="dataSource"
-        :pagination="false"
-        :loading="loading"
-        @change="handleTableChange"
-        class="j-table-force-nowrap main-table">
+<!--    <div style="width: 100%">-->
+<!--      <a-table-->
+<!--        ref="table"-->
+<!--        size="middle"-->
+<!--        bordered-->
+<!--        rowKey="projectId"-->
+<!--        :columns="columns"-->
+<!--        :scroll="{x: 1100}"-->
+<!--        :dataSource="dataSource"-->
+<!--        :pagination="false"-->
+<!--        :loading="loading"-->
+<!--        @change="handleTableChange"-->
+<!--        class="j-table-force-nowrap main-table">-->
 
-        <template slot="text" slot-scope="text">
-          <a-tooltip>
-            <template slot="title">{{ text }}</template>
-            <div class="table-text">{{ text }}</div>
-          </a-tooltip>
-        </template>
+<!--        <template slot="text" slot-scope="text">-->
+<!--          <a-tooltip>-->
+<!--            <template slot="title">{{ text }}</template>-->
+<!--            <div class="table-text">{{ text }}</div>-->
+<!--          </a-tooltip>-->
+<!--        </template>-->
 
-        <span  v-for="item in columns" :slot="item.dataIndex" :key="item.dataIndex">
-               <j-ellipsis :length="6" :value=" item[item.dataIndex] "></j-ellipsis>
-            </span>
+<!--        <span  v-for="item in columns" :slot="item.dataIndex" :key="item.dataIndex">-->
+<!--               <j-ellipsis :length="6" :value=" item[item.dataIndex] "></j-ellipsis>-->
+<!--            </span>-->
 
-        <template slot="allMoney" slot-scope="text">
-          <a-tooltip>
-            <template slot="title">{{ formatMoney(text) }}</template>
-            <div class="table-text">{{ formatMoney(text) }}</div>
-          </a-tooltip>
-        </template>
-      </a-table>
-    </div>
+<!--        <template slot="allMoney" slot-scope="text">-->
+<!--          <a-tooltip>-->
+<!--            <template slot="title">{{ formatMoney(text) }}</template>-->
+<!--            <div class="table-text">{{ formatMoney(text) }}</div>-->
+<!--          </a-tooltip>-->
+<!--        </template>-->
+<!--      </a-table>-->
+<!--    </div>-->
     <!--   表格区域end -->
   </div>
 </template>
@@ -215,6 +215,7 @@ export default {
           axisLabel: {
             show: true,
             interval:0,
+            rotate:45,
             // 坐标轴刻度标签换行处理
             formatter: function (params) {
               let len = params.length

src/views/dashboard/Analysis.vue

@@ -24,16 +24,20 @@
       <!-- 科室总体统计 -->
 
       <section class="wrap">
-        <!--三年统计 -->
-        <three-year-echarts class="depart-total m-t-10"></three-year-echarts>
-        <!-- 三年统计 -->
+
+        <!-- 未收账款统计 -->
+        <not-received-echarts class="m-t-10 not-receiced"></not-received-echarts>
+        <!--  未收账款统计 -->
+
 
         <!-- 收入分类统计 -->
         <income-sort-echarts class="income-sort m-t-10"></income-sort-echarts>
         <!-- 收入分类统计 -->
       </section>
 
-
+      <!--应收合同额统计 -->
+      <three-year-echarts class="all-money m-t-10"></three-year-echarts>
+      <!-- 应收合同额统计 -->
 
 
       <!-- 企业客户统计（合同额前十）-->
@@ -54,6 +58,7 @@ import DepartmentTotalEcharts from '@views/dashboard/DepartmentTotalEcharts'
 import IncomeSortEcharts from '@views/dashboard/IncomeSortEcharts'
 import AllMoneyTenEcharts from '@views/dashboard/AllMoneyTenEcharts'
 import ThreeYearEcharts from '@views/dashboard/ThreeYearEcharts'
+import NotReceivedEcharts from '@views/dashboard/NotReceivedEcharts'
 
 export default {
   name: 'Analysis',
@@ -64,7 +69,8 @@ export default {
     DepartmentTotalEcharts,
     IncomeSortEcharts,
     AllMoneyTenEcharts,
-    ThreeYearEcharts
+    ThreeYearEcharts,
+    NotReceivedEcharts
   },
   computed: {
     // 所领导 部门负责人 还是其他角色
@@ -92,11 +98,12 @@ export default {
 // 全所收入统计 单月
 .single-month,
 .single-month-total,
-.three-year{
+.three-year {
   width: 100%;
   height: 700px;
   background: #fff;
 }
+
 .three-year {
   height: 620px;
 }
@@ -119,11 +126,18 @@ export default {
   height: auto;
   background: #fff;
 }
+// 未收入账款统计
+.not-receiced {
+  width: 49%;
+  min-width: 480px;
+  height: auto;
+  background: #fff;
+}
 
 // 分类统计
 .income-sort {
   margin-left: 8px;
-  width: 39%;
+  width: 49%;
   min-width: 480px;
   height: auto;
   background: #fff;

src/views/dashboard/IncomeSortEcharts.vue

@@ -27,33 +27,33 @@
     </div>
     <div class="echarts-box" id="incomeSort"></div>
     <!--   表格区域beign -->
-    <div style="width: 100%">
-      <a-table
-        ref="table"
-        size="middle"
-        bordered
-        rowKey="projectId"
-        :columns="columns"
-        :scroll="{x: 500}"
-        :dataSource="dataSource"
-        :pagination="false"
-        class="j-table-force-nowrap main-table">
+<!--    <div style="width: 100%">-->
+<!--      <a-table-->
+<!--        ref="table"-->
+<!--        size="middle"-->
+<!--        bordered-->
+<!--        rowKey="projectId"-->
+<!--        :columns="columns"-->
+<!--        :scroll="{x: 500}"-->
+<!--        :dataSource="dataSource"-->
+<!--        :pagination="false"-->
+<!--        class="j-table-force-nowrap main-table">-->
 
-        <template slot="text" slot-scope="text">
-          <a-tooltip>
-            <template slot="title">{{ text }}</template>
-            <div class="table-text">{{ text }}</div>
-          </a-tooltip>
-        </template>
+<!--        <template slot="text" slot-scope="text">-->
+<!--          <a-tooltip>-->
+<!--            <template slot="title">{{ text }}</template>-->
+<!--            <div class="table-text">{{ text }}</div>-->
+<!--          </a-tooltip>-->
+<!--        </template>-->
 
-        <template slot="allMoney" slot-scope="text">
-          <a-tooltip>
-            <template slot="title">{{ formatMoney(text) }}</template>
-            <div class="table-text">{{ formatMoney(text) }}</div>
-          </a-tooltip>
-        </template>
-      </a-table>
-    </div>
+<!--        <template slot="allMoney" slot-scope="text">-->
+<!--          <a-tooltip>-->
+<!--            <template slot="title">{{ formatMoney(text) }}</template>-->
+<!--            <div class="table-text">{{ formatMoney(text) }}</div>-->
+<!--          </a-tooltip>-->
+<!--        </template>-->
+<!--      </a-table>-->
+<!--    </div>-->
     <!--   表格区域end -->
 
   </div>

src/views/dashboard/NotReceivedEcharts.vue

@@ -0,0 +1,393 @@
+<!-- 未收账款统计-->
+<template>
+  <div class="container">
+    <div class="title">未收账款统计
+      <a-tree-select
+        :multiple="false"
+        show-search
+        :replaceFields="{value:'orgCode'}"
+        allowClear
+        tree-default-expand-all
+        tree-node-filter-prop="title"
+        @change="changeDepart"
+        style="width:30%"
+        :dropdownStyle="{ maxHeight: '200px',maxWidth:'100px','overflow-x':'hidden',' overflo-y': 'auto' }"
+        :treeData="treeDepartData"
+        v-model="queryParam.departCode"
+        placeholder="请选择部门">
+      </a-tree-select>
+    </div>
+<!--    <div class="operator">-->
+<!--      <span @click="toggleEcharts('income')" class="operator-left"-->
+<!--            :class="{'active':activeIndex === 'income'}">收入分析</span>-->
+<!--      <span @click="toggleEcharts('allMoney')" class="operator-left"-->
+<!--            :class="{'active':activeIndex === 'allMoney'}">应收</span>-->
+<!--      <span @click="toggleEcharts('confirmAmount')" class="operator-right"-->
+<!--            :class="{'active':activeIndex === 'confirmAmount'}">确收</span>-->
+<!--    </div>-->
+    <div class="echarts-box" id="notReceived"></div>
+    <!--   表格区域beign -->
+    <!--    <div style="width: 100%">-->
+    <!--      <a-table-->
+    <!--        ref="table"-->
+    <!--        size="middle"-->
+    <!--        bordered-->
+    <!--        rowKey="projectId"-->
+    <!--        :columns="columns"-->
+    <!--        :scroll="{x: 500}"-->
+    <!--        :dataSource="dataSource"-->
+    <!--        :pagination="false"-->
+    <!--        class="j-table-force-nowrap main-table">-->
+
+    <!--        <template slot="text" slot-scope="text">-->
+    <!--          <a-tooltip>-->
+    <!--            <template slot="title">{{ text }}</template>-->
+    <!--            <div class="table-text">{{ text }}</div>-->
+    <!--          </a-tooltip>-->
+    <!--        </template>-->
+
+    <!--        <template slot="allMoney" slot-scope="text">-->
+    <!--          <a-tooltip>-->
+    <!--            <template slot="title">{{ formatMoney(text) }}</template>-->
+    <!--            <div class="table-text">{{ formatMoney(text) }}</div>-->
+    <!--          </a-tooltip>-->
+    <!--        </template>-->
+    <!--      </a-table>-->
+    <!--    </div>-->
+    <!--   表格区域end -->
+
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts/core'
+import {
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent
+} from 'echarts/components'
+import {PieChart} from 'echarts/charts'
+import {LabelLayout} from 'echarts/features'
+import {CanvasRenderer} from 'echarts/renderers'
+
+echarts.use([
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  PieChart,
+  CanvasRenderer,
+  LabelLayout
+])
+import {getAction} from '@api/manage'
+import {formatMoney} from '@/utils/formatMoney'
+import {queryDepartTreeList} from '@api/api'
+
+const columns = [
+  {
+    title: '',
+    align: 'center',
+    width: 70,
+    dataIndex: 'indexName',
+    scopedSlots: {customRender: 'text'}
+  },
+]
+
+export default {
+  name: 'NotReceivedEcharts',
+  data() {
+    return {
+      activeIndex: 'income',
+      echartsInstace: null,
+      columns,
+      url: {
+        list: '/index/uncollected'
+      },
+      queryParam:{},
+      dataSource: [],
+      treeDepartData:[],// 组织机构 树数据
+    }
+  },
+  mounted() {
+    this.loadData()
+    this.loadDepartTreeData()
+  },
+  methods: {
+    formatMoney,
+    toggleEcharts(key) {
+      if (key === this.activeIndex) {
+        return
+      } else {
+        this.activeIndex = key
+        this.loadData()
+        this.$forceUpdate()
+      }
+    },
+    /**
+     * 选择部门
+     * */
+    changeDepart(val){
+      console.log(val,'val')
+      this.queryParam.departCode = val
+      // 如果是标准所 不传
+      if(val === 'A05' ) this.queryParam.departCode = undefined
+      this.loadData()
+    },
+    /*
+    *  组织机构下拉数据
+    * */
+    loadDepartTreeData() {
+      const that = this
+      queryDepartTreeList().then((res) => {
+        if (res.success) {
+          that.treeDepartData = []
+          let treeList = res.result
+          for (let a = 0; a < treeList.length; a++) {
+            let temp = treeList[a]
+            temp.isLeaf = temp.leaf
+            that.treeDepartData.push(temp)
+          }
+        }
+      })
+    },
+    loadData() {
+      if (this.echartsInstace != null && this.echartsInstace != '' && this.echartsInstace != undefined) {
+        this.echartsInstace.dispose()//销毁
+      }
+      let typeEnum = {
+        allMoney: 1,
+        confirmAmount: 2,
+        income: 3
+      }
+      getAction(this.url.list, {type: typeEnum[this.activeIndex],departCode:this.queryParam.departCode}).then(res => {
+        if (res.success) {
+          let dataSource = res.result
+          this.initColumns(res.result)
+          this.initEcharts(res.result)
+          // 将接口数据 转化成表格数据形式
+          let tableData = [
+            {indexName: typeEnum[this.activeIndex] !== 2 ? '合同金额' : '确收金额'},
+            {indexName: '百分比'}
+          ]
+          dataSource.map((item, index) => {
+            let dataIndex = 'key' + index
+            tableData[0][dataIndex] = item.money
+            tableData[1][dataIndex] = item.value + '%'
+          })
+          this.dataSource = tableData
+        }
+      })
+    },
+    initEcharts(data) {
+      let color = ['#069F99', '#88C87E ', '#6D7FD0', '#FA9D81', '#A5B3FF']
+      let echartsData = data.reduce((pre, val) => {
+        return pre.concat({value: val.money, name: val.name, money: val.money})
+      }, [])
+      echartsData = this.initPoint(echartsData, color)
+      let chartDom = document.getElementById('notReceived')
+      let myChart = echarts.init(chartDom)
+      let option
+
+      option = {
+
+        tooltip: {
+          show: true,
+          trigger: 'item',
+          formatter: (param) => {
+            console.log(param,'eee')
+            return `<div>
+<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${param.color};"></span>
+<span style="color: #999">${param.name}</span>
+<span style="color: #333">${this.formatMoney(param.data.money)}</span>
+</div>`
+          }
+        },
+        legend: {
+          bottom: '2%',
+          right: '5%',
+          padding: [0, 10, 0, 20]
+        },
+        labelLine: {
+          lineStyle: {
+            color: '#999'
+          }
+        },
+        series: [
+          {
+            color: color,
+            type: 'pie',
+            radius: ['30%', '60%'],
+            itemStyle: {
+              borderColor: '#fff',
+              borderWidth: 2
+            },
+            label: {
+              show: true,
+              formatter: '{pre|}{d}%',
+              rich: {
+                pre: {
+                  width: 4,
+                  height: 4,
+                  borderRadius: [4, 4, 4, 4]
+                }
+              }
+            },
+
+            labelLine: {
+              show: true
+            },
+            data: echartsData
+          }
+        ]
+      }
+
+      option && myChart.setOption(option)
+      this.echartsInstace = myChart
+      window.addEventListener('resize', () => {
+        myChart.resize()
+      })
+    },
+    /**
+     * 处理表头
+     * */
+    initColumns(data) {
+      this.columns = [
+        {
+          title: '',
+          align: 'center',
+          width: 70,
+          dataIndex: 'indexName',
+          scopedSlots: {customRender: 'text'}
+        },
+      ]
+      data.map((item, index) => {
+        this.columns.push({
+          title: item.name_dictText,
+          align: 'center',
+          width: 85,
+          dataIndex: 'key' + index,
+          scopedSlots: {customRender: 'allMoney'}
+        },)
+      })
+    },
+    // 处理圆点
+    initPoint(data, color) {
+      // 这步主要是为了让小圆点的颜色和饼状图的块对应
+      let setLabel = (data) => {
+        let opts = []
+        for (let i = 0; i < data.length; i++) {
+          let item = {}
+          item.name = data[i].name
+          item.value = data[i].value
+          item.money = data[i].money
+          item.label = {
+            normal: {
+              //控制引导线上文字颜色和位置,此处a是显示文字区域，b做一个小圆圈在引导线尾部显示
+              show: true,
+              formatter: '{point|}{a|}{d}%',
+              rich: {
+                a: {
+                  padding: [0, 0, 0, 4]
+                },
+                point: {
+                  height: 6,
+                  width: 6,
+                  lineHeight: 6,
+                  borderRadius: 4,
+                  backgroundColor: color[i], // 圆点颜色和饼图块状颜色一致
+                },
+              }
+            },
+          }
+
+          opts.push(item)
+        }
+        return opts
+      }
+      return setLabel(data)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.container {
+  position: relative;
+  padding: 20px;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.operator {
+  color: #069F99;
+  position: absolute;
+  user-select: none;
+  display: flex;
+  font-size: 12px;
+  justify-content: space-around;
+  align-items: center;
+  right: 20px;
+  top: 20px;
+  width: 180px;
+  height: 35px;
+  line-height: 35px;
+  border: 1px solid #069F99;
+  border-radius: 4px;
+  cursor: pointer;
+
+  &-left {
+    width: 33.3%;
+    text-align: center;
+    border-right: 1px solid #069F99;
+  }
+
+  &-right {
+    width: 33.3%;
+    text-align: center;
+  }
+}
+
+.active {
+  background: #069F99;
+  color: #fff;
+}
+
+.echarts-box {
+  min-width: 300px;
+  width: 100%;
+  height: 400px;
+}
+
+.point {
+  width: 3px;
+  height: 3px;
+  display: inline-block;
+  border-radius: 50%;
+  background: #000;
+}
+
+.title {
+  text-align: left;
+  font-weight: 500;
+  color: #333;
+  font-size: 20px;
+}
+
+/deep/ .ant-table-thead tr > th {
+  color: #050525;
+  font-weight: bold;
+  background: rgb(245, 245, 246);
+  border: none;
+}
+
+/deep/ .ant-table-tbody tr > td {
+  color: rgba(5, 5, 37, 0.8);
+  border: none;
+  border-bottom: 1px solid rgb(245, 245, 246);
+}
+
+/deep/ .ant-table-tbody tr > td:first-child {
+  color: #050525;
+  font-weight: bold;
+  background: rgb(245, 245, 246);
+}
+</style>

src/views/dashboard/ThreeYearEcharts.vue

@@ -1,39 +1,39 @@
-<!--三年统计-->
+<!--应收合同额统计-->
 <template>
   <div class="container">
-    <div class="title">应收统计</div>
+    <div class="title">应收合同额统计</div>
     <div class="echarts-box" id="threeYear"></div>
 
     <!--   表格区域beign -->
-    <div style="width: 100%">
-      <a-table
-        ref="table"
-        size="middle"
-        bordered
-        rowKey="projectId"
-        :columns="columns"
-        :scroll="{x: 900}"
-        :dataSource="dataSource"
-        :pagination="false"
-        :loading="loading"
-        @change="handleTableChange"
-        class="j-table-force-nowrap main-table">
+<!--    <div style="width: 100%">-->
+<!--      <a-table-->
+<!--        ref="table"-->
+<!--        size="middle"-->
+<!--        bordered-->
+<!--        rowKey="projectId"-->
+<!--        :columns="columns"-->
+<!--        :scroll="{x: 900}"-->
+<!--        :dataSource="dataSource"-->
+<!--        :pagination="false"-->
+<!--        :loading="loading"-->
+<!--        @change="handleTableChange"-->
+<!--        class="j-table-force-nowrap main-table">-->
 
-        <template slot="text" slot-scope="text">
-          <a-tooltip>
-            <template slot="title">{{ text }}</template>
-            <div class="table-text">{{ text }}</div>
-          </a-tooltip>
-        </template>
+<!--        <template slot="text" slot-scope="text">-->
+<!--          <a-tooltip>-->
+<!--            <template slot="title">{{ text }}</template>-->
+<!--            <div class="table-text">{{ text }}</div>-->
+<!--          </a-tooltip>-->
+<!--        </template>-->
 
-        <template slot="allMoney" slot-scope="text">
-          <a-tooltip>
-            <template slot="title">{{ formatMoney(text) }}</template>
-            <div class="table-text">{{ formatMoney(text) }}</div>
-          </a-tooltip>
-        </template>
-      </a-table>
-    </div>
+<!--        <template slot="allMoney" slot-scope="text">-->
+<!--          <a-tooltip>-->
+<!--            <template slot="title">{{ formatMoney(text) }}</template>-->
+<!--            <div class="table-text">{{ formatMoney(text) }}</div>-->
+<!--          </a-tooltip>-->
+<!--        </template>-->
+<!--      </a-table>-->
+<!--    </div>-->
     <!--   表格区域end -->
   </div>
 </template>

src/views/incomePayments/memberManage/councilMaintenance/CouncilMaintenanceList.vue

@@ -46,7 +46,7 @@
       <div>
         <a-table rowKey="id"
                  size="middle"
-                 :scroll="{x: 1300}"
+                 :scroll="{x: 1100}"
                  :columns="columns"
                  :data-source="dataSource"
                  :pagination="ipagination"