From f31cff91be3c7d20a6b24f78fe080e9e1d513ebd Mon Sep 17 00:00:00 2001
From: caoyizhong <1270296080@qq.com>
Date: Tue, 28 Feb 2023 18:06:41 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=BB=9F=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layouts/index.js               |   3 +-
 src/components/menu/Contextmenu.vue           |   4 +
 src/config/router.config.js                   |   7 +-
 src/views/statisticanalysis/CostStatistic.vue |  10 +-
 .../costecharts/CaseCost.vue                  | 315 ++++++++----
 .../statisticanalysis/costecharts/Cost.vue    |  21 +-
 .../costecharts/CostAnalysis.vue              | 477 +++++++++++++++++-
 .../costecharts/ItemCost.vue                  |  10 +-
 .../costecharts/OnDayCost.vue                 |  18 +-
 9 files changed, 735 insertions(+), 130 deletions(-)

diff --git a/src/components/layouts/index.js b/src/components/layouts/index.js
index 7cf0f77..de8e521 100644
--- a/src/components/layouts/index.js
+++ b/src/components/layouts/index.js
@@ -4,5 +4,6 @@ import BasicLayout from '@/components/layouts/BasicLayout'
 import RouteView from '@/components/layouts/RouteView'
 import PageView from '@/components/layouts/PageView'
 import TabLayout from '@/components/layouts/TabLayout'
+import  CostStatistic  from '@/views/statisticanalysis/CostStatistic'
 
-export { UserLayout, BasicLayout, BlankLayout, RouteView, PageView, TabLayout }
\ No newline at end of file
+export { UserLayout, BasicLayout, BlankLayout, RouteView, PageView, TabLayout ,CostStatistic}
\ No newline at end of file
diff --git a/src/components/menu/Contextmenu.vue b/src/components/menu/Contextmenu.vue
index f88f7b4..85137a1 100644
--- a/src/components/menu/Contextmenu.vue
+++ b/src/components/menu/Contextmenu.vue
@@ -43,6 +43,10 @@ export default {
   },
   methods: {
     closeMenu (e) {
+      if(e.target.href && e.target.href.indexOf("cellList") > 0){
+        console.log("执行l");
+        window.open(e.target.href,"_blank");
+      }
       if (this.visible === true && ['menuitemicon', 'menuitem'].indexOf(e.target.getAttribute('role')) < 0) {
         this.$emit('update:visible', false)
       }
diff --git a/src/config/router.config.js b/src/config/router.config.js
index 397e147..d4afd84 100644
--- a/src/config/router.config.js
+++ b/src/config/router.config.js
@@ -1,4 +1,5 @@
-import { UserLayout, TabLayout, RouteView, BlankLayout, PageView } from '@/components/layouts'
+import { UserLayout, TabLayout, RouteView, BlankLayout, PageView ,CostStatistic} from '@/components/layouts'
+
 
 /**
  * 走菜单，走权限控制
@@ -322,6 +323,10 @@ export const constantRouterMap = [
       },
     ]
   },
+  {
+    path: '/cellList',
+    component: () => import(/* webpackChunkName: "user" */ '@/views/statisticanalysis/CostStatistic')
+  },
 
   // {
   //   path: '/',
diff --git a/src/views/statisticanalysis/CostStatistic.vue b/src/views/statisticanalysis/CostStatistic.vue
index 3550304..071b17d 100644
--- a/src/views/statisticanalysis/CostStatistic.vue
+++ b/src/views/statisticanalysis/CostStatistic.vue
@@ -1,23 +1,23 @@
 <template>
   <!--  <div>成本统计</div>-->
-  <div style="height: 950px;display: flex;align-items: center;justify-content: flex-start;background-color: #ececec">
+  <div style="height: 840px;display: flex;align-items: center;justify-content: flex-start;background-color: #ececec">
     <div style="height: 100%;width:35%;">
       <div style="height: 20%;">
         <OnDayCost/>
       </div>
-      <div style="height: 35%;">
+      <div style="height: 39%;">
         <ItemCost/>
       </div>
-      <div style="height: 35%;">
+      <div style="height: 38%;">
 <!--        成本-->
         <Cost/>
       </div>
     </div>
     <div style="height: 100%;width:65%;">
-      <div style="height: 60%;padding-top: 2%;padding-right: 2%;padding-bottom: 2%;">
+      <div style="height: 45%;background-color: #ffffff;border-radius: 10px">
         <CostAnalysis/>
       </div>
-      <div style="height: 40%;">
+      <div style="height: 54%;margin-top: 1%">
         <CaseCost/>
       </div>
     </div>
diff --git a/src/views/statisticanalysis/costecharts/CaseCost.vue b/src/views/statisticanalysis/costecharts/CaseCost.vue
index 3b295ac..a152de1 100644
--- a/src/views/statisticanalysis/costecharts/CaseCost.vue
+++ b/src/views/statisticanalysis/costecharts/CaseCost.vue
@@ -1,88 +1,40 @@
 <template>
 <!--  <div>项目成本情况</div>-->
