From 7a478a742eaa79986f75b268018376cf41781dd4 Mon Sep 17 00:00:00 2001
From: danshihao <danshihao@syxysoft.com>
Date: Wed, 24 Jan 2024 16:11:24 +0800
Subject: [PATCH] =?UTF-8?q?add=20=E5=85=A8=E9=99=A2=E7=BB=8F=E8=90=A5?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E7=BB=9F=E8=AE=A1(=E7=B4=AF=E8=AE=A1)-?=
 =?UTF-8?q?=E6=AF=94=E5=AF=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dashboard/SingleMonthTotalEcharts.vue     |   9 +
 .../SingleMonthTotalComparisonModal.vue       | 655 ++++++++++++++++++
 2 files changed, 664 insertions(+)
 create mode 100644 src/views/dashboard/modules/SingleMonthTotalComparisonModal.vue

diff --git a/src/views/dashboard/SingleMonthTotalEcharts.vue b/src/views/dashboard/SingleMonthTotalEcharts.vue
index 6056599..140425c 100644
--- a/src/views/dashboard/SingleMonthTotalEcharts.vue
+++ b/src/views/dashboard/SingleMonthTotalEcharts.vue
@@ -4,6 +4,7 @@
     <!--    echarts-->
     <div class="title">全院经营数据统计 (累计)
       <j-year-date  style="width:250px" class="year" placeholder="请选择年份" v-model="queryParam.year" @change="loadData"></j-year-date>
+      <a-button type="link" style="margin-left: 8px;" @click="handleComparison">比对</a-button>
     </div>
     <div class="echarts-box" id="singleMonthTotalEcharts"></div>
     <!--    echarts-->
@@ -39,6 +40,8 @@
       </a-table>
     </div>
     <!--   表格区域end -->
+    <!-- 比对弹框 -->
+    <single-month-total-comparison-modal ref="singleMonthTotalComparisonModal"/>
   </div>
 </template>
 
@@ -72,6 +75,7 @@ import {MonthDataTotal} from '@views/statisticalReport/statisticData'
 import {getAction} from '@api/manage'
 import {formatMoney} from '@/utils/formatMoney'
 import JYearDate from '@comp/jero/JYearDate'
