ui样式

2023-11-24 17:29:40 +08:00 · 2023-11-24 17:29:40 +08:00 · 8929e53724
commit 8929e53724
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@ -163,7 +163,7 @@ input, textarea{
 }

 ::-webkit-scrollbar-thumb {
-  background-color: rgba(144,147,153,.5);
+  background-color: #EDEDED;
  background-clip: padding-box;
  min-height: 28px;
  -webkit-border-radius: 2em;
@ -174,7 +174,7 @@ input, textarea{
 }

 ::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(144,147,153,.3);
+  background-color: #D9D9D9;
 }

 // 抽屉head区域---start
--- a/src/views/delivery/deliveryLogDet/components/deliveryLogDetDetail.vue
+++ b/src/views/delivery/deliveryLogDet/components/deliveryLogDetDetail.vue
@ -2,7 +2,7 @@
  <el-drawer
    title="发货进度"
    :visible.sync="centervisible"
-    size="80%"
+    size="50%"
    class="deliveryLogDetail"
    @close='closeA'
    :show-close='false'>
@ -47,7 +47,7 @@
              <method-btn
                v-if="tableBtn.length"
                slot="handleBtn"
-                :width="150"
+                :width="80"
                label="操作"
                :method-list="tableBtn"
                @clickBtn="viewDetDetail"
@ -65,7 +65,7 @@
          <div v-if="activeName === 'barChart'">
            <div 
              id="logDetPieBar"
-              style="width: 100%"
+              style="width: 60%"
              :style="{ height: chartHeight + 'px' }"
            ></div>
          </div>
@ -75,7 +75,7 @@
    <!-- 详情抽屉 -->
    <el-drawer
      title="发货详情"
-      size="60%"
+      size="50%"
      :append-to-body="true"
      :visible.sync="innerDrawer"
      @close='closeB'