-  <div style="width: 100%;height:100% ">
-      <div style="height: 20%;margin-left: 4%">
-        <div style="font-size: 19px;margin-bottom: 5px">项目部成本情况</div>
-<!--        <div style="color: #ffffff;font-size: 19px;margin-bottom: 5px">项目部成本情况</div>-->
-        <div style="display: flex;align-items: center;justify-content: flex-start">
-          <div class="xian">第一项目部</div>
-          <div class="xian">第二项目部</div>
-          <div class="xian">第三项目部</div>
-          <div class="xian">第四项目部</div>
+  <div style="width: 100%;height:100%;background-color: #ffffff;border-radius:15px;z-index: 999 ">
+      <div style="height: 10%;margin-left: 2%;padding-top: 1%">
+        <div style="font-size: 25px;margin-bottom: 5px">项目部成本情况
+          <j-dict-select-tag type="list" v-model="materialType" style="width: 20%;float: right;margin-right: 2%"
+                             :trigger-change="true" dictCode="material_type"
+                             placeholder="请选择物资类型" @change="handleChange"/>
         </div>
+
+<!--        <div style="color: #ffffff;font-size: 19px;margin-bottom: 5px">项目部成本情况</div>-->
+<!--        <div style="display: flex;align-items: center;justify-content: flex-start">-->
+<!--          <div class="xian">第一项目部</div>-->
+<!--          <div class="xian">第二项目部</div>-->
+<!--          <div class="xian">第三项目部</div>-->
+<!--          <div class="xian">第四项目部</div>-->
+<!--        </div>-->
       </div>
     <div style="display: flex;align-items: center;justify-content: center">
-      <div style="width: 33%;height: 300px">
-        <div id="myOneCost" style="width: 85%; height: 70%"></div>
-        <div style="width: 100%;height: 29%;padding-left: 5%">
-          <div class="mu" style="">
-            <div class="dui" style="text-align: center;padding-top: 10%">第一小队</div>
-            <div class="dui">
-              <div class="yi" style="">生产类物资</div>
-              <div class="yi" style=" ">非生产类</div>
-              <div style="padding-left: 3%;">
-                <span>无形资产</span><br>
-                <span>人员工资</span>
-              </div>
-            </div>
-            <div class="dui">
-              <div class="yi">34</div>
-              <div class="yi">533</div>
-              <div style="padding-left: 3%;">
-                <span>234</span><br>
-                <span>34</span>
-              </div>
-            </div>
-          </div>
+      <div style="width: 100%;height: 300px">
+        <div id="myOneCost" style="width: 100%; height: 70%"></div>
+        <div style="width: 100%;height: 50%;padding-left: 5%">
+          <a-table
+            style="padding-right: 3%;height: 10px"
+            ref="table"
+            size="middle"
+            :scroll="{y:150}"
+            bordered
+            rowKey="id"
+            :columns="columns"
+            :dataSource="dataSource"
+            :pagination=false
+            :loading="loading"
+          >
+
+          </a-table>
 
-        </div>
-      </div>
-      <div style="width: 33%;height: 300px">
-        <div id="myTwoCost" style="width: 85%; height: 70%"></div>
-        <div style="width: 100%;height: 29%;padding-left: 5%">
-          <div class="mu" style="">
-            <div class="dui" style="text-align: center;padding-top: 10%">第二小队</div>
-            <div class="dui">
-              <div class="yi">生产类物资</div>
-              <div class="yi">非生产类</div>
-              <div style="padding-left: 3%;">
-                <span>无形资产</span><br>
-                <span>人员工资</span>
-              </div>
-            </div>
-            <div class="dui">
-              <div class="yi">34</div>
-              <div class="yi">2134</div>
-              <div style="padding-left: 3%;">
-                <span>234</span><br>
-                <span>34</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div style="width: 33%;height: 300px">
-        <div id="myThreeCost" style="width: 85%; height: 70%"></div>
-        <div style="width: 100%;height: 29%;padding-left: 5%">
-          <div class="mu" style="">
-            <div class="dui" style="text-align: center;padding-top: 10%">第三小队</div>
-            <div class="dui">
-              <div class="yi">生产类物资</div>
-              <div class="yi">非生产类</div>
-              <div style="padding-left: 3%;">
-                <span>无形资产</span><br>
-                <span>人员工资</span>
-              </div>
-            </div>
-            <div class="dui">
-              <div class="yi">34</div>
-              <div class="yi">345345</div>
-              <div style="padding-left: 3%;">
-                <span>234</span><br>
-                <span>34</span>
-              </div>
-            </div>
-          </div>
         </div>
       </div>
     </div>
@@ -92,22 +44,181 @@
 
 <script>
 import * as echarts from 'echarts';
