数据大屏修改

src/filters/filter.js

@@ -64,7 +64,7 @@ Vue.filter('timewd', function (value) {
 })
 
 
-/** 大额数字单位换算 */
+/** 大额金额数字单位换算 */
 Vue.filter('getNum', function (num) {
   num = Number(num);
   if (!num) return '0.00';
@@ -76,3 +76,17 @@ Vue.filter('getNum', function (num) {
     return num.toFixed(2)
   }
 })
+
+
+/** 大额件数单数单位换算 */
+Vue.filter('getNum_noPrice', function (num) {
+  num = Number(num);
+  if (!num) return '0';
+  if (num > 10000 || num < -10000) {
+    const moneys = num / 10000
+    const realVal = Math.round(moneys);
+    return realVal + "万"
+  } else {
+    return Math.round(num)
+  }
+})

src/filters/index.js

@@ -102,3 +102,16 @@ export function uppercaseFirst(string) {
     return num.toFixed(2)
   }
 }
+
+/** 大额件数单数单位换算 */
+Vue.filter('getNum_noPrice', function (num) {
+  num = Number(num);
+  if (!num) return '0';
+  if (num > 10000 || num < -10000) {
+    const moneys = num / 10000
+    const realVal = Math.round(moneys);
+    return realVal + "万"
+  } else {
+    return Math.round(num)
+  }
+})

src/views/reportQuery/purchaseReport/components/table8.vue

