虚实成本对比——堆叠图

package.json

@@ -10,42 +10,43 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@antv/data-set": "^0.11.4",
     "@jeecg/antd-online-mini": "3.4.3-beta2",
+    "@tinymce/tinymce-vue": "2.1.0",
+    "@toast-ui/editor": "^2.1.2",
     "ant-design-vue": "^1.7.2",
-    "@antv/data-set": "^0.11.4",
-    "viser-vue": "^2.4.8",
     "axios": "^0.18.0",
+    "china-area-data": "^5.0.1",
+    "clipboard": "^2.0.4",
+    "codemirror": "^5.46.0",
+    "cron-parser": "^2.10.0",
     "dayjs": "^1.8.0",
+    "dom-align": "1.12.0",
+    "echarts": "^5.4.3",
     "enquire.js": "^2.1.6",
     "js-cookie": "^2.2.0",
     "lodash.get": "^4.4.2",
     "lodash.pick": "^4.4.0",
     "md5": "^2.2.1",
     "nprogress": "^0.2.0",
+    "qiankun": "^2.5.1",
+    "tinymce": "5.4.1",
+    "viser-vue": "^2.4.8",
     "vue": "^2.6.10",
+    "vue-area-linkage": "^5.1.0",
     "vue-cropper": "^0.5.4",
     "vue-i18n": "^8.7.0",
     "vue-loader": "^15.7.0",
     "vue-ls": "^3.2.0",
-    "vue-router": "^3.0.1",
-    "vuex": "^3.1.0",
-    "vue-print-nb-jeecg": "^1.0.12",
-    "clipboard": "^2.0.4",
     "vue-photo-preview": "^1.1.3",
+    "vue-print-nb-jeecg": "^1.0.12",
+    "vue-router": "^3.0.1",
     "vue-splitpane": "^1.0.4",
     "vuedraggable": "^2.20.0",
-    "codemirror": "^5.46.0",
-    "@tinymce/tinymce-vue": "2.1.0",
-    "tinymce": "5.4.1",
-    "@toast-ui/editor": "^2.1.2",
-    "vue-area-linkage": "^5.1.0",
-    "china-area-data": "^5.0.1",
-    "dom-align": "1.12.0",
-    "xe-utils": "2.4.8",
+    "vuex": "^3.1.0",
     "vxe-table": "2.9.13",
     "vxe-table-plugin-antd": "1.8.10",
-    "cron-parser": "^2.10.0",
-    "qiankun": "^2.5.1",
+    "xe-utils": "2.4.8",
     "xss": "^1.0.13"
   },
   "devDependencies": {
@@ -55,13 +56,13 @@
     "@vue/cli-service": "^3.3.0",
     "@vue/eslint-config-standard": "^4.0.0",
     "babel-eslint": "7.2.3",
+    "compression-webpack-plugin": "^3.1.0",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.1.0",
+    "html-webpack-plugin": "^4.2.0",
     "less": "^3.9.0",
     "less-loader": "^4.1.0",
-    "vue-template-compiler": "^2.6.10",
-    "html-webpack-plugin": "^4.2.0",
-    "compression-webpack-plugin": "^3.1.0"
+    "vue-template-compiler": "^2.6.10"
   },
   "eslintConfig": {
     "root": true,
@@ -99,7 +100,10 @@
       "vue/html-closing-bracket-newline": 0,
       "vue/no-parsing-error": 0,
       "no-tabs": 0,
-      "indent": ["off", 2],
+      "indent": [
+        "off",
+        2
+      ],
       "no-console": 0,
       "space-before-function-paren": 0
     }

src/views/module_kzks/projectCostList/ProjectCostList.vue

@@ -203,7 +203,7 @@
 
         <span slot="action" slot-scope="text, record">
           <!-- <a @click="handleEdit(record)">编辑</a> -->
-          <a @click="handleDetail(record)">虚实成本</a>
+          <a @click="handleXushi(record)">虚实成本</a>
 
           <!-- <a-divider type="vertical" />
           <a-dropdown>
@@ -245,6 +245,9 @@
         <a-button @click="handleGb">关闭</a-button>
       </template>
     </j-modal>
+
+    <!-- 虚实成本对比（堆叠图） -->
+    <contrast-modal ref="xushi"></contrast-modal>
   </a-card>
 </template>
 
@@ -259,6 +262,7 @@
   import AllList from '../projectContrastList/allList.vue'
   import WuliaoList from '../projectContrastList/wuliaoList.vue'
   import { getAction } from '@/api/manage'
+import ContrastModal from '../projectXushiContrast/contrastModal.vue'
 
   export default {
     name: 'ProjectCostList',
@@ -267,6 +271,7 @@
         AllList,
         WuliaoList,
         ProjectDetailModal,
+        ContrastModal,
     },
     data () {
       return {
@@ -750,6 +755,11 @@
           }
         }
       },
+      // 虚实对比（堆叠图）
+      handleXushi(record){
+        console.log(record)
+        this.$refs.xushi.open(record)
+      }
 
     }
   }