@ -141,7 +141,8 @@ const tableProps = [
  },
  {
    prop: 'rate',
-    label: '发货比列(%)'
+    label: '发货比列(%)',
+    width: 110
  },
  {
    prop: 'principalCost',
@ -173,7 +174,8 @@ const tableProps2 = [
  },
  {
    prop: 'packagingSize',
-    label: '装箱规格（片/箱）'
+    label: '装箱规格（片/箱）',
+    minWidth: 140
  },
  {
    prop: 'packagingNum',
@ -210,8 +212,8 @@ export default {
      tableBtn: [
        this.$auth.hasPermi('base:group-team:update')
          ? {
-              type: 'detDetail',
-              btnName: '查看发货详情'
+              type: 'detail',
+              btnName: '详情'
            }
          : undefined
      ].filter((v) => v),
@ -230,7 +232,7 @@ export default {
      // 图
      chartDom: '',
      chart: '',
-      chartHeight: this.tableHeight(300)
+      chartHeight: this.tableHeight(300)*0.6
    }
  },
  // watch: {
@ -270,6 +272,8 @@ export default {
      }
    },
    getBar() {
+      let color = ['#7164FF','#288AFF','#63BDFF','#8EF0AB','#FFCE6A']
+      let colorList = []
      if (
        this.chart !== null &&
        this.chart !== '' &&
@ -280,64 +284,90 @@ export default {
      this.chartDom = document.getElementById('logDetPieBar')
      this.chart = echarts.init(this.chartDom)
      let seriesData = []
-      let sumData = 0
-      this.tableData && this.tableData.map(item =>{
+      if (this.tableData.length > 0) {
+        for (let i = 0; i < this.tableData.length; i++) {
+          let obj = {}
+          obj.value = this.tableData[i].num
+          obj.name = this.tableData[i].name
+          seriesData.push(obj)
+          if (i < 5) {
+            colorList.push(color[i])
+          } else {
+            colorList.push(color[i%5])
+          }
+        }
+      }
+      if (this.orderMsg.num < this.orderMsg.orderNum) {
        let obj = {}
-        obj.value = item.rate
-        obj.name = item.name
-        seriesData.push(obj)
-        sumData+=item.rate
-      })
-      if (sumData < 100) {
-        let obj = {}
-        obj.value = 100 - sumData
+        obj.value = this.orderMsg.orderNum - this.orderMsg.num
        obj.name = "未发货"
        seriesData.push(obj)
+        colorList.push('#F5F5F5')
+      }else {
+        let obj = {}
+        obj.value = 0
+        obj.name = "未发货"
+        seriesData.push(obj)
+        colorList.push('#F5F5F5')
      }
      var option = {
-        color: ['#B0EB42', '#FF9747', '#FF6860', '#7164FF', '#288AFF', '#63BDFF', '#73DE93', '#FFCE6A'],
-        tooltip: {
-          trigger: 'item',
-          formatter: function(params) {
-            let str = `<span style="display:inline-block;width:8px;height:8px;margin: 0 8px 0 -3px;border-radius:2px;background-color:${params.color};"></span>`
-            return `<span>
-                <span style="color:rgba(0,0,0,0.85);">${str}${params.name}</span>
-                <span style="display:inline-block;margin-left:10px;color:rgba(0,0,0,0.45);">${params.percent}</span>
-              </span>`
-          }
-        },
+        color: colorList,
        legend: {
-          type: 'scroll',
-          orient: 'vertical',
-          right: '10%',
-          top: 20,
-          bottom: 20,
-          icon: 'rect',
-          itemHeight: 8,
-          itemWidth: 8
+          bottom: '5%',
+          left: 'center',
+          itemWidth: 8,
+          itemHeight: 8
        },
        series: [
          {
            type: 'pie',
-            radius: ['60%', '80%'],
-            avoidLabelOverlap: false,
-            label: {
-              show: false,
-              position: 'center'
-            },
+            radius: ['40%', '55%'],
            emphasis: {
-              label: {
-                show: true,
-                fontSize: 40,
-                fontWeight: 'bold'
-              },
-              scale: true ,
-              scaleSize: 20 ,
+              scale: false
            },
-            labelLine: {
-              show: false
+            label: {
+              alignTo: 'edge',
+              formatter: '{name|{b}}\n{value|{c}}',
+              minMargin: 5,
+              edgeDistance: 10,
+              lineHeight: 15,
+              rich: {
+                name: {
+                  fontSize: 14,
+                  color: 'rgba(0,0,0,0.65)'
+                },
+                value: {
+                  fontSize: 14,
+                  color: 'rgba(0,0,0,0.65)'
+                }
+              }
            },
            data: seriesData
+          },
+          {
+            type: 'pie',
+            radius: ['40%', '40%'],
+            label: {
+              show: true,
+              position: 'center',
+              color: '#000',
+              formatter: [
+                  '{a|'+this.orderMsg.orderNum+'}',
+                  '{b|总数}'
+              ].join('\n\n'),
+              rich: {
+                a: {
+                    fontSize: 26 +'px'
+                },
+                b: {
+                    fontSize: 16 +'px'
+                }
+              }
+            },
+            emphasis: {
+              scale: false
+            },
+            data: [100]
          }
        ]
      };
@ -377,11 +407,13 @@ export default {
 </script>
 <style scoped lang='scss'>
 .box1 {
-  height: 56px;
+  height: 76px;
+  border-bottom: 1px solid #E9E9E9;
+  margin: 0px 8px 20px 30px;
  .box_col {
    display: inline-block;
    width: 20%;
-    padding: 8px 8px 8px 40px;
+    padding: 8px 8px 8px 8px;
    .blodTip {
      height: 16px;
      font-size: 14px;
@ -398,7 +430,7 @@ export default {
  }
 }
 .box2 {
-    padding:32px 32px 30px 30px;
+    padding:0px 32px 30px 30px;
    height: calc(100vh - 150px);
 }
 .boxTitle {
--- a/src/views/order/base/orderManage/index.vue
+++ b/src/views/order/base/orderManage/index.vue
@ -193,7 +193,8 @@ export default {
      this.$auth.hasPermi('base:order-manage:addWorkOrder')
          ? {
              type: 'add',
-              btnName: '新增工单',
+              btnName: '新增',
+              showTip: '新增工单',
              showParam: {
                type: '|',
                data: [
@ -219,7 +220,8 @@ export default {
      this.$auth.hasPermi('base:order-manage:bindWorkOrder')
          ? {
              type: 'bind',
-              btnName: '绑定工单',
+              btnName: '绑定',
+              showTip: '绑定工单',
              showParam: {
                type: '|',
                data: [
@ -245,7 +247,8 @@ export default {
      this.$auth.hasPermi('base:order-manage:bindWorkOrder')
          ? {
              type: 'complete',
-              btnName: '完成订单',
+              btnName: '完成',
+              showTip: '完成订单',
              showParam: {
                type: '|',
                data: [
--- a/src/views/order/monitoring/orderCompletionMonitoring/index.vue
+++ b/src/views/order/monitoring/orderCompletionMonitoring/index.vue
@ -22,7 +22,7 @@
        <method-btn
          v-if="tableBtn.length"
          slot="handleBtn"
-          :width="250"
+          :width="140"
          label="操作"
          :method-list="tableBtn"
          @clickBtn="handleClick"
@ -160,19 +160,52 @@ export default {
      this.$auth.hasPermi('base:order-completion-monitoring:orderDet')
          ? {
              type: 'orderDetail',
-              btnName: '工单详情'
+              btnName: '工单',
+              showTip: '工单详情',
+              showParam: {
+                type: '&',
+                data: [
+                  {
+                    type: 'more',
+                    name: 'workOrderNum',
+                    value: 1
+                  }
+                ]
+              }
            }
          : undefined,
      this.$auth.hasPermi('base:order-completion-monitoring:qualityDet')
          ? {
              type: 'qualityDetail',
-              btnName: '质量详情'
+              btnName: '质量',
+              showTip: '质量详情',
+              showParam: {
+                type: '&',
+                data: [
+                  {
+                    type: 'more',
+                    name: 'workOrderNum',
+                    value: 1
+                  }
+                ]
+              }
            }
          : undefined,
      this.$auth.hasPermi('base:order-completion-monitoring:sendOut')
          ? {
              type: 'sendOutDetail',
-              btnName: '发货详情'
+              btnName: '发货',
+              showTip: '发货详情',
+              showParam: {
+                type: '&',
+                data: [
+                  {
+                    type: 'more',
+                    name: 'workOrderNum',
+                    value: 1
+                  }
+                ]
+              }
            }
          : undefined
      ].filter((v) => v),