收入分析

web/package.json

@@ -11,6 +11,7 @@
     },
     "dependencies": {
         "@element-plus/icons-vue": "^2.1.0",
+        "@qiun/ucharts": "2.5.0-20230101",
         "@vue-office/docx": "^1.3.0",
         "@vue-office/excel": "^1.4.5",
         "@vue-office/pdf": "^1.5.3",
@@ -36,6 +37,7 @@
         "sortablejs": "^1.15.2",
         "spark-md5": "^3.0.2",
         "tailwindcss": "^3.3.3",
+        "ucharts": "^0.0.0",
         "vue": "^3.4.21",
         "vue-router": "^4.3.2",
         "vuedraggable": "^4.1.0"

web/src/pinia/chartsData/chartsData.js

@@ -0,0 +1,14 @@
+import { defineStore } from 'pinia'
+import { reactive } from 'vue'
+
+export const chartsList = defineStore('charts', () => {
+  const charts = reactive([])
+  const changeCharts = (data) => {
+    charts.length = 0
+    charts.push(...data)
+  }
+  return {
+    charts,
+    changeCharts
+  }
+})

web/src/view/finance/chart/chart.vue

@@ -1,14 +1,147 @@
 <template>
   <div>
+    <canvas
+      id="kUcKFJZAycqcHLABIFFVWTVbCZOjgryF"
+      :width="cWidth"
+      :height="cHeight"
+      class="charts"
+      @click="tap"
+    />
   </div>
 </template>
 
-<script setup>
-defineOptions({
-  name: 'Chart'
-})
+<script>
+// 需要在您的项目内执行 npm i @qiun/ucharts
+import uCharts from '@qiun/ucharts'
+function getH5Offset(e) {
+  e.mp = {
+    changedTouches: []
+  }
+  e.mp.changedTouches.push({
+    x: e.offsetX,
+    y: e.offsetY
+  })
+  return e
+}
+var uChartsInstance = {}
+export default {
+  data() {
+    return {
+      cWidth: 750,
+      cHeight: 500
+    }
+  },
+  mounted() {
+    this.getServerData()
+  },
+  methods: {
+    getServerData() {
+      // 模拟从服务器获取数据时的延时
+      setTimeout(() => {
+        // 模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
+        const res = {
+          series: [
+            {
+              data: [{ 'name': '材料采购支出', 'value': 31000 }, { 'name': '机械费用支出', 'value': 0 }, { 'name': '人工费用支出', 'value': 0 }, { 'name': '税费支出', 'value': 8000 }, { 'name': '管理费用支出', 'value': 3000 }, { 'name': '辅材及工程部支出', 'value': 1000 }]
+            }
+          ]
+        }
+        this.drawCharts('kUcKFJZAycqcHLABIFFVWTVbCZOjgryF', res)
+      }, 500)
+    },
+    drawCharts(id, data) {
+      const ctx = document.getElementById(id).getContext('2d')
+      // eslint-disable-next-line new-cap
+      uChartsInstance[id] = new uCharts({
+        type: 'pie',
+        context: ctx,
+        width: this.cWidth,
+        height: this.cHeight,
+        series: data.series,
+        animation: false,
+        timing: 'easeOut',
+        duration: 1000,
+        rotate: false,
+        rotateLock: false,
+        background: '#FFFFFF',
+        color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
+        padding: [5, 5, 5, 5],
+        fontSize: 13,
+        fontColor: '#666666',
+        dataLabel: true,
+        dataPointShape: true,
+        dataPointShapeType: 'solid',
+        touchMoveLimit: 60,
+        enableScroll: false,
+        enableMarkLine: false,
+        legend: {
+          show: true,
+          position: 'bottom',
+          float: 'bottom',
+          padding: 5,
+          margin: 5,
+          backgroundColor: 'rgba(0,0,0,0)',
+          borderColor: 'rgba(0,0,0,0)',
+          borderWidth: 0,
+          fontSize: 14,
+          fontColor: '#666666',
+          lineHeight: 11,
+          hiddenColor: '#CECECE',
+          itemGap: 10
+        },
+        extra: {
+          pie: {
+            activeOpacity: 0.5,
+            activeRadius: 10,
+            offsetAngle: 0,
+            labelWidth: 15,
+            border: true,
+            borderWidth: 3,
+            borderColor: '#FFFFFF',
+            customRadius: 0,
+            linearType: 'none'
+          },
+          tooltip: {
+            showBox: true,
+            showArrow: true,
+            showCategory: false,
+            borderWidth: 0,
+            borderRadius: 0,
+            borderColor: '#000000',
+            borderOpacity: 0.7,
+            bgColor: '#000000',
+            bgOpacity: 0.7,
+            gridType: 'solid',
+            dashLength: 4,
+            gridColor: '#CCCCCC',
+            boxPadding: 3,
+            fontSize: 13,
+            lineHeight: 20,
+            fontColor: '#FFFFFF',
+            legendShow: true,
+            legendShape: 'auto',
+            splitLine: true,
+            horizentalLine: false,
+            xAxisLabel: false,
+            yAxisLabel: false,
+            labelBgColor: '#FFFFFF',
+            labelBgOpacity: 0.7,
+            labelFontColor: '#666666'
+          }
+        }
+      })
+    },
+    tap(e) {
+      uChartsInstance[e.target.id].touchLegend(getH5Offset(e))
+      uChartsInstance[e.target.id].showToolTip(getH5Offset(e))
+    }
+  }
+}
 </script>
 
 <style scoped>
-
+.charts{
+  width: 750px;
+  height: 500px;
+}
 </style>

web/src/view/finance/financeAnalysis/components/charts.vue

@@ -0,0 +1,139 @@
+<template>
+  <div>
+    <canvas
+      id="kUcKFJZAycqcHLABIFFVWTVbCZOjgryF"
+      :width="cWidth"
+      :height="cHeight"
+      class="charts"
+      @click="tap"
+    />
+  </div>
+</template>
+
+<script setup>
+// 需要在您的项目内执行 npm i @qiun/ucharts
+import uCharts from '@qiun/ucharts'
+import { chartsList } from '@/pinia/chartsData/chartsData'
+import { onMounted } from 'vue'
+
+function getH5Offset(e) {
+  e.mp = {
+    changedTouches: []
+  }
+  e.mp.changedTouches.push({
+    x: e.offsetX,
+    y: e.offsetY
+  })
+  return e
+}
+var uChartsInstance = {}
+const list = chartsList()
+const cWidth = 700
+const cHeight = 400
+onMounted(() => {
+  getServerData()
+})
+const getServerData = () => {
+  const res = {
+    series: [
+      {
+        data: list.charts
+      }
+    ]
+  }
+  drawCharts('kUcKFJZAycqcHLABIFFVWTVbCZOjgryF', res)
+}
+const drawCharts = (id, data) => {
+  const ctx = document.getElementById(id).getContext('2d')
+  // eslint-disable-next-line new-cap
+  uChartsInstance[id] = new uCharts({
+    type: 'pie',
+    context: ctx,
+    width: cWidth,
+    height: cHeight,
+    series: data.series,
+    animation: false,
+    timing: 'easeOut',
+    duration: 1000,
+    rotate: false,
+    rotateLock: false,
+    background: '#FFFFFF',
+    color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
+    padding: [5, 5, 5, 5],
+    fontSize: 13,
+    fontColor: '#666666',
+    dataLabel: true,
+    dataPointShape: true,
+    dataPointShapeType: 'solid',
+    touchMoveLimit: 60,
+    enableScroll: false,
+    enableMarkLine: false,
+    legend: {
+      show: true,
+      position: 'bottom',
+      float: 'bottom',
+      padding: 5,
+      margin: 5,
+      backgroundColor: 'rgba(0,0,0,0)',
+      borderColor: 'rgba(0,0,0,0)',
+      borderWidth: 0,
+      fontSize: 14,
+      fontColor: '#666666',
+      lineHeight: 11,
+      hiddenColor: '#CECECE',
+      itemGap: 10
+    },
+    extra: {
+      pie: {
+        activeOpacity: 0.5,
+        activeRadius: 10,
+        offsetAngle: 0,
+        labelWidth: 15,
+        border: true,
+        borderWidth: 3,
+        borderColor: '#FFFFFF',
+        customRadius: 0,
+        linearType: 'none'
+      },
+      tooltip: {
+        showBox: true,
+        showArrow: true,
+        showCategory: false,
+        borderWidth: 0,
+        borderRadius: 0,
+        borderColor: '#000000',
+        borderOpacity: 0.7,
+        bgColor: '#000000',
+        bgOpacity: 0.7,
+        gridType: 'solid',
+        dashLength: 4,
+        gridColor: '#CCCCCC',
+        boxPadding: 3,
+        fontSize: 13,
+        lineHeight: 20,
+        fontColor: '#FFFFFF',
+        legendShow: true,
+        legendShape: 'auto',
+        splitLine: true,
+        horizentalLine: false,
+        xAxisLabel: false,
+        yAxisLabel: false,
+        labelBgColor: '#FFFFFF',
+        labelBgOpacity: 0.7,
+        labelFontColor: '#666666'
+      }
+    }
+  })
+}
+const tap = (e) => {
+  uChartsInstance[e.target.id].touchLegend(getH5Offset(e))
+  uChartsInstance[e.target.id].showToolTip(getH5Offset(e))
+}
+</script>
+
+<style scoped>
+.charts{
+  width: 700px;
+  height: 400px;
+}
+</style>

web/src/view/finance/financeAnalysis/components/costSum.vue

@@ -76,6 +76,12 @@
           />
         </el-table>
       </el-col>
+      <el-col
+        :span="10"
+        :offset="1"
+      >
+        <charts />
+      </el-col>
     </el-row>
   </div>
 </template>
@@ -84,6 +90,8 @@
 import { codeOperate } from '@/pinia/code/code'
 import { queryProjectMonthFee } from '@/api/cost'
 import { ref, defineExpose } from 'vue'
+import { chartsList } from '@/pinia/chartsData/chartsData'
+import Charts from './charts.vue'
 defineOptions({
   name: 'CostSum'
 })
@@ -91,10 +99,19 @@ const monthData = ref('')
 const yearData = ref('')
 const id = codeOperate()
 const projectMonthFee = ref()
+const chartsStorage = chartsList()
 const querySum = () => {
   queryProjectMonthFee(monthData.value, yearData.value, id.currentCode).then(res => {
     if (res.code === 0) {
       projectMonthFee.value = res.data
+      const list = res.data
+      console.log('汇总列表', list)
+      const sumData = []
+      list.forEach(item => {
+        const temporary = { name: item.projectFeeGenre.name, value: item.totalExpenditure }
+        sumData.push(temporary)
+      })
+      chartsStorage.changeCharts(sumData)
     }
   })
 }