首页等

src/api/kzksApi.js

@@ -30,6 +30,13 @@ const getModalIdList = (params)=>getAction("/costModelList/costModelList/queryBy
 // 成本模型知会
 const costModelInform = (params)=>postAction("/costModelList/costModelList/inform", params);
 
+// 首页/报表/驾驶舱
+const getZhibiaoCollect = (params)=>getAction("/index/getCollect", params);
+const getdataByHt = (params)=>postAction("/index/getContractAmountInfo", params);
+const getdataByChb = (params)=>getAction("/index/getEightCost", params);
+const getdataByLr = (params)=>getAction("/index/countLreByDate", params);
+const getdataBySk = (params)=>getAction("/index/countTotalReceivedByDate", params);
+
 
 export {
   columnsSelect,
@@ -41,7 +48,12 @@ export {
   getHjList,
   getDbClList,
   costModelInform,
-  getModalIdList
+  getModalIdList,
+  getZhibiaoCollect,
+  getdataByHt,
+  getdataByLr,
+  getdataByChb,
+  getdataBySk,
 }
 
 

src/views/dashboard/Analysis.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <!-- <index-chart v-if="indexStyle==1"></index-chart>
+    <index-chart v-if="indexStyle==1"></index-chart>
     <index-bdc v-if="indexStyle==2"></index-bdc>
     <index-task v-if="indexStyle==3"></index-task>
     <div style="width: 100%;text-align: right;margin-top: 20px">
@@ -10,8 +10,8 @@
         <a-radio :value="2">统计图表2</a-radio>
         <a-radio :value="3">任务表格</a-radio>
       </a-radio-group>
-    </div> -->
-    <a-empty :description="false" style="height: 210px;margin-top: 200px;"/>
+    </div>
+    <!-- <a-empty :description="false" style="height: 210px;margin-top: 200px;"/> -->
   </div>
 </template>
 

src/views/module_kzks/costModelList/CostModelList.vue

@@ -114,9 +114,9 @@
           <a-dropdown>
             <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
             <a-menu slot="overlay">
-              <a-menu-item>
+              <!-- <a-menu-item>
                 <a @click="handleDetail(record)">详情</a>
-              </a-menu-item>
+              </a-menu-item> -->
               <a-menu-item>
                 <a @click="handleInform(record)">知会</a>
               </a-menu-item>

src/views/module_kzks/costModelWxRepeat/CostModelWxRepeatList.vue

@@ -52,7 +52,7 @@
         <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
       </a-dropdown>
     </div> -->
-    <span>※上一次导入的文件中存在外协项目、外协单位、计量单位相同，但价格不同的项，请选择需要保留的项※</span>
+    <span style="color: #ffa11e;margin-bottom: 12px;">※上一次导入的文件中存在外协项目、外协单位、计量单位相同，但价格不同的项，请选择需要保留的项※</span>
     <!-- table区域-begin -->
     <div>
       <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
@@ -245,4 +245,4 @@
 </script>
 <style scoped>
   @import '~@assets/less/common.less';
-</style>
+</style>

src/views/module_kzks/costModelWxRepeat/modules/CostModelWxRepeatModal.vue

@@ -7,7 +7,8 @@
     @ok="handleOk"
     :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
     @cancel="handleCancel"
-    cancelText="关闭">
+    cancelText="关闭"
+    style="padding: 0;">
     <cost-model-wx-repeat-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit"></cost-model-wx-repeat-form>
   </j-modal>
 </template>
@@ -57,4 +58,9 @@
       }
     }
   }
-</script>
+</script>
+<style>
+.ant-modal-body{
+
+}
+</style>

