Ver código fonte

管理驾驶舱双Y轴等问题

yuhan 1 ano atrás
pai
commit
9d7af57309

+ 6 - 2
src/views/module_kzks/dashboard/Analysis.vue

@@ -32,7 +32,8 @@
       </a-row>
 
       <!-- 第二级模块:折/柱形图 -->
-      <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}" v-if="twoYAxisData">
+      <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
+        <!--  v-if="twoYAxisData" -->
         <div class="salesCard">
           <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
             <div class="extra-wrapper" slot="tabBarExtraContent">
@@ -386,7 +387,7 @@
         },
 
         // 所长选择部门查看:多选
-        selecteddeparts: [], // 用来组件选择的 
+        selecteddeparts: '', // 用来组件选择的 
       }
     },
     computed: {
@@ -766,6 +767,9 @@
     /deep/ .components-input-demo-presuffix .ant-input-affix-wrapper{
       input{
         background: #bbdeff;
+        &::placeholder {
+          color: rgb(97, 97, 97); /* 设置占位符文本的颜色 */
+        }
       }
 
     }

+ 1 - 1
src/views/module_kzks/dashboard/components/deptZbphTable.vue

@@ -4,7 +4,7 @@
     size="middle"
     :scroll="{x:true}"
     bordered
-    rowKey="id"
+    :rowKey="(record,index)=>{return index}"
     :columns="columns"
     :dataSource="dataSource"
     :loading="loading"

+ 25 - 10
src/views/module_kzks/dashboard/components/twoYAxisChart.vue

@@ -4,6 +4,7 @@
 
 <script>
 import * as echarts from 'echarts'
+import { setPriceMax, setNumberMax } from "./twoYEcharts.js";
 export default {
   name: '',
   props: {
@@ -86,7 +87,7 @@ export default {
         tooltip: {
           trigger: 'axis',
           formatter: function (params) {
-            console.log(params)
+            // console.log(params)
             let str = params[0].name + "<br />";
             params.forEach((item) => {
               var unit = item.seriesType === 'line' ? '个' : '万元'
@@ -165,18 +166,29 @@ export default {
       // console.log(this.uEcharts)
       console.log(data)
       var twoYAxisData = data ? data : this.twoYAxisData
-
+      // 模拟数据
+      // var twoYAxisData = {
+      //   contractTotal: [2, 0, 0, 0, 0, 0],
+      //   // contractTotal: [5, 45, 23, 56.7, 78, 9.9],
+      //   contractAmount: [50000, 655265722.63, 25368457, 25369428, 263588, 555542637.1]
+      // }
       console.log(twoYAxisData)
-      var numMax = Math.max(...twoYAxisData.contractTotal)
-      console.log(numMax)
-      var priceMax = Math.max(...twoYAxisData.contractAmount)
+      // var numMax = Math.max(...twoYAxisData.contractTotal)
+      // console.log(numMax)
+      // var priceMax = Math.max(...twoYAxisData.contractAmount)
+      var maxNumber = Math.max.apply(null, twoYAxisData.contractTotal)
+      var maxPrice = Math.max.apply(null, twoYAxisData.contractAmount)
+
       this.uOption.xAxis.data = twoYAxisData.xaxisData
       this.uOption.yAxis = [
         {
           type: 'value',
+          // min: 0,
+          // max: numMax,
+          // interval: Math.ceil(numMax / 6),
           min: 0,
-          max: numMax,
-          interval: Math.ceil(numMax / 6),
+          max: setNumberMax(maxNumber),
+          interval: setNumberMax(maxNumber) / 5,
           axisLabel: {
             // 可以动态设置是数量还是金额
             formatter: '{value} '
@@ -184,9 +196,12 @@ export default {
         },
         {
           type: 'value',
+          // min: 0,
+          // max: priceMax,
+          // interval: Math.ceil(priceMax / 6),
           min: 0,
-          max: priceMax,
-          interval: Math.ceil(priceMax / 6),
+          max: setPriceMax(maxPrice),
+          interval: setPriceMax(maxPrice) / 5,
           axisLabel: {
             // 可以动态设置是数量还是金额
             formatter: function (value, index) {
@@ -207,7 +222,7 @@ export default {
           data: twoYAxisData.contractTotal,
         },
         {
-          name: '合同额',
+          name: '合同额',
           type: 'bar',
           yAxisIndex: 1,
           barWidth: '30%',

+ 60 - 0
src/views/module_kzks/dashboard/components/twoYEcharts.js

@@ -0,0 +1,60 @@
+// 取合同金额最大值
+const setPriceMax = (num) => {
+  console.log(num)
+  // 1.判断是否小数:  //判断是否含有小数点:要检索的字符串值没有出现,则该方法返回 -1。
+  if (num.toString().indexOf(".") != -1) {//有小数点
+    num = Math.ceil(num);//向上取整 
+  }
+  // 2.向上取整数倍
+  if (num.toString().length < 2) {
+    // 一位数1
+    num = 10;
+  } else if (num.toString().length < 3) {
+    // 2位数
+    num = Math.ceil(num / 5) * 5;// 变成最近的5的倍数
+  } else {
+    // 位数--先判断是不是1000...的倍数
+    var t = '';
+    for (let i = 0; i < num.toString().length - 1; i++) {
+      t += '0';//'0000...'
+    }
+    if ((num % Number(1 + t)) != 0) {//不是100的倍数
+      num = (Number(num.toString().substr(0, 1)) + 1) * Number(1 + t);
+    }
+  }
+  return num
+}
+// 取合同数量最大值
+const setNumberMax = (num) => {
+  console.log(num)
+  // 1.判断是否小数:  //判断是否含有小数点:要检索的字符串值没有出现,则该方法返回 -1。
+  if (num.toString().indexOf(".") != -1) {//有小数点
+    num = Math.ceil(num);//向上取整 
+  }
+  // 2.向上取整数倍
+  // if (num.toString().length < 2) {
+  //   // 一位数1
+  //   num = num;
+  // } else 
+  if (num.toString().length < 3) {
+    // 2位数
+    num = Math.ceil(num / 5) * 5;// 变成最近的5的倍数
+  } else {
+    // 位数--先判断是不是1000...的倍数
+    var t = '';
+    for (let i = 0; i < num.toString().length - 1; i++) {
+      t += '0';//'0000...'
+    }
+    if ((num % Number(1 + t)) != 0) {//不是100的倍数
+      num = (Number(num.toString().substr(0, 1)) + 1) * Number(1 + t);
+    }
+  }
+  return num
+}
+
+export { setPriceMax, setNumberMax }
+
+// export function xxx (){
+//   xxx
+//   return xxx
+// }