+import SingleMonthTotalComparisonModal from '@views/dashboard/modules/SingleMonthTotalComparisonModal'
 
 const columns = [
   {
@@ -96,6 +100,7 @@ MonthDataTotal.map(tt => {
 export default {
   name: 'SingleMonthEcharts',
   components:{
+    SingleMonthTotalComparisonModal,
     JYearDate
   },
   mixins: [JeroListMixin],
@@ -120,6 +125,10 @@ export default {
   },
   methods: {
     formatMoney,
+    // 比对
+    handleComparison () {
+      this.$refs.singleMonthTotalComparisonModal.open()
+    },
     loadData(arg) {
       if (!this.url.list) {
         this.$message.error('请设置url.list属性!')
diff --git a/src/views/dashboard/modules/SingleMonthTotalComparisonModal.vue b/src/views/dashboard/modules/SingleMonthTotalComparisonModal.vue
new file mode 100644
index 0000000..7792c4a
--- /dev/null
+++ b/src/views/dashboard/modules/SingleMonthTotalComparisonModal.vue
@@ -0,0 +1,655 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    switchFullscreen
+    fullscreen
+    :footer="null"
+    @cancel="handleCancel"
+    cancelText="关闭">
+    <a-spin :spinning="confirmLoading">
+
+      <!--    查询区域-start -->
+      <div class="table-page-search-wrapper">
+        <a-form layout="inline" @keyup.enter.native="searchQuery">
+          <a-row type="flex">
+            <a-col :span="6">
+              <a-form-item label="比对年份1" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-year-date style="margin-right:8px;" class="year" placeholder="请选择比对年份1" v-model="queryParam.year1"></j-year-date>
+              </a-form-item>
+            </a-col>
+            <a-col :span="6">
+              <a-form-item label="比对年份2" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-year-date style="margin-right:8px;" class="year" placeholder="请选择比对年份2" v-model="queryParam.year2"></j-year-date>
+              </a-form-item>
+            </a-col>
+            <a-col :span="4">
+              <a-button type="primary" @click="searchQuery">比对</a-button>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+      <!--    /查询区域-end-->
+
+      <!-- echart-start -->
+      <div class="echarts-box" ref="singleMonthTotalEcharts"></div>
+      <!-- echart-end -->
+
+      <!--   表格区域beign -->
+      <div style="width: 100%">
+        <a-table
+          ref="table"
+          size="middle"
+          bordered
+          rowKey="projectId"
+          :columns="columns"
+          :scroll="{x: 1100}"
+          :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 -->
+    </a-spin>
+  </j-modal>
+</template>
+
+<script>
+import JYearDate from '@comp/jero/JYearDate'
+import {MonthDataTotal} from '@views/statisticalReport/statisticData'
+import * as echarts from 'echarts/core'
+import {
+  DatasetComponent,
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  TransformComponent,
+  ToolboxComponent
+} from 'echarts/components'
+import {LineChart} from 'echarts/charts'
+import {CanvasRenderer} from 'echarts/renderers'
+import {UniversalTransition} from 'echarts/features'
+import {getAction} from '@api/manage'
+import {formatMoney} from '@/utils/formatMoney'
+
+echarts.use([
+  DatasetComponent,
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  TransformComponent,
+  LineChart,
+  CanvasRenderer,
+  UniversalTransition,
+  ToolboxComponent
+])
+const columns = [
+  {
+    title: '',
+    align: 'center',
+    width: 160,
+    dataIndex: 'indexName',
+    scopedSlots: {customRender: 'text'}
+  },
+]
+MonthDataTotal.map(tt => {
+  columns.push({
+    title: tt.name,
+    align: 'center',
+    width: 125,
+    dataIndex: tt.key,
+    scopedSlots: {customRender: 'allMoney'}
+  })
+})
+
+export default {
+  name: 'SingleMonthTotalComparisonModal',
+  components: {JYearDate},
+  data () {
+    return  {
+      columns,
+      title: '比对',
+      width: 800,
+      visible: false,
+      confirmLoading: false,
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 10 }
+      },
+      url: {
+        list: '/index/cumulativeGraphList'
+      },
+      // echarts实例
+      myChart: null,
+      // 年份1的echarts数据
+      echartsData1: {},
+      // 年份2的echarts数据
+      echartsData2: {},
+      queryParam: {},
+      dataSource: [],
+    }
+  },
+  methods: {
+    formatMoney,
+    // 查询
+    searchQuery () {
+      const { year1, year2 } = this.queryParam
+      // 两个年份不能为空
+      if (!year1) {
+        this.$message.warning('请选择比对年份1')
+        return
+      }
+      if (!year2) {
+        this.$message.warning('请选择比对年份2')
+        return
+      }
+      // 两个年份不能相同
+      if (year1 === year2) {
+        this.$message.warning('比对年份不能相同')
+        return
+      }
+      this.loadData()
+    },
+    // 加载数据
+    loadData() {
+      if (!this.url.list) {
+        this.$message.error('请设置url.list属性!')
+        return
+      }
+      this.confirmLoading = true
+      // 比对两个年份两次请求
+      Promise.all([
+        getAction(this.url.list, { year: this.queryParam.year1 }),
+        getAction(this.url.list, { year: this.queryParam.year2 }),
+      ]).then(resArr => {
+        if (resArr[0].success && resArr[1].success) {
+          let dataSource1 = resArr[0].result || []
+          let dataSource2 = resArr[1].result || []
+          const {year1, year2} = this.queryParam
+          //  树形结构的数据 ，修改成table可以直接展示的数据，默认每年份只有四行数据
+          let tableData = [
+            // 年份1
+            {indexName: `${year1}年预估收入金额`},
+            {indexName: `${year1}年确认收入金额`},
+            {indexName: `${year1}年开票金额`},
+            {indexName: `${year1}年到账金额`},
+            // 年份2
+            {indexName: `${year2}年预估收入金额`},
+            {indexName: `${year2}年确认收入金额`},
+            {indexName: `${year2}年开票金额`},
+            {indexName: `${year2}年到账金额`},
+          ]
+          // 年份1的数据
+          dataSource1.map((item, index) => {
+            let keyItem = MonthDataTotal.find(ele => Number(ele.value) === (index + 1))
+            if (keyItem) {
+              let key = keyItem.key
+              tableData[0][key] = item.estimatedArrivalMoney // 预估收入金额--也可能放在第一条
+              // tableData[0][key] = item.allMoney // 年度待确收金额
+              tableData[1][key] = item.confirmAmount // 确认收入金额
+              tableData[2][key] = item.billMoney // 开票金额
+              tableData[3][key] = item.comeAllMoney // 到账金额
+            }
+          })
+          // 年份2的数据
+          dataSource2.map((item, index) => {
+            let keyItem = MonthDataTotal.find(ele => Number(ele.value) === (index + 1))
+            if (keyItem) {
+              let key = keyItem.key
+              tableData[4][key] = item.estimatedArrivalMoney // 预估收入金额--也可能放在第一条
+              // tableData[0][key] = item.allMoney // 年度待确收金额
+              tableData[5][key] = item.confirmAmount // 确认收入金额
+              tableData[6][key] = item.billMoney // 开票金额
+              tableData[7][key] = item.comeAllMoney // 到账金额
+            }
+          })
+          // 初始化年份1的echarts数据
+          this.initEchartsData(resArr[0].result, '1')
+          // 初始化年份2的echarts数据
+          this.initEchartsData(resArr[1].result, '2')
+          // 初始化 echarts
+          this.initEcharts()
+          this.dataSource = tableData
+        } else {
+          this.$message.warning(resArr[resArr[0].success ? 1 : 0].message)
+        }
+      }).finally(() => {
+        this.confirmLoading = false
+      })
+    },
+    // 将后端返回的数据 处理成 echarts需要的数据 格式
+    initEchartsData(data, suffix) {
+      this['echartsData' + suffix].confirmAmount = []
+      this['echartsData' + suffix].billMoney = []
+      this['echartsData' + suffix].comeAllMoney = []
+      this['echartsData' + suffix].estimatedArrivalMoney = []
+      data.map(item =>{
+        // this.echartsData.allMoney.push(item.allMoney)
+        this['echartsData' + suffix].confirmAmount.push(item.confirmAmount)
+        this['echartsData' + suffix].billMoney.push(item.billMoney)
+        this['echartsData' + suffix].comeAllMoney.push(item.comeAllMoney)
+        this['echartsData' + suffix].estimatedArrivalMoney.push(item.estimatedArrivalMoney)
+      })
+    },
+    initEcharts() {
+      // 处理x轴数据
+      let xData = MonthDataTotal.reduce((pre, val) => {
+        return pre.concat(val.name)
+      }, [])
+
+      let chartDom = this.$refs.singleMonthTotalEcharts
+      let myChart = echarts.init(chartDom)
+      this.myChart = myChart
+      let option
+      const { year1, year2 } = this.queryParam
+      let legend = [
+        `${year1}年预估收入金额`,
+        `${year1}年确认收入金额`,
+        `${year1}年开票金额`,
+        `${year1}年到账金额`,
+        `${year2}年预估收入金额`,
+        `${year2}年确认收入金额`,
+        `${year2}年开票金额`,
+        `${year2}年到账金额`,
+      ]
+      option = {
+        color: ['#069F99', '#FA9F79', '#728ECC', '#88C87E'],
+        tooltip: {
+          trigger: 'axis',
+          formatter: params => {
+            // 获取xAxis data中的数据
+            let dataStr = ''
+            params.forEach(item => {
+              dataStr += `<div>
+          <div style="margin: 0 8px;">
+            <span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:#fff;border: 2px solid ${item.color};border-radius: 50%"></span>
+            <span style="color: #666">${item.seriesName}</span>
+            <span style="float:right;color:#333;margin-left:20px;">${this.formatMoney(item.data)}</span>
+          </div>
+        </div>`
+            })
+            return dataStr
+          }
+        },
+        legend: {
+          data: legend,
+          right: '2%'
+        },
+        grid: {
+          left: '2.4%',
+          right: '0%',
+          bottom: '3%',
+          containLabel: true
+        },
+        toolbox: {},
+        xAxis: {
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#F5F5F5'
+            }
+          },
+          axisLabel: {
+            show: true,
+            color: '#999999'
+          },
+          type: 'category',
+          boundaryGap: true,
+          // 刻度线设置
+          axisTick: {
+            show: false
+          },
+          data: xData
+        },
+        yAxis: {
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#f2f2f2'
+            }
+          },
+          axisLabel: {
+            show: true,
+            color: '#8E8E95'
+          },
+          splitLine: {
+            lineStyle: {
+              color: '#F5F5F5',
+              type: 'dashed'
+            }
+          },
+          type: 'value',
+          nameTextStyle: {
+            color: '#8E8E95'
+          },
+        },
+        series: [
+          // {
+          //   name: '年度待确收金额',
+          //   type: 'line',
+          //   showSymbol: false,
+          //   symbol: 'circle',
+          //   symbolSize: 8,
+          //   data: this.echartsData.allMoney,
+          //   itemStyle: {
+          //     emphasis: {
+          //       color: '#fff',//拐点颜色
+          //       borderColor: '#1BCDC6',//拐点边框颜色
+          //       borderWidth: 2//拐点边框大小
+          //     }
+          //   },
+          //   areaStyle: {
+          //     opacity: 0.2,
+          //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          //       {
+          //         offset: 0,
+          //         color: '#1BCDC6'
+          //       },
+          //       {
+          //         offset: 1,
+          //         color: '#ffffff'
+          //       }
+          //     ])
+          //   },
+          // },
+          {
+            name: legend[0],
+            type: 'line',
+            showSymbol: false,
+            symbol: 'circle',
+            symbolSize: 8,
+            data: this.echartsData1.estimatedArrivalMoney,
+            itemStyle: {
+              normal: {lineStyle:{type: 'dashed'}},
+              emphasis: {
+                color: '#fff',//拐点颜色
+                borderColor: '#1BCDC6',//拐点边框颜色
+                borderWidth: 2//拐点边框大小
+              }
+            },
+            areaStyle: {
+              opacity: 0.2,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#1BCDC6'
+                },
+                {
+                  offset: 1,
+                  color: '#ffffff'
+                }
+              ])
+            },
+          },
+          {
+            name: legend[1],
+            type: 'line',
+            showSymbol: false,
+            symbol: 'circle',
+            symbolSize: 8,
+            data: this.echartsData1.confirmAmount,
+            itemStyle: {
+              emphasis: {
+                color: '#fff',//拐点颜色
+                borderColor: '#EBAB91',//拐点边框颜色
+                borderWidth: 2//拐点边框大小
+              }
+            },
+            areaStyle: {
+              opacity: 0.2,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#EBAB91'
+                },
+                {
+                  offset: 1,
+                  color: '#ffffff'
+                }
+              ])
+            },
+          },
+          {
+            name: legend[2],
+            type: 'line',
+            showSymbol: false,
+            symbol: 'circle',
+            symbolSize: 8,
+            data: this.echartsData1.billMoney,
+            itemStyle: {
+              emphasis: {
+                color: '#fff',//拐点颜色
+                borderColor: '#9CB7F2',//拐点边框颜色
+                borderWidth: 2//拐点边框大小
+              }
+            },
+            areaStyle: {
+              opacity: 0.2,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#9CB7F2'
+                },
+                {
+                  offset: 1,
+                  color: '#ffffff'
+                }
+              ])
+            },
+          },
+          {
+            name: legend[3],
+            type: 'line',
+            showSymbol: false,
+            symbol: 'circle',
+            symbolSize: 8,
+            data: this.echartsData1.comeAllMoney,
+            itemStyle: {
+              emphasis: {
+                color: '#fff',//拐点颜色
+                borderColor: '#B6F1AC',//拐点边框颜色
+                borderWidth: 2//拐点边框大小
+              }
+            },
+            areaStyle: {
+              opacity: 0.2,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#B6F1AC'
+                },
+                {
+                  offset: 1,
+                  color: '#ffffff'
+                }
+              ])
+            },
+
+          },
+          {
+            name: legend[4],
+            type: 'line',
+            showSymbol: false,
+            symbol: 'circle',
+            symbolSize: 8,
+            data: this.echartsData2.estimatedArrivalMoney,
+            itemStyle: {
+              normal: {lineStyle:{type: 'dashed'}},
+              emphasis: {
+                color: '#fff',//拐点颜色
+                borderColor: '#1BCDC6',//拐点边框颜色
+                borderWidth: 2//拐点边框大小
+              }
+            },
+            areaStyle: {
+              opacity: 0.2,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#1BCDC6'
+                },
+                {
+                  offset: 1,
+                  color: '#ffffff'
+                }
+              ])
+            },
+          },
+          {
+            name: legend[5],
+            type: 'line',
+            showSymbol: false,
+            symbol: 'circle',
+            symbolSize: 8,
+            data: this.echartsData2.confirmAmount,
+            itemStyle: {
+              emphasis: {
+                color: '#fff',//拐点颜色
+                borderColor: '#EBAB91',//拐点边框颜色
+                borderWidth: 2//拐点边框大小
+              }
+            },
+            areaStyle: {
+              opacity: 0.2,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#EBAB91'
+                },
+                {
+                  offset: 1,
+                  color: '#ffffff'
+                }
+              ])
+            },
+          },
+          {
+            name: legend[6],
+            type: 'line',
+            showSymbol: false,
+            symbol: 'circle',
+            symbolSize: 8,
+            data: this.echartsData2.billMoney,
+            itemStyle: {
+              emphasis: {
+                color: '#fff',//拐点颜色
+                borderColor: '#9CB7F2',//拐点边框颜色
+                borderWidth: 2//拐点边框大小
+              }
+            },
+            areaStyle: {
+              opacity: 0.2,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#9CB7F2'
+                },
+                {
+                  offset: 1,
+                  color: '#ffffff'
+                }
+              ])
+            },
+          },
+          {
+            name: legend[7],
+            type: 'line',
+            showSymbol: false,
+            symbol: 'circle',
+            symbolSize: 8,
+            data: this.echartsData2.comeAllMoney,
+            itemStyle: {
+              emphasis: {
+                color: '#fff',//拐点颜色
+                borderColor: '#B6F1AC',//拐点边框颜色
+                borderWidth: 2//拐点边框大小
+              }
+            },
+            areaStyle: {
+              opacity: 0.2,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#B6F1AC'
+                },
+                {
+                  offset: 1,
+                  color: '#ffffff'
+                }
+              ])
+            },
+
+          },
+        ]
+      }
+
+      option && myChart.setOption(option)
+      window.addEventListener('resize', () => {
+        console.log('resize')
+        myChart.resize()
+      })
+    },
+    handleCancel () {
+      this.close()
+    },
+    open () {
+      this.visible = true
+    },
+    close () {
+      this.visible = false
+      this.myChart && this.myChart.dispose()
+      this.myChart = null
+      this.dataSource = []
+      this.echartsData1 = {}
+      this.echartsData2 = {}
+      this.queryParam = {}
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.echarts-box {
+  width: 100%;
+  height: 400px;
+}
+
+/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>
\ No newline at end of file