@@ -236,10 +236,6 @@ export default {
     },
      //导出文件 
     async download() {
-      // if(this.changeList.length<=0){
-      //   this.$message.warning("请选择有效数据")
-      //   return;
-      // }
       let start_date = new Date(this.parmValue.start_date).valueOf();
       let end_date = new Date(this.parmValue.end_date).valueOf();
       let flag = end_date - start_date > 30 * 24 * 60 * 60 * 1000;

src/views/test/components/bottomCenter.vue

@@ -4,23 +4,29 @@
       <span style="margin-bottom:20px;">竞价情况</span>
       <!-- <span style="width"></span> -->
       <div style="display: flex">
-        <span style="width: 110px">
+        <span style="width: 100px">
           <el-select v-model="region" size="mini">
             <el-option label="不限部门" value="1"></el-option>
             <el-option label="网络部" value="2"></el-option>
           </el-select>
         </span>
-        <span style="width: 70px">
+        <span style="width: 60px">
           <el-select v-model="region1" size="mini">
             <el-option label="日" value="1"></el-option>
             <el-option label="月" value="2"></el-option>
             <el-option label="年" value="3"></el-option>
           </el-select>
         </span>
-        <span style="width: 120px">
-          <el-select v-model="region2" size="mini">
-            <el-option label="2022/07/01" value="1"></el-option>
-          </el-select>
+        <span style="width: 140px">
+
+          <el-date-picker
+            style="width:100%"
+            size="mini"
+            :clearable="false"
+            v-model="region2"
+            :type="region1 == 1 ? 'date' : region1 == 2 ? 'month' : 'year'"
+            placeholder="选择日期">
+          </el-date-picker>
         </span>
       </div>
     </div>
@@ -93,7 +99,10 @@ export default {
             label: {
               show: true,
               position: "inside",
-              formatter:"{b} : {c}"
+              formatter:((params)=>{
+                //返回值对大数额做处理
+               return `${params.data.name} : ${this.$options.filters['getNum_noPrice'](params.data.value) }`
+              })
             },
             labelLine: {
               length: 10,
@@ -112,8 +121,8 @@ export default {
             //   },
             // },
             data: [
-              { value: 60, name: "生成订单" },
-              { value: 80, name: "已反馈单数" },
+              { value: 456760, name: "生成订单" },
+              { value: 8880, name: "已反馈单数" },
               { value: 100, name: "竞价单数" },
             ],
           },
@@ -130,7 +139,7 @@ export default {
     bottom: '1%'
   },
    title: {
-          text: "空反：\n总单数\n11",
+          text: `空反：\n总单数\n${1111}`,
           fontWeight:"normal",
           fontSize:14,
           lineHeight: 26,
@@ -146,7 +155,10 @@ export default {
       label: {
         show: true,
         position: 'inner',
-        formatter:"{c}"
+        formatter:((params)=>{
+                //返回值对大数额做处理
+               return `${this.$options.filters['getNum_noPrice'](params.data.value) }`
+              })
       },
    
       labelLine: {

src/views/test/components/bottomLeft.vue

@@ -4,23 +4,29 @@
       <span>销售转单时长</span>
       <!-- <span style="width"></span> -->
       <div style="display: flex">
-        <span style="width: 110px">
+        <span style="width: 100px">
           <el-select v-model="region" size="mini">
             <el-option label="不限部门" value="1"></el-option>
             <el-option label="网络部" value="2"></el-option>
           </el-select>
         </span>
-        <span style="width: 70px">
+        <span style="width: 60px">
           <el-select v-model="region1" size="mini">
             <el-option label="日" value="1"></el-option>
             <el-option label="月" value="2"></el-option>
             <el-option label="年" value="3"></el-option>
           </el-select>
         </span>
-        <span style="width: 120px">
-          <el-select v-model="region2" size="mini">
-            <el-option label="2022/07/01" value="1"></el-option>
-          </el-select>
+        <span style="width: 140px">
+
+          <el-date-picker
+            style="width:100%"
+            size="mini"
+            :clearable="false"
+            v-model="region2"
+            :type="region1 == 1 ? 'date' : region1 == 2 ? 'month' : 'year'"
+            placeholder="选择日期">
+          </el-date-picker>
         </span>
       </div>
     </div>

src/views/test/components/bottomRight.vue

@@ -4,23 +4,29 @@
       <span>采购返单时长</span>
       <!-- <span style="width"></span> -->
       <div style="display: flex">
-        <span style="width: 110px">
+        <span style="width: 100px">
           <el-select v-model="region" size="mini">
             <el-option label="不限部门" value="1"></el-option>
             <el-option label="网络部" value="2"></el-option>
           </el-select>
         </span>
-        <span style="width: 70px">
+        <span style="width: 60px">
           <el-select v-model="region1" size="mini">
             <el-option label="日" value="1"></el-option>
             <el-option label="月" value="2"></el-option>
             <el-option label="年" value="3"></el-option>
           </el-select>
         </span>
-        <span style="width: 120px">
-          <el-select v-model="region2" size="mini">
-            <el-option label="2022/07/01" value="1"></el-option>
-          </el-select>
+        <span style="width: 140px">
+
+          <el-date-picker
+            style="width:100%"
+            size="mini"
+            :clearable="false"
+            v-model="region2"
+            :type="region1 == 1 ? 'date' : region1 == 2 ? 'month' : 'year'"
+            placeholder="选择日期">
+          </el-date-picker>
         </span>
       </div>
     </div>

src/views/test/components/centerCon.vue

@@ -4,7 +4,7 @@
       <span>今年目标</span>
       <!-- <span style="width"></span> -->
       <span style="width: 110px">
-          50000万元
+          {{9000000 | getNum}}
         </span>
     </div>
 
@@ -54,7 +54,7 @@ export default {
         data: [50],
         shape: 'round',
         //通过这个值去改你要改的
-        formatter:"500w"
+        formatter:this.$options.filters['getNum'](9000000)
       }
     },
   },

src/views/test/components/centerLeft.vue

@@ -4,23 +4,29 @@
       <span>销售转单数</span>
       <!-- <span style="width"></span> -->
       <div style="display: flex">
-        <span style="width: 110px">
+        <span style="width: 100px">
           <el-select v-model="region" size="mini">
             <el-option label="不限部门" value="1"></el-option>
             <el-option label="网络部" value="2"></el-option>
           </el-select>
         </span>
-        <span style="width: 70px">
+        <span style="width: 60px">
           <el-select v-model="region1" size="mini">
             <el-option label="日" value="1"></el-option>
             <el-option label="月" value="2"></el-option>
             <el-option label="年" value="3"></el-option>
           </el-select>
         </span>
-        <span style="width: 120px">
-          <el-select v-model="region2" size="mini">
-            <el-option label="2022/07/01" value="1"></el-option>
-          </el-select>
+        <span style="width: 140px">
+
+          <el-date-picker
+            style="width:100%"
+            size="mini"
+            :clearable="false"
+            v-model="region2"
+            :type="region1 == 1 ? 'date' : region1 == 2 ? 'month' : 'year'"
+            placeholder="选择日期">
+          </el-date-picker>
         </span>
       </div>
     </div>

src/views/test/components/centerRight.vue

@@ -12,10 +12,16 @@
             <el-option label="年" value="3"></el-option>
           </el-select>
         </span>
-        <span style="width: 120px">
-          <el-select v-model="region2" size="mini">
-            <el-option label="2022/07/01" value="1"></el-option>
-          </el-select>
+        <span style="width: 140px">
+
+          <el-date-picker
+            style="width:100%"
+            size="mini"
+            :clearable="false"
+            v-model="region2"
+            :type="region1 == 1 ? 'date' : region1 == 2 ? 'month' : 'year'"
+            placeholder="选择日期">
+          </el-date-picker>
         </span>
       </div>
     </div>

src/views/test/components/topCenter.vue

@@ -68,7 +68,7 @@ export default {
             data: [5, 20, 36, 10],
 
             itemStyle: {
-              normal: { color: "#FF8849" },
+              normal: { color: "#19BE6B" },
             },
 
             barWidth: 30, //柱图宽度
@@ -83,7 +83,7 @@ export default {
             data: [90, 22, 18, 35],
 
             itemStyle: {
-              normal: { color: "#3FBB49" },
+              normal: { color: "#2D8CF0" },
             },
 
             barWidth: 30, //柱图宽度

src/views/test/components/topLeft.vue

@@ -4,68 +4,67 @@
       <span>今日销售</span>
     </div>
     <ul class="xs">
-        <li>
-            <p>9999999999</p>
-            <p>销售金额</p>
-        </li>
-        <li>
-            <p>9999999999</p>
-            <p>订单数</p>
-        </li>
-        <li>
-            <p>9999999999</p>
-            <p>商品数</p>
-        </li>
-
+      <li>
+        <p>{{999999 | getNum}}</p>
+        <p>销售金额</p>
+      </li>
+      <li>
+        <p>{{999999 | getNum_noPrice}}</p>
+        <p>订单数</p>
+      </li>
+      <li>
+        <p>{{999999 | getNum_noPrice}}</p>
+        <p>商品数</p>
+      </li>
     </ul>
+
     <div class="title">
       <span>今日采购</span>
     </div>
-     <ul class="cg">
-        <li>
-            <p>9999999999</p>
-            <p>竞价中标数</p>
-        </li>
-        <li>
-            <p>9999999999</p>
-            <p>反馈商品数</p>
-        </li>
-        <li>
-            <p>9999999999</p>
-            <p>订单数</p>
-        </li>
-        <li>
-            <p>9999999999</p>
-            <p>商品数</p>
-        </li>
-
+    <ul class="cg">
+      <li>
+        <p>{{999999 | getNum_noPrice}}</p>
+        <p>竞价中标数</p>
+      </li>
+      <li>
+        <p>{{999999 | getNum_noPrice}}</p>
+        <p>反馈商品数</p>
+      </li>
+      <li>
+        <p>{{999999 | getNum_noPrice}}</p>
+        <p>订单数</p>
+      </li>
+      <li>
+        <p>{{999999 | getNum_noPrice}}</p>
+        <p>商品数</p>
+      </li>
     </ul>
 
     <div class="title">
       <span>今日结算</span>
     </div>
     <el-table
-        :header-cell-style="{background:'#F5F7FA'}"
+      :header-cell-style="{ background: '#F5F7FA' }"
       :data="tableData"
-      style="width: 100%">
-      <el-table-column
-        prop="name"
-        label="待处理"
-        min-width="100">
+      style="width: 100%"
+    >
+      <el-table-column prop="name" label="待处理" min-width="100">
       </el-table-column>
-      <el-table-column
-        prop="date"
-        label="单数（单）"
-        min-width="100">
+      <el-table-column prop="date" label="单数（单）" min-width="100">
+        <template slot-scope="scope">
+          <div>
+            {{scope.row.date | getNum_noPrice}}
+          </div>
+        </template>
       </el-table-column>
-      <el-table-column
-        prop="address"
-        label="金额（元）"
-        min-width="100">
+      <el-table-column prop="address" label="金额（元）" min-width="100">
+        <template slot-scope="scope">
+          <div>
+            {{scope.row.address | getNum}}
+          </div>
+        </template>
       </el-table-column>
     </el-table>
-
-
   </div>
 </template>
 
@@ -73,70 +72,88 @@
 export default {
   data() {
     return {
-         tableData: [{
-            date: '222222',
-            name: '待开票',
-            address: '567890'
-          }, {
-            date: '3333333',
-            name: '待回款',
-            address: '45678'
-          }, {
-            date: '44444',
-            name: '待回票',
-            address: '456789'
-          }, {
-            date: '55555',
-            name: '待付款',
-            address: '4567890'
-          }]
+      tableData: [
+        {
+          date: "222222",
+          name: "待开票",
+          address: "567890",
+        },
+        {
+          date: "3333333",
+          name: "待回款",
+          address: "45678",
+        },
+        {
+          date: "44444",
+          name: "待回票",
+          address: "456789",
+        },
+        {
+          date: "55555",
+          name: "待付款",
+          address: "4567890",
+        },
+      ],
     };
   },
+  methods: {
+    getNum(num) {
+      num = Number(num);
+      if (!num) return "0.00";
+      if (num > 10000 || num < -10000) {
+        const moneys = num / 10000;
+        const realVal = parseFloat(moneys).toFixed(2);
+        return realVal + "万";
+      } else {
+        return num.toFixed(2);
+      }
+    },
+  },
 };
 </script>
 
 <style lang="scss" scoped>
-.txtSize{
-    // font-size: 0px;
+.txtSize {
+  // font-size: 0px;
 }
 .title {
-    font-size: 18px;
+  font-size: 18px;
   margin: 35px 0;
 }
-.title:first-child{
+.title:first-child {
   margin: 20px 0 35px;
 }
-.xs{
-    display: flex;
-    justify-content: space-between;
-    
-    li{
-        padding: 5px;
-        box-sizing: border-box;
-        width: 28%;
-        border: 1px solid #333;
-        p{
-            width: 100%;
-            text-align: center;
-        }
-    }
-    li:first-child{
-        width: 40%;
+.xs {
+  display: flex;
+  justify-content: space-between;
+
+  li {
+    padding: 5px;
+    box-sizing: border-box;
+    width: 28%;
+    border: 1px solid #333;
+    p {
+      width: 100%;
+      text-align: center;
     }
+  }
+  li:first-child {
+    width: 40%;
+  }
 }
-.cg{
-    display: flex;
-    justify-content: space-between;
-    
-    li{
-        padding: 5px;
-        box-sizing: border-box;
-        width: 23%;
-        border: 1px solid #333;
-        p{
-            width: 100%;
-            text-align: center;
-        }
+.cg {
+  display: flex;
+  justify-content: space-between;
+
+  li {
+    padding: 5px;
+    box-sizing: border-box;
+    width: 23%;
+    border: 1px solid #333;
+    p {
+      width: 100%;
+      text-align: center;
     }
+  }
 }
 </style>

src/views/test/components/topRight1.vue

@@ -9,12 +9,28 @@
       style="width: 100%"
     >
       <el-table-column prop="name" label="部门" min-width="100">
+        
       </el-table-column>
       <el-table-column prop="date" label="订单单数" min-width="100">
+        <template slot-scope="scope">
+          <div>
+            {{scope.row.date | getNum_noPrice}}
+          </div>
+        </template>
       </el-table-column>
       <el-table-column prop="test" label="退货金额" min-width="100">
+        <template slot-scope="scope">
+          <div>
+            {{scope.row.test | getNum}}
+          </div>
+        </template>
       </el-table-column>
       <el-table-column prop="address" label="订单金额" min-width="100">
+        <template slot-scope="scope">
+          <div>
+            {{scope.row.address | getNum}}
+          </div>
+        </template>
       </el-table-column>
     </el-table>
   </div>
@@ -47,7 +63,7 @@ export default {
           date: "55555",
           name: "待付款",
           test:"111111",
-          address: "4567890,",
+          address: "4567890",
         },
       ],
     };

src/views/test/components/topRight2.vue

@@ -9,12 +9,28 @@
       style="width: 100%"
     >
       <el-table-column prop="name" label="人员/部门" min-width="100">
+      
       </el-table-column>
       <el-table-column prop="date" label="订单单数" min-width="100">
+        <template slot-scope="scope">
+          <div>
+            {{scope.row.date | getNum_noPrice}}
+          </div>
+        </template>
       </el-table-column>
       <el-table-column prop="test" label="退货金额" min-width="100">
+        <template slot-scope="scope">
+          <div>
+            {{scope.row.test | getNum}}
+          </div>
+        </template>
       </el-table-column>
       <el-table-column prop="address" label="订单金额" min-width="100">
+        <template slot-scope="scope">
+          <div>
+            {{scope.row.address | getNum}}
+          </div>
+        </template>
       </el-table-column>
     </el-table>
   </div>
@@ -47,7 +63,7 @@ export default {
           date: "55555",
           name: "待付款",
           test:"111111",
-          address: "4567890,",
+          address: "4567890",
         },
       ],
     };

src/views/test/index.vue

@@ -114,13 +114,18 @@ export default {
   width: 100%;
 //   height: 100vh;
     // background: #000;
+    // background: url("./img/pageBg.png");
+    background: url("./img/1.jpeg");
+    background-size: 100% 100%;
   margin: 0;
-  padding: 20px 20px 0;
+  padding: 20px 20px 70px;
+  // color: #fff;
 }
 .dataBox {
   width: 100%;
   height: 100%;
   min-width: 1300px;
+
 }
 
 .top {