src/views/module_kzks/dataBI/components/lineBarChart.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="lineBarCharts" ref="lineBarCharts" />
+</template>
+
+<script>
+import * as echarts from 'echarts'
+export default {
+  name: '',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    xAxisData: {
+      type: Array,
+      default: []
+    },
+    seriesData: {
+      type: Array,
+      default: []
+    }
+  },
+  data () {
+    return {
+      uEcharts: null,
+      uOption: null,
+
+    }
+  },
+  watch: {
+    seriesData: {
+      handler(newValue, oldValue){
+        console.log(newValue, oldValue)
+        if(newValue){
+          this.setSeriesData(newValue)
+        }
+      },
+      deep: true,
+      // immediate: true
+    }
+  },
+  created () {
+  },
+  mounted () {
+    this.$nextTick(() => {
+      this.initChart()
+      this.setSeriesData()
+    })
+  },
+  methods: {
+    initChart(){
+      this.uEcharts = echarts.init(this.$refs.lineBarCharts)
+
+      let color = ['#42CEAF', '#FF882A', '#16B4FE', '#747AFE','#f9c129', '#13c2c2', '#79ce42', '#f55837'];
+      // fc8452  
+      this.uOption = {
+        // title: {
+        //   text: this.title + '图',
+        //   left: 'center'
+        // },
+        color: color,
+        tooltip: {
+          trigger: 'axis'
+        },
+        grid: {
+          left: '5%',
+          right: '5%',
+          bottom: '10%'
+        },
+        legend: {
+          type: 'scroll',
+          width: '60%',
+          // orient: 'vertical',
+          // right: 90,
+          // left: 20,
+          top: 0,
+          // bottom: 20,
+          // selectedMode: 'single',
+          padding: [
+              5,  // 上
+              150, // 右
+              0,  // 下
+              20, // 左
+          ],
+        },
+        toolbox: {
+          show: true,
+          feature: {
+            // dataView: { readOnly: false }, // 展示数据--不过没用
+            magicType: { type: ['bar', 'line'] },
+            // restore: {}, // 还原
+            saveAsImage: {}
+          }
+        },
+        // dataZoom: [
+        //   {
+        //     startValue: '2023-02-01'
+        //   },
+        //   {
+        //     type: 'inside'
+        //   }
+        // ],
+        xAxis: {
+          type: 'category',
+          // boundaryGap: true, // 解决数据溢出X轴的问题
+          data: this.xAxisData
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {
+            // 可以动态设置是数量还是金额
+            formatter: '{value} '
+          }
+        },
+        series: [
+          // {
+          //   name: 'Highest',
+          //   type: 'line',
+          //   data: [10, 11, 13, 11, 12, 12, 9],
+          //   markPoint: {
+          //     data: [
+          //       { type: 'max', name: 'Max' },
+          //       { type: 'min', name: 'Min' }
+          //     ]
+          //   },
+          //   // markLine: {
+          //   //   data: [{ type: 'average', name: 'Avg' }]
+          //   // }
+          // },
+        ]
+      };
+
+      this.uOption && this.uEcharts.setOption(this.uOption);
+      window.addEventListener('resize', ()=>{
+        this.uEcharts.resize()
+      })
+    },
+    setSeriesData(data){
+      // console.log(this.uEcharts)
+      var seriesData = data ? data : this.seriesData
+      // console.log(seriesData)
+      // var option = this.uOption
+      this.uOption.xAxis.data = this.xAxisData
+      this.uOption.series = seriesData.map(res => {
+        return {
+          name: res.name,
+          type: 'bar',
+          smooth: true,
+          data: res.data,
+        }
+      })
+      console.log(this.uOption.series)
+      this.uEcharts.setOption(this.uOption, true)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.lineBarCharts{
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/module_kzks/dataBI/components/pieContentChart.vue

@@ -0,0 +1,247 @@
+<template>
+  <div class="pieContentChart" ref="pieContentChart" />
+</template>
+
+<script>
+import * as echarts from 'echarts'
+export default {
+  name: '',
+  props: {
+    // title: {
+    //   type: String,
+    //   default: ''
+    // },
+    // yAxisNames: {
+    //   type: Array,
+    //   default: []
+    // },
+    // yAxisNumbers: {
+    //   type: Array,
+    //   default: []
+    // },
+    // seriesData: {
+    //   type: Array,
+    //   default: []
+    // }
+  },
+  data () {
+    return {
+      uEcharts: null,
+      uOption: null,
+      pieContentData: [
+        {
+            name: "材料费",
+            value: 411,
+            unit: '万元'
+        },
+        {
+            name: "外协费",
+            value: 417,
+            unit: '万元'
+        },
+        {
+            name: "事务费",
+            value: 221,
+            unit: '万元'
+        },
+        {
+            name: "专用费",
+            value: 121,
+            unit: '万元'
+        },
+        {
+            name: "人工费",
+            value: 127,
+            unit: '万元'
+        },
+      ]
+    }
+  },
+  watch: {
+    seriesData: {
+      handler(newValue, oldValue){
+        console.log(newValue, oldValue)
+        if(newValue){
+          this.setSeriesData()
+        }
+      },
+      immediate: true
+    }
+  },
+  created () {
+  },
+  mounted () {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  methods: {
+    initChart(){
+      var _this = this
+      this.uEcharts = echarts.init(this.$refs.pieContentChart)
+      
+      let dashedPic = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM8AAAAOBAMAAAB6G1V9AAAAD1BMVEX////Kysrk5OTj4+TJycoJ0iFPAAAAG0lEQVQ4y2MYBaNgGAMTQQVFOiABhlEwCugOAMqzCykGOeENAAAAAElFTkSuQmCC';
+      let color = ['#42CEAF', '#FF882A', '#16B4FE', '#747AFE'];
+      let arrName = [];
+      let arrValue = [];
+      let sum = 0;
+      let pieSeries = [],
+          lineYAxis = [];
+
+      // 数据处理
+      this.pieContentData.forEach((v, i) => {
+          arrName.push(v.name);
+          arrValue.push(v.value);
+          sum = sum + v.value;
+      })
+
+      // 图表option整理
+      this.pieContentData.forEach((v, i) => {
+          pieSeries.push({
+              name: '学历',
+              type: 'pie',
+              clockWise: false,
+              hoverAnimation: false,
+              radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],
+              center: ["35%", "50%"],
+              label: {
+                  show: false
+              },
+              data: [{
+                  value: v.value,
+                  name: v.name
+              }, {
+                  value: sum - v.value,
+                  name: '',
+                  itemStyle: {
+                      color: "rgba(0,0,0,0)"
+                  }
+              }]
+          });
+          pieSeries.push({
+              name: '',
+              type: 'pie',
+              silent: true,
+              z: 1,
+              clockWise: false, //顺时加载
+              hoverAnimation: false, //鼠标移入变大
+              radius: [65 - i * 15 + '%',57 - i * 15 + '%'],
+              center: ["35%", "50%"],
+              label: {
+                  show: false
+              },
+              data: [{
+                  value: 7.5,
+                  itemStyle: {
+                      color: "#E3F0FF"
+                  }
+              }, {
+                  value: 2.5,
+                  name: '',
+                  itemStyle: {
+                      color: "rgba(0,0,0,0)"
+                  }
+              }]
+          });
+          v.percent = (v.value / sum * 100).toFixed(1) + "%";
+          lineYAxis.push({
+              value: i,
+              textStyle: {
+                  rich: {
+                      circle: {
+                          color: color[i],
+                          padding: [0, 5]
+                      }
+                  }
+              }
+          });
+      })
+      // 配置参数
+      this.uOption = {
+        color: color,
+        grid: {
+          top: '15%',
+          bottom: '55%',
+          left: "30%",
+          containLabel: false
+        },
+        yAxis: [{
+          type: 'category',
+          inverse: true,
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            formatter: function(params) {
+                let item = _this.pieContentData[params];
+                console.log(item)
+                return '{line|}{circle|●}{name|'+ item.name +'}{bd||}{percent|'+item.percent+'}{value|'+ item.value+'}{unit|元}'
+            },
+            interval: 0,
+            inside: true,
+            textStyle: {
+              color: "#333",
+              fontSize: 14,
+              rich: {
+                line: {
+                    width: 40,
+                    height: 10,
+                    backgroundColor: {image: dashedPic}
+                },
+                name: {
+                    color: '#666',
+                    fontSize: 14,
+                },
+                bd: {
+                    color: '#ccc',
+                    padding: [0, 5],
+                    fontSize: 14,
+                },
+                percent:{
+                    color: '#333',
+                    fontSize: 14,
+                },
+                value: {
+                    color: '#333',
+                    fontSize: 12,
+                    fontWeight: 500,
+                    padding: [0, 0, 0, 10]
+                },
+                unit: {
+                    fontSize: 14
+                }
+              }
+            },
+            show: true
+          },
+          data: lineYAxis
+        }],
+        xAxis: [{
+          show: false
+        }],
+        series: pieSeries
+      }
+
+      // 使用刚指定的配置项和数据显示图表
+      this.uOption && this.uEcharts.setOption(this.uOption);
+      window.addEventListener('resize', ()=>{
+        this.uEcharts.resize()
+      })
+    },
+    setSeriesData(){
+      console.log()
+      console.log(this.uEcharts)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.pieContentChart{
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/module_kzks/dataBI/components/rankingChart.vue

@@ -0,0 +1,219 @@
+<template>
+  <div class="rankingCharts" ref="rankingCharts" />
+</template>
+
+<script>
+import * as echarts from 'echarts'
+export default {
+  name: '',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    yAxisNames: {
+      type: Array,
+      default: []
+    },
+    yAxisNumbers: {
+      type: Array,
+      default: []
+    },
+    seriesData: {
+      type: Array,
+      default: []
+    }
+  },
+  data () {
+    return {
+      uEcharts: null,
+      uOption: null,
+    }
+  },
+  watch: {
+    seriesData: {
+      handler(newValue, oldValue){
+        console.log(newValue, oldValue)
+        if(newValue){
+          this.setSeriesData()
+        }
+      },
+      immediate: true
+    }
+  },
+  created () {
+  },
+  mounted () {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  methods: {
+    initChart(){
+      this.uEcharts = echarts.init(this.$refs.rankingCharts)
+
+      this.uOption = {
+        grid: {
+          left: "2%",
+          right: "2%",
+          bottom: "0",
+          top: "2%",
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "none",
+          },
+          formatter: function (params) {
+            return (
+              params[0].name +
+              "<br/>" +
+              "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
+              params[0].seriesName +
+              " : " +
+              Number(
+                (params[0].value.toFixed(4) / 10000).toFixed(2)
+              ).toLocaleString() +
+              " 次<br/>"
+            );
+          },
+        },
+        // dataZoom: [
+        //     {
+        //         type: "inside",
+        //         startValue: 0, 
+        //         endValue: 2, 
+        //         minValueSpan: 2,  
+        //         maxValueSpan: 2,  
+        //         yAxisIndex: [0],
+        //       zoomOnMouseWheel: false,  // 关闭滚轮缩放
+        //       moveOnMouseWheel: true, // 开启滚轮平移
+        //       moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移 
+        //     },
+        //     {
+        //       type: 'slider',
+        //       realtime: true,
+        //       startValue: 0, 
+        //       endValue: 2,  
+        //       width:  '3.5',
+        //       height:  '80%',
+        //       yAxisIndex: [0], // 控制y轴滚动
+        //       fillerColor: "rgba(154, 181, 215, 1)", // 滚动条颜色
+        //       borderColor: "rgba(17, 100, 210, 0.12)", 
+        //       backgroundColor: '#cfcfcf',//两边未选中的滑动条区域的颜色
+        //       handleSize:0, // 两边手柄尺寸
+        //       showDataShadow: false,//是否显示数据阴影 默认auto
+        //       showDetail: false, // 拖拽时是否展示滚动条两侧的文字
+        //       top:'1%',
+        //       right:'5',
+        //   }
+          
+        // ],
+        xAxis: {
+          show: false,
+          type: "value",
+        },
+        yAxis: [
+          {
+            type: "category",
+            inverse: true,
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: "#333",
+              },
+            },
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            data: this.yAxisNames,
+          },
+          {
+            type: "category",
+            inverse: true,
+            axisTick: "none",
+            axisLine: "none",
+            show: true,
+            axisLabel: {
+              textStyle: {
+                color: "#333",
+                fontSize: "12",
+              },
+              formatter: function (value) {
+                if (value >= 10000) {
+                  return (value / 10000).toLocaleString() + "次";
+                } else {
+                  return value.toLocaleString();
+                }
+              },
+            },
+            data: this.yAxisNumbers,
+          },
+        ],
+        series: [
+          {
+            name: "火情",
+            type: "bar",
+            zlevel: 1,
+            itemStyle: {
+              normal: {
+                barBorderRadius: 30,
+                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                  {
+                    offset: 0,
+                    color: "rgb(92,141,253,1)",
+                    // color: "rgb(57,89,255,1)",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgb(50,189,209,1)",
+                    // color: "rgb(46,200,207,1)",
+                  },
+                ]),
+              },
+            },
+            barWidth: 20,
+            data: this.seriesData,
+          },
+          {
+            name: "背景",
+            type: "bar",
+            barWidth: 20,
+            barGap: "-100%",
+            data: [50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
+            itemStyle: {
+              normal: {
+                color: "#eee",
+                barBorderRadius: 30,
+              },
+            },
+          },
+        ],
+      };
+
+      this.uOption && this.uEcharts.setOption(this.uOption);
+      window.addEventListener('resize', ()=>{
+        this.uEcharts.resize()
+      })
+    },
+    setSeriesData(){
+      console.log()
+      console.log(this.uEcharts)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.rankingCharts{
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/module_kzks/dataBI/components/twoYAxisChart.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="lineBarCharts" ref="lineBarCharts" />
+</template>
+
+<script>
+import * as echarts from 'echarts'
+export default {
+  name: '',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    xAxisData: {
+      type: Array,
+      default: []
+    },
+    seriesData: {
+      type: Array,
+      default: []
+    }
+  },
+  data () {
+    return {
+      uEcharts: null,
+      uOption: null,
+
+    }
+  },
+  watch: {
+    seriesData: {
+      handler(newValue, oldValue){
+        console.log(newValue, oldValue)
+        if(newValue){
+          this.setSeriesData(newValue)
+        }
+      },
+      // immediate: true
+    }
+  },
+  created () {
+  },
+  mounted () {
+    this.$nextTick(() => {
+      this.initChart()
+      this.setSeriesData()
+    })
+  },
+  methods: {
+    initChart(){
+      this.uEcharts = echarts.init(this.$refs.lineBarCharts)
+
+      let color = ['#42CEAF', '#1890ff', '#16B4FE', '#747AFE'];
+      this.uOption = {
+        // title: {
+        //   text: this.title + '图',
+        //   left: 'center'
+        // },
+        color: color,
+        tooltip: {
+          trigger: 'axis'
+        },
+        grid: {
+          left: '5%',
+          right: '5%',
+          bottom: '10%'
+        },
+        legend: {
+          type: 'scroll',
+          width: '60%',
+          // orient: 'vertical',
+          // right: 90,
+          // left: 20,
+          top: 0,
+          // bottom: 20,
+          // selectedMode: 'single',
+          padding: [
+              5,  // 上
+              150, // 右
+              0,  // 下
+              20, // 左
+          ],
+        },
+        toolbox: {
+          show: true,
+          feature: {
+            // dataView: { readOnly: false }, // 展示数据--不过没用
+            // magicType: { type: ['bar', 'line'] },
+            // restore: {}, // 还原
+            saveAsImage: {}
+          }
+        },
+        // dataZoom: [
+        //   {
+        //     startValue: '2023-02-01'
+        //   },
+        //   {
+        //     type: 'inside'
+        //   }
+        // ],
+        xAxis: {
+          type: 'category',
+          // boundaryGap: true, // 解决数据溢出X轴的问题
+          data: this.xAxisData
+        },
+        yAxis: [
+          {
+            type: 'value',
+            axisLabel: {
+              // 可以动态设置是数量还是金额
+              formatter: '{value} '
+            }
+          },
+          {
+            type: 'value',
+            axisLabel: {
+              // 可以动态设置是数量还是金额
+              formatter: '{value} '
+            }
+          },
+        ],
+        series: [
+          // {
+          //   name: '合同数量',
+          //   type: 'line',
+          //   yAxisIndex: 0,
+          //   data: [50, 31, 53, 51, 42, 48, 59]
+          // },
+          // {
+          //   name: '合同金额',
+          //   type: 'bar',
+          //   yAxisIndex: 1,
+          //   barWidth: '30%',
+          //   data: [500, 310, 530, 510, 420, 480, 590]
+          // },
+        ]
+      };
+
+      this.uOption && this.uEcharts.setOption(this.uOption);
+      window.addEventListener('resize', ()=>{
+        this.uEcharts.resize()
+      })
+    },
+    setSeriesData(data){
+      // console.log(this.uEcharts)
+      var seriesData = data ? data : this.seriesData
+      // console.log(seriesData)
+      // var option = this.uOption
+      this.uOption.series = seriesData.map((res, index) => {
+        return {
+          name: res.name,
+          type: res.type,
+          yAxisIndex: index,
+          data: res.data,
+        }
+      })
+      console.log(this.uOption)
+      this.uEcharts.setOption(this.uOption, true)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.lineBarCharts{
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/module_kzks/dataBI/index.vue

@@ -0,0 +1,507 @@
+<template>
+  <div class="page-header-index-wide">
+    <a-row :gutter="24">
+      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px', cursor: 'pointer' }" v-for="(item, index) in zhibiaoTotal" :key="index" @click="clickItemTotal(item, index)">
+        <chart-card :loading="loading" :title="item.title+'(元) / 当月'" :total="(item.monthTotal).toString()">
+          <a-tooltip :title="`点击查看${item.title}明细`" slot="action">
+            <a-icon type="info-circle-o" />
+          </a-tooltip>
+          <div>
+            <trend flag="up" style="margin-right: 16px;">
+              <span slot="term">月同比</span>
+              {{Number(item.monthTb)*100}}%
+            </trend>
+            <trend flag="down">
+              <span slot="term">月环比</span>
+              {{Number(item.monthHb)*100}}%
+            </trend>
+          </div>
+          <template slot="footer">年{{item.title}}<span> {{item.yearTotal}}0</span>
+            <trend flag="up" style="float: right;">
+              <span slot="term">同比</span>
+              {{Number(item.yearTb)*100}}%
+            </trend>
+          </template>
+        </chart-card>
+      </a-col>
+      
+    </a-row>
+
+    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
+      <div class="salesCard">
+        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
+          <div class="extra-wrapper" slot="tabBarExtraContent">
+            <div class="extra-item">
+              <a-button :type=searchTypeMonth @click="searchTypeChange('month')">按月查询</a-button>
+              <a-button :type="searchTypeYear" @click="searchTypeChange('year')">按年查询</a-button>
+            </div>
+            <!-- <a-range-picker :style="{width: '256px'}" /> -->
+            <a-range-picker
+              :placeholder="searchPlaceholder"
+              :format="searchFormat"
+              :mode="searchMode"
+              :value="dateValue"
+              @panelChange="handlePanelChange"
+              @openChange="handleChange"
+            >
+              <template slot="renderExtraFooter">
+                extra footer
+              </template>
+            </a-range-picker>
+          </div>
+          <a-tab-pane loading="true" :tab="chartTitle+'图表'" key="1">
+            <a-row>
+              <a-col :xl="16" :lg="16" :md="16" :sm="24" :xs="24">
+                <!-- <bar title="销售额排行" :dataSource="barData"/> -->
+                <twoYAxisChart v-if="chooseValue === 'hte'"  :xAxisData="twoYAxisXAxisData" :seriesData="twoYAxisSeriesData" :title="chartTitle"
+                style="height: 360px;"
+                class="line-timePrice common-layout"></twoYAxisChart>
+                <lineBarChart v-else :xAxisData="lineBarXAxisData" :seriesData="lineBarSeriesData" :title="chartTitle" 
+                style="height: 360px;"
+                class="line-timePrice common-layout"></lineBarChart>
+              </a-col>
+              <a-col :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
+                <rank-list title="详情" :list="rankList"/>
+                <!-- <pieContentChart style="height: 360px;"></pieContentChart> -->
+              </a-col>
+            </a-row>
+          </a-tab-pane>
+          <!-- <a-tab-pane tab="销售趋势" key="2">
+            <a-row>
+              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
+                <bar title="销售额趋势" :dataSource="barData"/>
+              </a-col>
+              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
+                <rank-list title="门店销售排行榜" :list="rankList"/>
+              </a-col>
+            </a-row>
+          </a-tab-pane> -->
+        </a-tabs>
+      </div>
+    </a-card>
+    
+    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}" :style="{ marginTop: '24px' }">
+      <div class="salesCard">
+        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
+          <div class="extra-wrapper" slot="tabBarExtraContent">
+            <div class="extra-item">
+              <a>本月</a>
+              <a>本季</a>
+              <a>本年</a>
+            </div>
+            <a-range-picker :style="{width: '256px'}" />
+          </div>
+          <a-tab-pane loading="true" :tab="'部门'+chartTitle+'排行'" key="1">
+            <a-row :gutter="24">
+              <a-col :xl="6" :lg="12" :md="12" :sm="24" :xs="24">
+                <rankingChart :title="chartTitle" :seriesData="rankingSeriesData" :yAxisNames="rankingYAxisNames" :yAxisNumbers="yAxisNumbers" style="height: 360px;"></rankingChart>
+              </a-col>
+              <a-col :xl="18" :lg="12" :md="12" :sm="24" :xs="24">
+                <a-table
+                  ref="table"
+                  size="middle"
+                  :scroll="{x:true}"
+                  bordered
+                  rowKey="id"
+                  :columns="columns"
+                  :dataSource="dataSource"
+                  :pagination="ipagination"
+                  :loading="loading"
+                  class="j-table-force-nowrap"
+                  >
+                  <!-- :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" -->
+                  <!-- @change="handleTableChange" -->
+                </a-table>
+              </a-col>
+            </a-row>
+          </a-tab-pane>
+        </a-tabs>
+      </div>
+    </a-card>
+
+
+  </div>
+</template>
+
+<script>
+  import moment from 'moment'
+  import { getZhibiaoCollect, getdataByHt, getdataBySk,  getdataByChb, getdataByLr, } from '@/api/kzksApi'
+
+  import ChartCard from '@/components/ChartCard'
+  import RankList from '@/components/chart/RankList'
+  import Trend from '@/components/Trend'
+
+  import lineBarChart from './components/lineBarChart.vue'
+  import rankingChart from './components/rankingChart.vue'
+  import pieContentChart from './components/pieContentChart.vue'
+  import twoYAxisChart from './components/twoYAxisChart.vue'
+
+  import { getLoginfo,getVisitInfo } from '@/api/api'
+
+  const rankList = []
+  for (let i = 0; i < 7; i++) {
+    rankList.push({
+      name: '费用 ' + (i+1) + '5%',
+      total: 1234.56 - i * 100
+    })
+  }
+  export default {
+    name: "IndexChart",
+    components: {
+      ChartCard,
+      Trend,
+      RankList,
+
+      lineBarChart,
+      rankingChart,
+      pieContentChart,
+      twoYAxisChart,
+    },
+    data() {
+      return {
+        loading: true,
+        rankList,
+        loginfo:{},
+        visitInfo:[],
+
+        // 顶部n项指标
+        zhibiaoTotal: [
+          // {
+          //   value: 'hte',
+          //   title: '合同数量',
+          //   totalMoney: '53',
+          //   lineBarSeriesData: [
+          //     {
+          //       name: '合同数量',
+          //       data: [32, 22, 21, 45, 23, 32, 34],
+          //     },
+          //   ],
+          // },
+          {
+            value: 'hte',
+            hdValue: 'hte',
+            title: '合同额',
+            data: {},
+          },
+          {
+            value: 'ske',
+            hdValue: 'ske',
+            title: '收款额',
+            data: {},
+          },
+          {
+            value: 'chb',
+            hdValue: 'zce',
+            title: '成本额',
+            data: {},
+          },
+          {
+            value: 'lre',
+            hdValue: 'lre',
+            title: '利润额',
+            data: {},
+          },
+        ],
+
+
+        // 日期区间选择模块
+        searchPlaceholder: ['开始月份', '结束月份'],
+        searchTypeMonth: 'primary', // 按月查询按钮
+        searchTypeYear: 'link', // 按年查询按钮
+        searchFormat: 'YYYY-MM', // 日期区间选择器format（页面数据显示格式）
+        dateValue: [null, null], // 日期区间选择器format（页面显示的数据）
+        searchMode: ['month', 'month'], // 日期区间选择器mode（选择器形式）
+        // 日期区间选择传参数据
+        searchParams: {
+          time: '',
+          beginDate: null,
+          endDate: null,
+        },
+
+        // 选择指标
+        chooseValue: 'hte',
+        chartTitle: '成本',
+
+        // 折线柱形总览图
+        lineBarXAxisData: [],
+        lineBarSeriesData: [],
+        // 排行
+        rankingSeriesData: [50, 42, 26, 20, 15, 14, 12, 8, 5, 1],
+        rankingYAxisNames: ["部门06", "部门01", "部门05", "部门10", "部门07", "部门04", "部门03", "部门08", "部门09", "部门02"],
+        yAxisNumbers: [50, 42, 26, 23, 15, 14, 12, 8, 5, 1],
+
+
+        // 双y轴总览图
+        twoYAxisXAxisData: [],
+        twoYAxisSeriesData: [],
+        // 排行
+
+
+        columns: [
+          {
+            title: '序号',
+            dataIndex: '',
+            key:'rowIndex',
+            width:60,
+            align:"center",
+            customRender:function (t,r,index) {
+              return parseInt(index)+1;
+            }
+          },
+          {
+            title:'部门',
+            align:"center",
+            dataIndex: 'wlbm'
+          },
+          {
+            title:'已收款',
+            align:"center",
+            dataIndex: 'ggxh'
+          },
+          {
+            title:'成本',
+            align:"center",
+            dataIndex: 'zlLevel'
+          },
+          {
+            title:'利润',
+            align:"center",
+            dataIndex: 'pici'
+          },
+          // {
+          //   title:'利润率',
+          //   align:"center",
+          //   dataIndex: 'pici'
+          // },
+          {
+            title:'合同数量',
+            align:"center",
+            dataIndex: 'danjia'
+          },
+          {
+            title:'合同金额',
+            align:"center",
+            dataIndex: 'htDate'
+          },
+        ],
+        dataSource: [],
+        ipagination: {},
+
+      }
+    },
+    created() {
+      this.initLogInfo();
+      this.getZhibiaoCollect()
+      this.setNowDate()
+    },
+    methods: {
+      getZhibiaoCollect(){
+        this.loading = true
+        getZhibiaoCollect().then(res => {
+          console.log(res)
+          if (res.success) {
+            var arr = []
+            for (let i = 0; i < this.zhibiaoTotal.length; i++) {
+              const element = this.zhibiaoTotal[i];
+              // element.data = res.result[element.hdValue]
+              arr[i] = {...element, ...res.result[element.hdValue]}
+            }
+            this.zhibiaoTotal = arr
+            this.loading = false
+          }else{
+            this.$message.warning(res.message)
+            this.loading = false
+          }
+        }).finally(() => {
+          this.loading = false
+        })
+      },
+      setNowDate(){
+        const now = new Date()
+        const year = now.getFullYear(); // 年
+        const month = now.getMonth() + 1; // 月
+        const beginDate = `${year}-01`
+        const endDate = `${year}-${month}`
+        this.dateValue = [beginDate, endDate]
+        this.searchParams = {
+          time: 'month',
+          beginDate: beginDate,
+          endDate: endDate,
+        }
+        this.getDataByDate()
+      },
+      // 点击指标转换下方数据
+      clickItemTotal(item, index){
+        console.log(item, index)
+        this.chooseValue = item.value
+        this.chartTitle = item.value === 'hte' ? '合同' : item.title
+        // this.lineBarSeriesData = item.lineBarSeriesData
+        console.log(this.dateValue)
+        this.getDataByDate()
+      },
+      // 获取时间变化图表数据
+      getDataByDate(){
+        switch (this.chooseValue) {
+          case 'hte':
+            getdataByHt(this.searchParams).then(res => {
+              console.log(res)
+              if (res.success) {
+                this.twoYAxisXAxisData = res.result.xaxisData
+                this.twoYAxisSeriesData = [
+                  {
+                    name: '合同数量',
+                    type: 'line',
+                    data: res.result.contractTotal,
+                  },
+                  {
+                    name: '合同额',
+                    type: 'bar',
+                    barWidth: '30%',
+                    data: res.result.contractAmount,
+                  }
+                ]
+              }else{
+                this.$message.warning(res.message)
+              }
+            }).finally(() => {
+              // this.loading = false
+            })
+            break;
+          case 'lre':
+            getdataByLr(this.searchParams).then(res => {
+              console.log(res)
+              if (res.success) {
+                this.lineBarXAxisData = res.result.xaxisData
+                this.lineBarSeriesData = [
+                  {
+                    name: '利润额',
+                    data: res.result.seriesData,
+                  }
+                ]
+              }else{
+                this.$message.warning(res.message)
+              }
+            }).finally(() => {
+              // this.loading = false
+            })
+            break;
+          case 'chb':
+            getdataByChb(this.searchParams).then(res => {
+              console.log(res)
+              if(res){
+                this.lineBarXAxisData = res[0].xaxisData
+                this.lineBarSeriesData = [
+                  {
+                    name: '成本额',
+                    data: res[0].seriesData,
+                  }
+                ]
+              }
+            }).finally(() => {
+              // this.loading = false
+            })
+            break;
+          default:
+            break;
+        }
+      },
+      // 查询类型选择：按年、按月
+      searchTypeChange(type){
+        this.searchTypeMonth = type === 'month' ? 'primary' : 'link'
+        this.searchTypeYear = type === 'year' ? 'primary' : 'link'
+        this.searchFormat = type === 'month' ? 'YYYY-MM' : 'YYYY'
+        this.searchPlaceholder = type === 'month' ? ['开始月份', '结束月份'] : ['开始年份', '结束年份']
+        this.searchMode = [type, type]
+      },
+      handlePanelChange(value, mode) {
+        // console.log(value, this.searchMode)
+        // console.log(moment(value[0]).format('YYYY-MM'))
+        this.dateValue = value;
+        if(this.searchMode[0] === 'month'){
+          this.searchParams = {
+            time: 'month',
+            beginDate: moment(value[0]).format('YYYY-MM'),
+            endDate: moment(value[1]).format('YYYY-MM'),
+          }
+        }
+        if(this.searchMode[0] === 'year'){
+          this.searchParams = {
+            time: 'year',
+            beginDate: moment(value[0]).format('YYYY'),
+            endDate: moment(value[1]).format('YYYY'),
+          }
+        }
+        // this.modeMonth = [mode[0] === 'date' ? 'month' : mode[0], mode[1] === 'date' ? 'month' : mode[1]];
+      },
+      handleChange(status){
+        console.log(status)
+      },
+      initLogInfo () {
+        getLoginfo(null).then((res)=>{
+          if(res.success){
+            Object.keys(res.result).forEach(key=>{
+              res.result[key] =res.result[key]+""
+            })
+            this.loginfo = res.result;
+          }
+        })
+        getVisitInfo().then(res=>{
+          if(res.success){
+             this.visitInfo = res.result;
+           }
+         })
+      },
+
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  .circle-cust{
+    position: relative;
+    top: 28px;
+    left: -100%;
+  }
+  .extra-wrapper {
+    line-height: 55px;
+    padding-right: 24px;
+
+    .extra-item {
+      display: inline-block;
+      margin-right: 24px;
+
+      a {
+        margin-left: 24px;
+      }
+    }
+  }
+
+  /* 首页访问量统计 */
+  .head-info {
+    position: relative;
+    text-align: left;
+    padding: 0 32px 0 0;
+    min-width: 125px;
+
+    &.center {
+      text-align: center;
+      padding: 0 32px;
+    }
+
+    span {
+      color: rgba(0, 0, 0, .45);
+      display: inline-block;
+      font-size: .95rem;
+      line-height: 42px;
+      margin-bottom: 4px;
+    }
+    p {
+      line-height: 42px;
+      margin: 0;
+      a {
+        font-weight: 600;
+        font-size: 1rem;
+      }
+    }
+  }
+</style>