+import { FormTypes } from '@/utils/JEditableTableUtil'
+
 
 export default {
   name: 'CaseCost',
   data(){
     return{
+      materialType:null,
+      /* table加载状态 */
+      loading:false,
+      dataSource: [
+        // {id:'1234',materialClassify: 'qwe',materialsNumber: "sdf",materialsUnit: 'sdfsd',materialQuantity: 'sdfgv',merchandiseName:'sdfg'},
+        // {id:'34563',materialClassify: 'qwe',materialsNumber: "sdf",materialsUnit: 'sdfsd',materialQuantity: 'sdfgv',merchandiseName:'sdfg'},
+        // {id:'456745',materialClassify: 'qwe',materialsNumber: "sdf",materialsUnit: 'sdfsd',materialQuantity: 'sdfgv',merchandiseName:'sdfg'}
+      ],
+      columns: [
+        {
+          title: '序号',
+          dataIndex: '',
+          key:'rowIndex',
+          width:50,
+          align:"center",
+          customRender:function (t,r,index) {
+            return parseInt(index)+1;
+          }
+        },
+        {
+          title:'编号',
+          align:"center",
+          dataIndex: 'materialClassify'
+        },
+        {
+          title:'生产类物资',
+          align:"center",
+          dataIndex: 'materialsNumber'
+        },
+
+        {
+          title:'非生产类物资',
+          align:"center",
+          dataIndex: 'merchandiseName'
+        },
+        {
+          title:'无形资产',
+          align:"center",
+          dataIndex: 'materialsUnit'
+        },
+        {
+          title:'人员工资',
+          align:"center",
+          dataIndex: 'materialQuantity',
+        },
+        // {
+        //   title:'项目部数量',
+        //   align:"center",
+        //   dataIndex: 'itemQuantity',
+        //   // customRender:function (t,r,index) {
+        //   //   console.log(r)
+        //   //   if(r.itemQuantity === undefined){
+        //   //
+        //   //   }
+        //   //   return 0;
+        //   // }
+        // },
+        // {
+        //   title:'项目部消耗数量',
+        //   align:"center",
+        //   dataIndex: 'usageQuantity',
+        //   customRender:function (t,r,index) {
+        //     // console.log("ergsdfgsd",r,r.usageQuantity)
+        //     if(!!r.usageQuantity && !!r.residueNumber){
+        //       return parseInt(r.usageQuantity) - parseInt(r.residueNumber);
+        //     }
+        //     return 0;
+        //   }
+        // },
+        // {
+        //   title:'科室消耗数量',
+        //   align:"center",
+        //   dataIndex: 'residueNumber',
+        //   customRender:function (t,r,index) {
+        //     // console.log(r)
+        //     if(r.residueNumber === undefined){
+        //       return 0;
+        //     }else{
+        //       return r.residueNumber;
+        //     }
+        //
+        //   }
+        // },
+        // {
+        //   title:'核算属性',
+        //   align:"center",
+        //   dataIndex: 'accountingAttributes_dictText'
+        // },
+        // {
+        //   title: '明细',
+        //   dataIndex: 'action',
+        //   align:"center",
+        //   width:147,
+        //   scopedSlots: { customRender: 'action' }
+        // }
+      ],
 
     }
   },
   mounted() {
     this.echartsInitOne();
-    this.echartsInitTwo();
-    this.echartsInitThree();
+    // this.echartsInitTwo();
+    // this.echartsInitThree();
   },
   methods:{
+    handleChange(value) {
+      console.log(`selected ${value}`);
+    },
     echartsInitOne() {
       let myEcharts = echarts.init(document.getElementById("myOneCost"))
+      // let option ={
+      //   // title: {
+      //   //   text: '项目部成本',
+      //   //   subtext: 'Living Expenses in Shenzhen'
+      //   // },
+      //   tooltip: {},
+      //   // 图表距边框的距离,可选值：'百分比'¦ {number}(单位px)
+      //   grid: {
+      //     top: '10%', // 等价于 y: '16%'
+      //     left: '6%',
+      //     right: '5%',
+      //     bottom: '3%',
+      //     containLabel: true
+      //   },
+      //   xAxis: {
+      //     type: 'category',
+      //     data: ["1","2","3","4","5","6","7","8","9","10","11","12"],
+      //     // show: false,
+      //     axisLine: {
+      //       lineStyle: {
+      //         color: '#000000', //x轴的颜色
+      //         // width: 8, //轴线的宽度
+      //       },
+      //
+      //     }
+      //   },
+      //   yAxis: {
+      //     type: 'value',
+      //     axisLine: {
+      //       lineStyle: {
+      //         color: '#000000', //x轴的颜色
+      //         // width: 8, //轴线的宽度
+      //       },
+      //     },
+      //     splitLine: {
+      //       show: true,
+      //       lineStyle: {
+      //         type: 'dashed',
+      //         color:'#c2cfd9'
+      //       }
+      //     },
+      //   },
+      //   series: [
+      //     {
+      //       data: [10, 20, 40, 40, 50, 60,60,70,25,56,23,23], //对应每一个X坐标的值
+      //       type: 'line',
+      //       smooth: true,
+      //       itemStyle: {
+      //         normal: {
+      //           color: '#7b7777', //改变折线点的颜色
+      //           lineStyle: {
+      //             color: '#1ad933' //改变折线颜色
+      //           }
+      //         }
+      //       },
+      //     }
+      //   ]
+      // };
       let option ={
         // title: {
         //   text: '项目部成本',
@@ -124,11 +235,12 @@ export default {
         },
         xAxis: {
           type: 'category',
-          data: ["1","2","3","4","5","6","7","8","9","10","11","12"],
+          data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
           // show: false,
           axisLine: {
+            show: false,
             lineStyle: {
-              color: '#000000', //x轴的颜色
+              color: '#878686', //x轴的颜色
               // width: 8, //轴线的宽度
             },
 
@@ -137,8 +249,9 @@ export default {
         yAxis: {
           type: 'value',
           axisLine: {
+            show: false,
             lineStyle: {
-              color: '#000000', //x轴的颜色
+              color: '#8d8b8b', //x轴的颜色
               // width: 8, //轴线的宽度
             },
           },
@@ -154,15 +267,34 @@ export default {
           {
             data: [10, 20, 40, 40, 50, 60,60,70,25,56,23,23], //对应每一个X坐标的值
             type: 'line',
-            smooth: true,
+            // itemStyle: {
+            //   normal: {
+            //     color: '#7b7777', //改变折线点的颜色
+            //     lineStyle: {
+            //       color: '#1ad933' //改变折线颜色
+            //     }
+            //   }
+            // },
+            areaStyle: {},
+            showSymbol: false,
+            // color:'#bfbcbc',
             itemStyle: {
+
               normal: {
-                color: '#7b7777', //改变折线点的颜色
+                // color: '#7b7777', //改变折线点的颜色
+                color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                  offset: 0,
+                  color: 'rgb(210,223,255)'
+                }, {
+                  offset: 1,
+                  color: 'rgb(253,253,255)'
+                }]),
                 lineStyle: {
-                  color: '#1ad933' //改变折线颜色
+                  color: 'rgb(52,112,255)' //改变折线颜色
                 }
               }
             },
+            smooth: true
           }
         ]
       };
@@ -298,6 +430,15 @@ export default {
 </script>
 
 <style scoped>
+ /*给.ant-table设置最低高度*/
+/deep/.ant-empty-normal {
+  margin: 1% 0 !important;
+}
+ /*当表格数据为空时，修改.ant-empty-normal样式，会撑高空白样式*/
+/deep/.ant-table {
+  min-height: 500% !important;
+}
+
 .xian{
   color: #ffffff;
   border: 1px solid #00ff80;
diff --git a/src/views/statisticanalysis/costecharts/Cost.vue b/src/views/statisticanalysis/costecharts/Cost.vue
index 74daace..7e5db33 100644
--- a/src/views/statisticanalysis/costecharts/Cost.vue
+++ b/src/views/statisticanalysis/costecharts/Cost.vue
@@ -1,12 +1,19 @@
 <template>
   <div style="width: 95%;height:100% ;background-color: #ffffff;margin-top: 2%;border-radius: 10px">
-    <div style="height: 25%;margin-left: 6%">
-      <div style="font-size: 25px;margin-bottom: 5px;padding-top: 5%">公司成本
-        <span style="margin: 0% 6%">  <a-month-picker :disabled-date="disabledDate" placeholder="选择日期" />  </span>
-        <j-dict-select-tag type="list" v-model="materialType" style="width: 30%"
+    <div style="height: 20%;margin-left: 6%;padding-top: 2%">
+      <div style="font-size: 25px;margin-bottom: 5px;margin-bottom: 2%">公司成本
+        <span style="margin-left: 9%;margin-right: 2%">  <a-month-picker :disabled-date="disabledDate" placeholder="选择日期" />  </span>
+        <j-dict-select-tag type="list" v-model="materialType" style="width: 30%;margin-left: 2%"
                            :trigger-change="true" dictCode="material_type"
                            placeholder="请选择物资类型" @change="handleChange"/>
       </div>
+<!--    <div style="height: 25%;margin-left: 6%;padding-top: 2%">-->
+<!--      <div style="font-size: 25px;">公司成本-->
+<!--        <span style="">  <a-month-picker :disabled-date="disabledDate" placeholder="选择日期" />  </span>-->
+<!--        <j-dict-select-tag type="list" v-model="materialType" style="width: 30%"-->
+<!--                           :trigger-change="true" dictCode="material_type"-->
+<!--                           placeholder="请选择物资类型" @change="handleChange"/>-->
+<!--      </div>-->
 <!--      <div style="color: #ffffff;font-size: 19px;margin-bottom: 5px">公司成本</div>-->
 <!--      <div style="display: flex;align-items: center;justify-content: flex-start">-->
 <!--        <div class="xian">月</div>-->
@@ -21,7 +28,7 @@
 <!--        <div class="zi">无形类资产</div>-->
 <!--      </div>-->
     </div>
-    <div ref="myChartCon" style="width: 95%; height: 75%"></div>
+    <div ref="myChartCon" style="width: 95%; height: 80%"></div>
   </div>
 
 </template>
@@ -49,6 +56,10 @@ name: "Cost",
     this.drawLine()
   },
   methods: {
+    disabledDate(current) {
+      // Can not select days before today and today
+      return current && current < moment().endOf('day');
+    },
     handleChange(value) {
       console.log(`selected ${value}`);
     },
diff --git a/src/views/statisticanalysis/costecharts/CostAnalysis.vue b/src/views/statisticanalysis/costecharts/CostAnalysis.vue
index 04f0891..aa48bd4 100644
--- a/src/views/statisticanalysis/costecharts/CostAnalysis.vue
+++ b/src/views/statisticanalysis/costecharts/CostAnalysis.vue
@@ -1,30 +1,18 @@
 <template>
 <!--  <div>成本分析</div>-->
-  <div style="width: 100%;height: 100%;padding-top: 2%;border-radius:15px;background-color: #9c9a9a;">
-    <div style="height: 30%;margin-left: 1%;width: 100%">
-      <div style="color: #ffffff;font-size: 19px;margin-bottom: 5px">分析成本</div>
-<!--      <div style="display: flex;align-items: center;justify-content: space-between;margin-left: 5%;width: 90%">-->
-<!--        <div style="display: flex;align-items: center;justify-content: flex-start;width: 42%" >-->
-<!--          <div class="xian">新疆分公司</div>-->
-<!--          <div class="xian">计划经营科</div>-->
-<!--          <div class="xian">第一项目部</div>-->
-<!--          <div class="xian">第二项目部</div>-->
-<!--        </div>-->
-<!--        <div style="float: right;;display: flex;align-items: center;justify-content: flex-end;width: 42%">-->
-<!--          <div class="xian">年度</div>-->
-<!--          <div class="xian">半年度</div>-->
-<!--          <div class="xian">季度</div>-->
-<!--          <div class="xian">月</div>-->
-<!--        </div>-->
+  <div style="width: 100%;height: 100%;padding-top: 1%;border-radius:15px;">
+<!--    <div style="height: 9%;margin-left: 2%;width: 100%">-->
+      <div style="font-size: 25px;padding-left: 2%">分析成本
+        <div style="float: right;width: 38%;height: 35px;padding-top: 0px">
+          <span style="margin-right: 8%;padding-top: 0px">  <a-month-picker :disabled-date="disabledDate" placeholder="选择日期" />  </span>
+          <j-dict-select-tag type="list" v-model="materialType" style="width: 45%;;padding-right: 4%"
+                             :trigger-change="true" dictCode="material_type"
+                             placeholder="请选择物资类型" @change="handleChange"/>
+        </div>
 
-<!--      </div>-->
-<!--      <div style="display: flex;align-items: center;justify-content: flex-start;margin-left: 5%">-->
-<!--        <div class="zi">扇形图</div>-->
-<!--        <div class="zi">折线图</div>-->
-<!--        <div class="zi">条形图</div>-->
-<!--      </div>-->
-    </div>
-    <div id="myCostAnalysis" style="width: 100%; height: 70%;padding-top: 10px"></div>
+      </div>
+<!--    </div>-->
+    <div id="myCostAnalysis" style="width: 100%; height: 95%;"></div>
   </div>
 </template>
 
@@ -36,21 +24,455 @@ export default {
 name: "CostAnalysis",
   data(){
     return{
-
+      materialType:null,
+      options: { },
+      list:[],
     }
   },
   mounted() {
-    this.echartsInit()
+    // this.echartsInitTiao()
+    // this.echartsInitZhe()
+    // this.echartsInit()
+    this.getList();
   },
   methods:{
-    echartsInit() {
+    disabledDate(current) {
+      // Can not select days before today and today
+      return current && current < moment().endOf('day');
+    },
+    handleChange(value) {
+      console.log(`selected ${value}`);
+    },
+    getList(){
+      this.list = [
+          { value: 1048, name: '生产类物资' },
+          { value: 735, name: '非生产类物资' },
+          { value: 580, name: '科研类物资' },
+          { value: 484, name: '无形类资产' },
+          { value: 300, name: '人员工资' },
+          { value: 300, name: '税务' },
+      ];
+      this.$nextTick(function () {
+        this.barData()
+        this.initChart();
+      })
+    },
+    //渲染图表
+    initChart() {
+      let charter = echarts.init(document.getElementById("myCostAnalysis"))
+      charter.resize()
+      charter.clear()
+      charter.setOption(this.options, true)
+    },
+    //折线
+    lineData() {
+      let that = this
+      let xAxisData = that.list.map((item) => item.name)
+      let seriesData = that.list.map((item) => item.value)
+      this.options = {
+        title: {
+          // ...dOptions.title,
+          // text: this.title
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        toolbox: {
+          show: true,
+          feature: {
+            // dataView: { readOnly: false },
+            myPie: {
+              show: true,
+              title: '切换为饼状图',
+              icon: 'path://M512 98.304C282.624 98.304 98.304 282.624 98.304 512s184.32 413.696 413.696 413.696c229.376 0 413.696-184.32 413.696-413.696S741.376 98.304 512 98.304zM888.832 491.52l-331.776 0 233.472-233.472C847.872 323.584 884.736 401.408 888.832 491.52zM512 888.832c-208.896 0-376.832-167.936-376.832-376.832 0-208.896 167.936-376.832 376.832-376.832 98.304 0 184.32 36.864 253.952 98.304l-266.24 266.24c-4.096 4.096-4.096 8.192-4.096 12.288 0 12.288 8.192 20.48 20.48 20.48l376.832 0C876.544 729.088 712.704 888.832 512 888.832z',
+              onclick: function () {
+                that.pieData()
+                that.initChart()
+              }
+            },
+            magicType: { show: true, type: ['bar', 'line'] },
+            // restore: {},
+            // saveAsImage: {}
+          }
+        },
+        xAxis: {
+          type: 'category',
+          data: xAxisData,
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: '#878686', //x轴的颜色
+              // width: 8, //轴线的宽度
+            },
+
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: '#8d8b8b', //x轴的颜色
+              // width: 8, //轴线的宽度
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: 'dashed',
+              color:'#c2cfd9'
+            }
+          },
+        },
+        series: [
+          {
+            data: seriesData,
+            type: 'line',
+            smooth: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: 'rgba(111, 162, 135, 0.2)'
+            },
+            itemStyle: {
+              normal: {
+                //这里是颜色
+                color: '#00A3E0'
+                //   function(params) {
+                //   //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
+                //   var colorList = ['#00A3E0','#FFA100', '#ffc0cb', '#CCCCCC', '#BBFFAA','#749f83', '#ca8622'];
+                //   return colorList[params.dataIndex]
+                // }
+              }
+            }
+
+          }
+        ]
+      }
+    },
+    echartsInitZhe() {
       let myEcharts = echarts.init(document.getElementById("myCostAnalysis"))
+      let option = {
+        toolbox: {
+          show: true,
+          feature: {
+            myTool: {
+              show: true,
+              title: '切换为饼状图',
+              icon: 'path://M512 98.304C282.624 98.304 98.304 282.624 98.304 512s184.32 413.696 413.696 413.696c229.376 0 413.696-184.32 413.696-413.696S741.376 98.304 512 98.304zM888.832 491.52l-331.776 0 233.472-233.472C847.872 323.584 884.736 401.408 888.832 491.52zM512 888.832c-208.896 0-376.832-167.936-376.832-376.832 0-208.896 167.936-376.832 376.832-376.832 98.304 0 184.32 36.864 253.952 98.304l-266.24 266.24c-4.096 4.096-4.096 8.192-4.096 12.288 0 12.288 8.192 20.48 20.48 20.48l376.832 0C876.544 729.088 712.704 888.832 512 888.832z',
+              onclick: function () {
+                let myChartline = document.getElementById("myCostAnalysis");
+                let myChartpie2 = document.getElementById("myCostAnalysisYuan");
+                myChartline.style.display = "none";
+                myChartpie2.style.display = "block";
+              }
+            },
+            magicType: { type: ['bar', 'line'] },
+
+          }
+        },
+        xAxis: {
+          type: 'category',
+          data: ['生产类物资', '非生产类物资', '科研类物资', '无形类资产', '人员工资', '税务']
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            data: [120, 200, 150, 80, 70, 110],
+            type: 'bar'
+          }
+        ]
+      };
+      myEcharts.setOption(option)// 给生成的echarts实例进行传递配置项option
+    },
+    //柱型
+    barData() {
+      let that = this
+      let xAxisData = that.list.map((item) => item.name)
+      let seriesData = that.list.map((item) => item.value)
+      this.options = {
+        title: {
+          // ...dOptions.title,
+          // text: this.title
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        toolbox: {
+          show: true,
+          feature: {
+            // dataView: { readOnly: false },
+            myPie: {
+              show: true,
+              title: '切换为饼状图',
+              icon: 'path://M512 98.304C282.624 98.304 98.304 282.624 98.304 512s184.32 413.696 413.696 413.696c229.376 0 413.696-184.32 413.696-413.696S741.376 98.304 512 98.304zM888.832 491.52l-331.776 0 233.472-233.472C847.872 323.584 884.736 401.408 888.832 491.52zM512 888.832c-208.896 0-376.832-167.936-376.832-376.832 0-208.896 167.936-376.832 376.832-376.832 98.304 0 184.32 36.864 253.952 98.304l-266.24 266.24c-4.096 4.096-4.096 8.192-4.096 12.288 0 12.288 8.192 20.48 20.48 20.48l376.832 0C876.544 729.088 712.704 888.832 512 888.832z',
+              onclick: function () {
+                that.pieData()
+                that.initChart()
+              }
+            },
+            magicType: { show: true, type: ['bar', 'line'] },
+            // restore: {},
+            // saveAsImage: {}
+          }
+        },
+        xAxis: {
+          type: 'category',
+          data: xAxisData,
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: '#878686', //x轴的颜色
+              // width: 8, //轴线的宽度
+            },
+
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: '#8d8b8b', //x轴的颜色
+              // width: 8, //轴线的宽度
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: 'dashed',
+              color:'#c2cfd9'
+            }
+          },
+        },
+        series: [
+          {
+            data: seriesData,
+            type: 'bar',
+            showBackground: true,
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            },
+            // showBackground: true,
+            // backgroundStyle: {
+            //   color: 'rgba(111, 162, 135, 0.2)'
+            // },
+            itemStyle: {
+              normal: {
+                //这里是颜色
+                color: '#00A3E0'
+                //   function(params) {
+                //   //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
+                //   // var colorList = ['#0b58f5','#FFA100', '#ffc0cb', '#CCCCCC', '#BBFFAA','#749f83', '#ca8622'];
+                //   var colorList = ['#0b58f5'];
+                //   return colorList[params.dataIndex]
+                // }
+              }
+            }
+
+          }
+        ]
+      }
+    },
+    echartsInitTiao() {
+      let myEcharts = echarts.init(document.getElementById("myCostAnalysis"))
+      let option = {
+        // title: {
+        //   text: '分析成本',
+        //   // subtext: '',
+        //   // left: 'center'
+        // },
+        toolbox: {
+          show: true,
+          feature: {
+            myTool: {
+              show: true,
+              title: '切换为饼状图',
+              icon: 'path://M512 98.304C282.624 98.304 98.304 282.624 98.304 512s184.32 413.696 413.696 413.696c229.376 0 413.696-184.32 413.696-413.696S741.376 98.304 512 98.304zM888.832 491.52l-331.776 0 233.472-233.472C847.872 323.584 884.736 401.408 888.832 491.52zM512 888.832c-208.896 0-376.832-167.936-376.832-376.832 0-208.896 167.936-376.832 376.832-376.832 98.304 0 184.32 36.864 253.952 98.304l-266.24 266.24c-4.096 4.096-4.096 8.192-4.096 12.288 0 12.288 8.192 20.48 20.48 20.48l376.832 0C876.544 729.088 712.704 888.832 512 888.832z',
+              onclick: function () {
+                let myChartline = document.getElementById("myCostAnalysis");
+                let myChartpie2 = document.getElementById("myCostAnalysisYuan");
+                myChartline.style.display = "none";
+                myChartpie2.style.display = "block";
+              }
+            },
+            magicType: { type: ['bar', 'line'] },
+
+          }
+        },
+        xAxis: {
+          type: 'category',
+          data: ['生产类物资', '非生产类物资', '科研类物资', '无形类资产', '人员工资', '税务']
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            data: [120, 200, 150, 80, 70, 110],
+            type: 'bar'
+          }
+        ]
+      };
+      myEcharts.setOption(option)// 给生成的echarts实例进行传递配置项option
+    },
+    //饼
+    pieData() {
+    let that = this
+    this.options = {
+      title: {
+        // ...dOptions.title,
+        // text: this.title
+      },
+      toolbox: {
+        show: true,
+        feature: {
+          // dataView: { readOnly: false },
+          myPie: {
+            show: true,
+            title: '切换为饼状图',
+            icon: 'path://M512 98.304C282.624 98.304 98.304 282.624 98.304 512s184.32 413.696 413.696 413.696c229.376 0 413.696-184.32 413.696-413.696S741.376 98.304 512 98.304zM888.832 491.52l-331.776 0 233.472-233.472C847.872 323.584 884.736 401.408 888.832 491.52zM512 888.832c-208.896 0-376.832-167.936-376.832-376.832 0-208.896 167.936-376.832 376.832-376.832 98.304 0 184.32 36.864 253.952 98.304l-266.24 266.24c-4.096 4.096-4.096 8.192-4.096 12.288 0 12.288 8.192 20.48 20.48 20.48l376.832 0C876.544 729.088 712.704 888.832 512 888.832z',
+            onclick: function () {
+              that.pieData()
+              that.initChart()
+            }
+          },
+          myBar: {
+            show: true,
+            title: '切换为柱状图',
+            icon: 'path://M6.7,22.9h10V48h-10V22.9zM24.9,13h10v35h-10V13zM43.2,2h10v46h-10V2zM3.1,58h53.7',
+            onclick: function () {
+              that.barData()
+              that.initChart()
+            }
+          },
+          myLine: {
+            show: true,
+            title: '切换为折线图',
+            icon: 'path://M4.1,28.9h7.1l9.3-22l7.4,38l9.7-19.7l3,12.8h14.9M4.1,58h51.4',
+            onclick: function () {
+              that.lineData()
+              that.initChart()
+            }
+          },
+          // restore: {},
+          // saveAsImage: {}
+        }
+      },
+      color: ['#00A3E0','#FFA100', '#ffc0cb', '#CCCCCC', '#BBFFAA','#749f83', '#ca8622'],
+      tooltip: {
+        trigger: 'item',
+        formatter: '{b} : {c} ({d}%)'
+      },
+      legend: {
+        icon: 'circle',
+        right: 6,
+        top: '10%',
+        width: '40%',
+        itemWidth: 18,
+        itemHeight: 18,
+        textStyle: {
+          padding: 4,
+          rich: {
+            a: {
+              color: '#969AA8',
+              lineHeight: 30,
+              fontSize: 14,
+              width: 90
+            },
+            b: {
+              fontSize: 14,
+              fontWeight: 'bolder',
+              color: '#000'
+            }
+          }
+        },
+        data: that.list,
+        formatter: function (name) {
+          var total = 0
+          var target
+          for (var i = 0, l = that.list.length; i < l; i++) {
+            total += that.list[i].value
+            if (that.list[i].name == name) {
+              target = that.list[i].value
+            }
+          }
+          let nameResult = name.length > 6 ? name.slice(0, 6) + '...' : name
+          return '{b|' + ((target / total) * 100).toFixed(2) + '%}\n{a|' + nameResult + '}'
+        }
+      },
+      series: [
+        {
+          type: 'pie',
+          label: {
+            show: false
+          },
+          radius: [75, 105],
+          center: ['35%', '55%'],
+          data: that.list,
+          animationEasing: 'cubicInOut',
+          animationDuration: 2600
+        }
+      ]
+    }
+  },
+    echartsInit() {
+      let myChartline = document.getElementById("myCostAnalysisYuan");
+      let myEcharts = echarts.init(document.getElementById("myCostAnalysisYuan"))
       let option = {
         // title: {
         //   text: '分析成本',
         //   // subtext: '',
         //   // left: 'center'
         // },
+        toolbox: {
+          show: true,
+          feature: {
+
+            myTool: {
+              show: true,
+              title: '切换为饼状图',
+              icon: 'path://M512 98.304C282.624 98.304 98.304 282.624 98.304 512s184.32 413.696 413.696 413.696c229.376 0 413.696-184.32 413.696-413.696S741.376 98.304 512 98.304zM888.832 491.52l-331.776 0 233.472-233.472C847.872 323.584 884.736 401.408 888.832 491.52zM512 888.832c-208.896 0-376.832-167.936-376.832-376.832 0-208.896 167.936-376.832 376.832-376.832 98.304 0 184.32 36.864 253.952 98.304l-266.24 266.24c-4.096 4.096-4.096 8.192-4.096 12.288 0 12.288 8.192 20.48 20.48 20.48l376.832 0C876.544 729.088 712.704 888.832 512 888.832z',
+              onclick: function () {
+                let myChartline = document.getElementById("myCostAnalysis");
+                let myChartpie2 = document.getElementById("myCostAnalysisYuan");
+                myChartline.style.display = "none";
+                myChartpie2.style.display = "block";
+              }
+            },
+            myTool1: {
+              show: true,
+              title: '切换为柱状图',
+              icon: 'path://M163.84 880.64h122.88v-737.28h-122.88v737.28z m-40.96-778.24h204.8v819.2h-204.8v-819.2z m286.72 204.8h204.8v614.4h-204.8v-614.4z m40.96 573.44h122.88v-532.48h-122.88v532.48z m245.76-368.64h204.8v409.6h-204.8v-409.6z m40.96 368.64h122.88v-327.68h-122.88v327.68z',
+              onclick: function () {
+                let myChartline = document.getElementById("myCostAnalysis");
+                let myChartpie2 = document.getElementById("myCostAnalysisYuan");
+                myChartline.style.display = "block";
+                myChartpie2.style.display = "none";
+              }
+            },
+            myLine: {
+              show: true,
+              title: '切换为折线图',
+              icon: 'path://M4.1,28.9h7.1l9.3-22l7.4,38l9.7-19.7l3,12.8h14.9M4.1,58h51.4',
+              onclick: function () {
+                let myChartline = document.getElementById("myCostAnalysis");
+                let myChartpie2 = document.getElementById("myCostAnalysisYuan");
+                myChartline.style.display = "block";
+                myChartpie2.style.display = "none";
+              }
+            },
+            // magicType: { type: ['line',] },
+            // restore: {},
+          }
+        },
         tooltip: {
           trigger: 'item'
         },
@@ -148,6 +570,7 @@ name: "CostAnalysis",
       //   ]
       // };
       myEcharts.setOption(option)// 给生成的echarts实例进行传递配置项option
+      myChartline.style.display = "none";
     }
   },
 }
