echarts样式、文字显示完整

src/components/layouts/TabLayout.vue

@@ -177,7 +177,7 @@
 
       // update-begin-author:sunjianlei date:20200120 for: 动态更改页面标题
       changeTitle(title) {
-        let projectTitle = "Jeecg-Boot 企业级低代码平台"
+        let projectTitle = "森语"
         // 首页特殊处理
         if (this.$route.path === indexKey) {
           document.title = projectTitle

src/field/reportForms/supplyCapacityTable.md

@@ -2,7 +2,7 @@
 
 csrccode     订单号
 cPlanLotNumber    计划单号
-cDepCode          部门
+cdepCode          部门
 cPersonCode       业务员
 cVenCode      供应商
 cVenCodeType    供应商类型
@@ -17,10 +17,10 @@ coefficient     系数
 #### 查询条件字段
 csrccode      订单号
 planLotNumber    计划单号
-venCode    供应商
+venName    供应商
 orderType    订单类型
 excelType     导出类型
-startDate    开始日期-日期格式(pattern="yyyy-MM-dd HH:mm:ss")
-endDate   结束日期-日期格式(pattern="yyyy-MM-dd HH:mm:ss")
+startDate    开始日期
+endDate   结束日期
 pageNo=1    当前页
 pageSize=20   页面大小

src/views/order/orderList.vue

@@ -261,7 +261,9 @@ export default {
       this.queryParam.orderDate = dateString
     },
     // 同步
-    synchronization() {},
+    synchronization() {
+      console.log('订单数据--同步');
+    },
 
     // 分页变化时触发
     handleTableChange(pagination, filters, sorter) {

src/views/reportForms/dye-loss-table/allLossChart.vue

@@ -51,23 +51,49 @@ export default {
         title: {
           text: '所有供应商物料染损统计图',
           textStyle: {
+            fontSize: 18,
             color: '#5470c6'
           }
         },
-        tooltip: {},
+        tooltip: {
+          textStyle: {
+            fontSize: 18
+            // color: '#5470c6'
+          }
+        },
         legend: {
           textStyle: {
+            fontSize: 16,
             color: '#5470c6'
           },
           data: [
             {
-              name: '染损',
+              name: '染损(%)',
               icon: 'circle' // 图例的图标样式
             }
           ]
         },
+        grid: {
+          show: true, //是否显示直角坐标系网格。[ default: false ]
+          left: '8%', // 组件离容器左侧的距离。
+          right: '10px',
+          borderColor: 'none', //网格的边框颜色
+          bottom: '20%' //
+        },
+
         xAxis: {
           type: 'category',
+          axisLabel: {
+            interval: 0, //控制X轴刻度全部显示
+            rotate: 30 //倾斜角度
+          },
+
+          splitArea: {
+            show: true,
+            areaStyle: {
+              color: ['rgba(84, 112, 198,0.05)', 'rgba(176, 177, 183,0.05)']
+            }
+          },
           data: this.cvenNameArr
         },
         yAxis: {
@@ -76,8 +102,18 @@ export default {
         },
         series: [
           {
-            name: '染损',
+            name: '染损(%)',
             type: 'line',
+            // 折现部门渐变色
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: 'rgba(216, 61, 65,0.5)' },
+                  { offset: 0.5, color: 'rgba(216, 61, 65,0.2)' },
+                  { offset: 1, color: 'rgba(216, 61, 65,0.08)' }
+                ])
+              }
+            },
             smooth: true,
             data: this.dyeLossRateArr
           }

src/views/reportForms/dye-loss-table/someoneLossChart.vue

@@ -39,9 +39,9 @@ export default {
           //截取指定下标数据
           this.cinvNameColorArr = this.cinvNameColorArr.slice(0, 10)
           this.dyeLossRateArr = this.dyeLossRateArr.slice(0, 10)
-
           console.log('物料+颜色chart数组', this.cinvNameColorArr)
           console.log('染损chart数组', this.dyeLossRateArr)
+
         }
         //2、执行chart
         this.$nextTick(() => {
@@ -58,23 +58,49 @@ export default {
         title: {
           text: '指定供应商物料染损统计图',
           textStyle: {
+            fontSize: 18,
             color: '#5470c6'
           }
         },
-        tooltip: {},
+        tooltip: {
+          textStyle: {
+            fontSize: 18
+            // color: '#5470c6'
+          }
+        },
         legend: {
           textStyle: {
+            fontSize: 16,
             color: '#5470c6'
           },
           data: [
             {
-              name: '染损',
+              name: '染损(%)',
               icon: 'circle' // 图例的图标样式
             }
           ]
         },
+        grid: {
+          show: true, //是否显示直角坐标系网格。[ default: false ]
+          left: '8%', // 组件离容器左侧的距离。
+          right: '10px',
+          borderColor: 'none', //网格的边框颜色
+          bottom: '40%' //
+        },
+
         xAxis: {
           type: 'category',
+          axisLabel: {
+            interval: 0, //控制X轴刻度全部显示
+            rotate: 40 //倾斜角度
+          },
+
+          splitArea: {
+            show: true,
+            areaStyle: {
+              color: ['rgba(84, 112, 198,0.04)', 'rgba(176, 177, 183,0.05)']
+            }
+          },
           data: this.cinvNameColorArr
         },
         yAxis: {
@@ -83,8 +109,18 @@ export default {
         },
         series: [
           {
-            name: '染损',
+            name: '染损(%)',
             type: 'line',
+            // 折现部门渐变色
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: 'blue' },
+                  { offset: 0.5, color: 'rgba(148,235,113,0.3)' },
+                  { offset: 1, color: 'rgba(148,235,113,0.1)' }
+                ])
+              }
+            },
             smooth: true,
             data: this.dyeLossRateArr
           }

src/views/reportForms/supply-capacity-table.vue

@@ -12,38 +12,42 @@
               </a-form-item>
             </a-col>
 
+            <!-- test -->
             <a-col :md="6" :sm="8">
-              <a-form-item label="开始月份">
-                <a-date-picker
-                  placeholder="请选择开始月份"
+              <a-form-item label="起始时间">
+                <a-range-picker
                   style="width: 100%"
-                  format="YYYY-MM"
-                  v-model="queryParam.startDate"
-                ></a-date-picker>
+                  v-model="queryParam.timeRange"
+                  format="YYYY-MM-DD"
+                  :placeholder="['开始时间', '结束时间']"
+                  @change="onDateChange"
+                  @ok="onDateOk"
+                />
               </a-form-item>
             </a-col>
-
-            <a-col :md="6" :sm="8">
-              <a-form-item label="结束月份">
-                <a-date-picker
-                  placeholder="请选择结束月份"
+            <!-- <a-col :md="6" :sm="8">
+              <a-form-item label="起始月份">
+                <a-range-picker
                   style="width: 100%"
+                  v-model="queryParam.timeRange"
                   format="YYYY-MM"
-                  v-model="queryParam.endDate"
-                ></a-date-picker>
+                  :placeholder="['开始月份', '结束月份']"
+                  @change="onDateChange"
+                  @ok="onDateOk"
+                />
+              </a-form-item>
+            </a-col> -->
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="订单类型">
+                <a-input placeholder="请输入订单类型" v-model="queryParam.orderType"></a-input>
               </a-form-item>
             </a-col>
 
             <template v-if="toggleSearchStatus">
-              <a-col :md="6" :sm="8">
-                <a-form-item label="订单类型">
-                  <a-input placeholder="请输入订单类型" v-model="queryParam.orderType"></a-input>
-                </a-form-item>
-              </a-col>
-
               <a-col :md="6" :sm="8">
                 <a-form-item label="供应商">
-                  <a-input placeholder="请输入供应商" v-model="queryParam.venCode"></a-input>
+                  <a-input placeholder="请输入供应商" v-model="queryParam.venName"></a-input>
                 </a-form-item>
               </a-col>
 
@@ -100,6 +104,7 @@
 import { JeecgListMixin } from '@/mixins/JeecgListMixin'
 import JEllipsis from '@/components/jeecg/JEllipsis'
 import moment from 'moment'
+import Dayjs from 'dayjs'
 
 import { supplyCapList } from '@api/reportForms/supply-capacity-table'
 import { downFile } from '@/api/manage'
@@ -123,12 +128,12 @@ export default {
         {
           title: '计划单号',
           width: 120,
-          dataIndex: 'planLotNumber',
+          dataIndex: 'cplanLotNumber',
           className: 'replacecolor'
         },
-        { title: '部门', width: 120, dataIndex: 'cDepCode', className: 'replacecolor' },
-        { title: '业务员', width: 120, dataIndex: 'cPersonCode', className: 'replacecolor' },
-        { title: '供应商', width: 120, dataIndex: 'venCode', className: 'replacecolor' },
+        { title: '部门', width: 120, dataIndex: 'cdepCode', className: 'replacecolor' },
+        { title: '业务员', width: 120, dataIndex: 'cpersonCode', className: 'replacecolor' },
+        { title: '供应商', width: 120, dataIndex: 'cvenCode', className: 'replacecolor' },
         // customRender: function(text) {
         //   if (text == '1') {
         //     return '销售类型1'
@@ -143,32 +148,32 @@ export default {
         //     return '销售类型4'
         //   }
         // }
-        { title: '供应商类型', width: 120, dataIndex: 'venCodeType', className: 'replacecolor' },
-        { title: '订单类型', width: 120, dataIndex: 'orderType', className: 'replacecolor' },
+        { title: '供应商类型', width: 120, dataIndex: 'cvenCodeType', className: 'replacecolor' },
+        { title: '订单类型', width: 120, dataIndex: 'iorderType', className: 'replacecolor' },
         {
           title: '数量',
           width: 120,
-          dataIndex: 'iQuantity',
+          dataIndex: 'iquantity',
           className: 'replacecolor'
         },
-        { title: '累计入库数量', width: 120, dataIndex: 'iReceivedQTY', className: 'replacecolor' },
+        { title: '累计入库数量', width: 120, dataIndex: 'ireceivedQTY', className: 'replacecolor' },
         { title: '单位', width: 100, dataIndex: 'unit', className: 'replacecolor' },
         {
           title: '计划到货月份',
           width: 120,
           dataIndex: 'arriveMonth',
-          // customRender: text => {
-          //   return moment(text).format('YYYY-MM')
-          // },
+          customRender: text => {
+            return moment(text).format('YYYY-MM')
+          },
           className: 'replacecolor'
         },
         {
           title: '计划到货日期',
           width: 120,
-          dataIndex: 'planDeliveryData',
-          // customRender: text => {
-          //   return moment(text).format('YYYY-MM-DD')
-          // },
+          dataIndex: 'darriveDate',
+          customRender: text => {
+            return moment(text).format('YYYY-MM-DD')
+          },
           className: 'replacecolor'
         },
         { title: '系数', width: 100, dataIndex: 'coefficient', className: 'replacecolor' }
@@ -180,10 +185,12 @@ export default {
         csrccode: '',
         startDate: '',
         endDate: '',
+        // timeRange = [], 月份范围
         orderType: '',
         venCode: '',
         planLotNumber: '',
-        pageNo: '' // 当前页
+        pageNo: '1',
+        pageSize: '10'
       },
       // 分页
       pagination: {
@@ -192,11 +199,11 @@ export default {
         // pageSize: 0
       },
       dateFormat: 'YYYY-MM-DD'
+      // value3: ref<Dayjs>(),
     }
   },
   created() {
     this.getSupplyCapList() // 渲染 供应链产能报表
-    // console.log('000')
   },
 
   methods: {
@@ -302,9 +309,18 @@ export default {
     },
     searchReset() {
       this.queryParam = {}
+      this.queryParam.timeRange = []
       this.getSupplyCapList()
     },
-
+    // 查询条件 月范围份转换成字符串并赋值
+    onDateChange(value, dateString) {
+      console.log('查询开始月份', dateString[0], '查询结束月份', dateString[1])
+      this.queryParam.startDate = dateString[0]
+      this.queryParam.endDate = dateString[1]
+    },
+    onDateOk(value) {
+      console.log('value', value)
+    },
     // 分页变化时触发
     handleTableChange(pagination, filters, sorter) {
       console.log('分页器信息', pagination)