src/views/module_kzks/projectXushiContrast/contrastGraph.vue

@@ -0,0 +1,151 @@
+<template>
+  <div style="height:600px;width:1000px; display:flex; justify-content:center; align-items:center;">
+      <div class="echarts" style="height:90%;width:100%;" ref="zhexian"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+require('echarts/theme/macarons') // echarts theme
+export default {
+  data() {
+    return {
+        model: {}
+    }
+  },
+  mounted () {
+    this.drawZhexian()
+    window.addEventListener("resize", () =>{
+      this.zheChart.resize();
+    });
+  },
+  methods:{
+    // 获取数据
+    getList(record) {
+        console.log(1111,record)
+        this.model = Object.assign({}, record);
+        console.log(22222,this.model)
+        let that = this
+        this.zheChart.setOption({
+            series: [
+                {
+                name: '预算',
+                type: 'bar',
+                data: [that.model.estimationcoat],
+                emphasis: {
+                    focus: 'series'
+                },
+                },
+                {
+                name: '材料费',
+                type: 'bar',
+                stack: 'Ad',
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [that.model.clf]
+                },
+                {
+                name: '专用费',
+                type: 'bar',
+                stack: 'Ad',
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [that.model.zyf]
+                },
+                {
+                name: '外协费',
+                type: 'bar',
+                stack: 'Ad',
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [that.model.wxf]
+                },
+                {
+                name: '事务费',
+                type: 'bar',
+                stack: 'Ad',
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [that.model.swf]
+                },
+                {
+                name: '管理费',
+                type: 'bar',
+                stack: 'Ad',
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [that.model.glf]
+                },
+                {
+                name: '燃料动力费',
+                type: 'bar',
+                stack: 'Ad',
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [that.model.rldlf]
+                },
+                {
+                name: '工资及劳务费',
+                type: 'bar',
+                stack: 'Ad',
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [that.model.gzjlwf]
+                },
+                {
+                name: '装机成本',
+                type: 'bar',
+                stack: 'Ad',
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [that.model.zjcb]
+                },
+            ]
+        });
+    },
+    // 绘制折线图
+    drawZhexian(){
+      var chartDom = this.$refs.zhexian
+      this.zheChart = echarts.init(chartDom);
+
+      var option;
+
+        option = {
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                type: 'shadow'
+                }
+            },
+            legend: {},
+            grid: {
+                left: '3%',
+                right: '4%',
+                bottom: '3%',
+                containLabel: true
+            },
+            xAxis: [
+                {
+                type: 'value',
+                }
+            ],
+            yAxis: [
+                {
+                type: 'category',
+                data: ['Mon']
+                }
+            ],
+        };
+        option && this.zheChart.setOption(option);
+    },
+  },
+}
+</script>

src/views/module_kzks/projectXushiContrast/contrastModal.vue

@@ -0,0 +1,44 @@
+<template>
+   <j-modal
+      :width="width"
+      :visible="duiBi"
+      @cancel="handleGb">
+      
+      <contrast-graph ref="xushiDuibi"></contrast-graph>
+
+      <template slot="footer">
+        <a-button @click="handleGb">关闭</a-button>
+      </template>
+    </j-modal>
+</template>
+
+<script>
+import contrastGraph from './contrastGraph.vue';
+
+  export default {
+  components: { contrastGraph },
+    name: 'ContrastModal',
+    data () {
+      return {
+        title:'',
+        width:1100,
+        duiBi: false,
+      }
+    },
+    methods: {
+      open(record) {
+        this.duiBi = true;
+        this.$nextTick(()=>{
+          this.$refs.xushiDuibi.getList(record);
+        })
+      },
+      close () {
+        this.$emit('close');
+        this.duiBi = false;
+      },
+      handleGb () {
+        this.close()
+      }
+    }
+  }
+</script>

yarn.lock

@@ -4573,6 +4573,14 @@ ecc-jsbn@~0.1.1:
     jsbn "~0.1.0"
     safer-buffer "^2.1.0"
 
+echarts@^5.4.3:
+  version "5.4.3"
+  resolved "https://registry.yarnpkg.com/echarts/-/echarts-5.4.3.tgz#f5522ef24419164903eedcfd2b506c6fc91fb20c"
+  integrity sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==
+  dependencies:
+    tslib "2.3.0"
+    zrender "5.4.4"
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -11019,6 +11027,11 @@ tsconfig-paths@^3.9.0:
     minimist "^1.2.0"
     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==
+
 tslib@^1.10.0, tslib@^1.9.0:
   version "1.13.0"
   resolved "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043"
@@ -12081,3 +12094,10 @@ yorkie@^2.0.0:
     is-ci "^1.0.10"
     normalize-path "^1.0.0"
     strip-indent "^2.0.0"
+
+zrender@5.4.4:
+  version "5.4.4"
+  resolved "https://registry.yarnpkg.com/zrender/-/zrender-5.4.4.tgz#8854f1d95ecc82cf8912f5a11f86657cb8c9e261"
+  integrity sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==
+  dependencies:
+    tslib "2.3.0"