diff --git a/src/views/statisticanalysis/costecharts/ItemCost.vue b/src/views/statisticanalysis/costecharts/ItemCost.vue
index 1f96842..0b8a0d3 100644
--- a/src/views/statisticanalysis/costecharts/ItemCost.vue
+++ b/src/views/statisticanalysis/costecharts/ItemCost.vue
@@ -1,8 +1,8 @@
 <template>
   <!--  <div>项目成本</div>-->
   <div style="width: 95%;height:100% ;background-color: #ffffff;margin-top: 2%;border-radius: 10px">
-    <div style="height: 20%;margin-left: 6%;padding-top: 5%">
-      <div style="font-size: 25px;margin-bottom: 5px">项目部成本
+    <div style="height: 20%;margin-left: 6%;padding-top: 2%">
+      <div style="font-size: 25px;margin-bottom: 5px;margin-bottom: 2%">项目部成本
        <span style="margin: 0% 4%">  <a-month-picker :disabled-date="disabledDate" placeholder="选择日期" />  </span>
         <j-dict-select-tag type="list" v-model="materialType" style="width: 30%"
                            :trigger-change="true" dictCode="material_type"
@@ -23,7 +23,7 @@
 <!--        <div class="zi">人员工资</div>-->
 <!--      </div>-->
     </div>
-    <div id="myItemCost" style="width: 95%; height: 75%"></div>
+    <div id="myItemCost" style="width: 95%; height: 80%"></div>
   </div>
 
 </template>
@@ -51,6 +51,10 @@ export default {
     this.echartsInit()
   },
   methods:{
+    disabledDate(current) {
+      // Can not select days before today and today
+      return current && current < moment().endOf('day');
+    },
     handleChange(value) {
       console.log(`selected ${value}`);
     },
diff --git a/src/views/statisticanalysis/costecharts/OnDayCost.vue b/src/views/statisticanalysis/costecharts/OnDayCost.vue
index 24224b4..a6a215a 100644
--- a/src/views/statisticanalysis/costecharts/OnDayCost.vue
+++ b/src/views/statisticanalysis/costecharts/OnDayCost.vue
@@ -11,7 +11,7 @@
 <!--        <span style="color: #ffffff">元</span>-->
       </div>
       <div style="height: 80px;margin-top: 5%;">
-        <div class="wen" >￥ 12312.45  </div>
+        <div class="wen" >￥ {{cost}}  </div>
 <!--        <div class="wen">2</div>-->
 
       </div>
@@ -35,6 +35,7 @@
 import * as echarts from 'echarts';
 import ChartCard from '@/components/ChartCard'
 import '@/assets/less/TableExpand.less'
+import { getAction } from '@api/manage'
 
 export default {
 name: "OnDayCost",
@@ -43,13 +44,28 @@ name: "OnDayCost",
   },
   data(){
     return{
+      cost: 0,
+      url: {
+        getConsume: "/hy/processStatistics/getConsume",
 
+      },
     }
   },
+  created(){
+    this.getList();
+  },
   mounted() {
     // this.echartsInit()
   },
   methods:{
+    getList(){
+      getAction(this.url.getConsume).then(res=>{
+        this.cost = res.result;
+        console.log("===",res.result);
+      })
+    },
+
+
     echartsInit() {
       let myEcharts = echarts.init(document.getElementById("myOnDayCost"))
       // this.chartSize(document.getElementById('myOnDayCost'), myEcharts);