1

Reviewed-on: #16

.env.dev

@@ -1,7 +1,7 @@
 ###
  # @Author: zhp
  # @Date: 2024-04-28 13:42:51
- # @LastEditTime: 2024-05-10 08:42:44
+ # @LastEditTime: 2024-05-13 13:30:20
  # @LastEditors: zhp
  # @Description:
 ###
@@ -12,7 +12,7 @@ ENV = 'development'
 VUE_APP_TITLE = 芋道管理系统
 
 # 芋道管理系统/开发环境
-# VUE_APP_BASE_API = 'http://192.168.1.61:48080'
+# VUE_APP_BASE_API = 'http://192.168.1.70:30307'
 VUE_APP_BASE_API = 'http://glass.kszny.picaiba.com'
 
 # 路由懒加载

src/mixins/chart.js

@@ -1,20 +1,19 @@
 import * as echarts from "echarts";
 
 function __resizeHandler(entries) {
-  console.log(entries);
   for (const entry of entries) {
     if (entry.contentBoxSize) {
       // manipulate contentBoxSize
-      const contentBoxSize = Array.isArray(entry.contentBoxSize)
+      // const contentBoxSize = Array.isArray(entry.contentBoxSize)
-        ? entry.contentBoxSize[0]
+      //   ? entry.contentBoxSize[0]
-        : entry.contentBoxSize;
+      //   : entry.contentBoxSize;
-      this.chart_mixin_chartInstance.resize({
+      // this.chart_mixin_chartInstance.resize({
-        width:
+      //   width:
-          contentBoxSize.inlineSize < this.MIN_WIDTH
+      //     contentBoxSize.inlineSize < this.MIN_WIDTH
-            ? this.MIN_WIDTH
+      //       ? this.MIN_WIDTH
-            : contentBoxSize.inlineSize,
+      //       : contentBoxSize.inlineSize,
-        height: contentBoxSize.blockSize,
+      //   height: contentBoxSize.blockSize,
-      });
+      // });
     } else {
       // manipulate contentRect
       this.chart_mixin_chartInstance.resize({

src/store/modules/home.js

@@ -29,10 +29,12 @@ const state = {
         target: [],
         current: [],
         previous: [],
+        outputNumber:[],
       },
       stdRate: {
         target: [],
         current: [],
+        outputNumber:[]
       },
     },
   },
@@ -112,11 +114,8 @@ const actions = {
       targetList = data
     }
     let factoryData = factoryList.prodOutputResultDO ? factoryList.prodOutputResultDO : factoryList.prodOutputRateDO
-    let targetData = targetList.ProdTargetDO ? targetList.ProdTargetDO : targetList.ProdTargetDO
+    let targetData = targetList.prodTargetDO ? targetList.prodTargetDO : targetList.prodTargetDO
-    console.log(factoryList.ProdOutputDO)
-    console.log('ryf',factoryList)
     const payload = handler(factoryData, targetData)
-    console.log(payload)
     commit("SET_COPILOT_INFO", { type, payload });
   },
 };
@@ -129,7 +128,7 @@ export default {
 };
 
 function splitCurrentAndPreviousA(factoryListResponse, targetListResponse) {
-  console.log('工厂',factoryListResponse);
+  console.log('工厂',targetListResponse);
   // console.log('工厂',factoryListResponse);
 
   // 初始数据
@@ -186,9 +185,6 @@ function splitCurrentAndPreviousA(factoryListResponse, targetListResponse) {
   // ];
   if (factoryListResponse) {
     for (const factory of factoryListResponse) {
-        if (factory.glassType === 1) {
-        console.log(factory.yieldRate)
-      }
       const fId = getFactoryId(factory);
       // 获取目标值
       if (targetListResponse) {
@@ -197,23 +193,25 @@ function splitCurrentAndPreviousA(factoryListResponse, targetListResponse) {
           componentYieldRate,
           chipOee,
           componentConversionEfficiency,
+          componentYield
         } = getFactoryTargetValueA(targetListResponse, fId);
-        stdRate.target[fId] = chipYieldRate;
+        stdRate.target[fId] =  componentYieldRate
-        chipRate.target[fId] = componentYieldRate;
+        chipRate.target[fId] = chipYieldRate
       }
       // 芯片OEE
-      chipOee.current[fId] = factory.oee * 100 || random_default();
+      chipOee.current[fId] = factory.oee * 100 ;
-      chipOee.previous[fId] = factory.previousYearOee * 100 || random_default();
+      chipOee.previous[fId] = factory.previousYearOee * 100 ;
       // 转化效率
       transformRate.current[fId] =
-        factory.componentConversionEfficiency * 100 || random_default();
+        factory.componentConversionEfficiency * 100 ;
       transformRate.previous[fId] =
-        factory.previousYearComponentConversionEfficiency * 100 || random_default();
+        factory.previousYearComponentConversionEfficiency * 100 ;
       // 芯片良率 与 标准组件良率
       if (![0, 1].includes(factory.glassType)) continue;
-      const _t = [chipRate, stdRate][factory.glassType];
+      const _t = [chipRate, stdRate][factory.glassType]
-      _t.current[fId] = factory.yieldRate || random_default();
+      console.log('_t',_t);
-      _t.previous[fId] = factory.previousYearYieldRate || random_default();
+      _t.current[fId] = factory.yieldRate ;
+      _t.previous[fId] = factory.previousYearYieldRate ;
     }
 
     return {
@@ -295,16 +293,18 @@ function getFactoryTargetValue(targetList, factoryId) {
  * @returns
  */
 function getFactoryTargetValueA(targetList, factoryId) {
-  const target = targetList.find((item) => item.factory === factoryId);
+  const target = targetList.find((item) => item.factory === factoryId)
   if (target) {
     return {
       chipYieldRate: target.chipYieldRate ?? random_default(),
       componentYieldRate: target.componentYieldRate ?? random_default(),
+      componentYield: target.componentYield ?? random_default(),
     };
   }
   return {
-    chipYieldRate: random_default(),
+    chipYieldRate:0,
-    componentYieldRate: random_default(),
+    componentYieldRate:0,
+    componentYield:0 ,
   };
 }
 

src/views/copilot/components/FactoryDataHeader.vue

@@ -9,11 +9,11 @@
     </section>
     <section class="menu2">
       <CopilotButton
-        v-for="i in ['日', '周', '月', '年']"
+        v-for="i in dataList"
-        :key="i"
+        :key="i.id"
-        :label="i"
+        :label="i.name"
-        :active="i === period"
+        :active="i.id === period"
-        @click="() => $emit('update:period', i)"
+        @click="() => $emit('update:period', i.id)"
       />
       <div class="btn-group">
         <button type="button" class="export-btn" />
@@ -42,15 +42,21 @@ export default {
       type: String,
     },
     companyId: {
-      type: String,
+      type: Number,
     },
     period: {
-      type: String,
+      type: Number,
     },
   },
   data() {
     return {
       isFullscreen: false,
+      dataList: [
+        { id: 1, name: "日" },
+        { id: 2, name: "周" },
+        { id: 3, name: "月" },
+        { id: 4, name: "年" },
+      ],
     };
   },
   computed: {},

src/views/copilot/components/FactorySelect.vue

@@ -26,20 +26,20 @@ export default {
       type: String,
     },
     companyId: {
-      type: String,
+      type: Number,
     },
   },
   data() {
     return {
       isOpen: false,
       company: [
-        { id: "1", name: "瑞昌中建材光电材料有限公司" },
+        { id: 0, name: "瑞昌中建材光电材料有限公司" },
-        { id: "2", name: "邯郸中建材光电材料有限公司" },
+        { id: 1, name: "邯郸中建材光电材料有限公司" },
-        { id: "3", name: "株洲中建材光电材料有限公司" },
+        { id: 2, name: "株洲中建材光电材料有限公司" },
-        { id: "4", name: "佳木斯中建材光电材料有限公司" },
+        { id: 3, name: "佳木斯中建材光电材料有限公司" },
-        { id: "5", name: "成都中建材光电材料有限公司" },
+        { id: 4, name: "成都中建材光电材料有限公司" },
-        { id: "6", name: "凯盛中建材光电材料有限公司" },
+        { id: 5, name: "凯盛中建材光电材料有限公司" },
-        { id: "7", name: "蚌埠中建材光电材料有限公司" },
+        { id: 6, name: "蚌埠中建材光电材料有限公司" },
       ],
     };
   },

src/views/copilot/components/LineChartBase.vue

@@ -8,37 +8,29 @@
 <template>
   <chart-container class="line-chart-base">
     <div class="legend">
-      <span
+      <span v-for="item in legend" :key="item.label" class="legend-item"
-        v-for="item in legend"
+        :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
-        :key="item.label" 
-        class="legend-item"
-        :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }"
-        >{{ item.label }}</span
-      >
     </div>
-    <div
+    <div ref="elsChart" :style="{ height: '100%',width: width}"></div>
-      ref="chart"
-      style="max-width: 50vw"
-      :style="{ height: vHeight + 'vh' }"
-    ></div>
   </chart-container>
 </template>
 
 <script>
 import screenfull from "screenfull";
+import { debounce } from "@/utils/debounce";
 import ChartContainer from "./ChartContainer.vue";
-import chartMixin from "@/mixins/chart.js";
+// import chartMixin from "@/mixins/chart.js";
-
+import * as echarts from "echarts";
 export default {
   name: "LineChartBase",
   components: {
     ChartContainer,
   },
-  mixins: [chartMixin],
+  // mixins: [chartMixin],
   props: {
     vHeight: {
       type: Number,
-      default: 34,
+      default: 38,
     },
     legend: {
       type: Array,
@@ -59,6 +51,7 @@ export default {
   },
   data() {
     return {
+      width: '100%',
       isFullscreen: false,
       actualOptions: null,
       options: {
@@ -69,120 +62,319 @@ export default {
           top: "15%",
           containLabel: true,
         },
-        tooltip: {},
+        // title: {
-        xAxis: {
+        //   text: 'Stacked Area Chart'
-          axisTick: {
+        // },
-            show: false,
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          }
         },
-          axisLine: {
+        // legend: {
-            lineStyle: {
+        //   data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
-              color: "#4561AE",
+        // },
+        // toolbox: {
+        //   feature: {
+        //     saveAsImage: {}
+        //   }
+        // },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
         },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+          }
+        ],
+        yAxis: [
+          {
+            min: function () { // 取最小值向下取整为最小刻度
+              return 0
             },
-          axisLabel: {
+            max: function (value) { // 取最大值向上取整为最大刻度
-            color: "#fff",
-            fontSize: 12,
             },
-          data: this.xAxis,
+            scale: true,
-        },
+            type: 'value',
-        yAxis: {
+            name: 'kw/h',
-          name: "单位/片",
+            // max: 100,//最大值
-          nameTextStyle: {
+            // min: 0,//最小值
-            color: "#fff",
+            // interval: 20,//间隔
-            fontSize: 12,
+            nameTextStyle: {// y轴上方单位的颜色
-          },
+              color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
-          axisTick: {
+              align: "right",
-            show: false,
+              padding: [0, 0, 0, 2]
-          },
-          axisLabel: {
-            color: "#fff",
-            fontSize: 12,
             },
+            // position: 'left',
+            alignTicks: true,
             axisLine: {
               show: true,
               lineStyle: {
-              color: "#4561AE",
+                // type: 'solid',
+                color: '#25528f',
+                // width: '1' // 坐标线的宽度
+              }
             },
+            axisLabel: {
+              color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
+              fontSize: 12,
+              // formatter: '{value}'
+              formatter: '{value}'
+              // }
             },
             splitLine: {
               lineStyle: {
-              color: "#4561AE",
+                color: '#25528f'
-            },
+              }
-          },
+            }
+            // type: 'value'
+            // axisLine: {
+            //   show: true,
+            //   lineStyle: {
+            //     color: colors[0]
+            //   }
+            // },
           },
+        ],
         series: [
           {
-            name: "", // this.series[0].name,
+            name: '瑞昌',
-            type: "bar",
+            type: 'line',
-            barWidth: 12,
+            stack: 'Total',
-            itemStyle: {
+            areaStyle: {
-              borderRadius: [10, 10, 0, 0],
+              opacity: 0.8,
-              color: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                type: "linear",
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [
                 {
                   offset: 0,
-                    color: "#12f7f1", // 0% 处的颜色
+                  color: '#8167F6'
-                  },
-                  {
-                    offset: 0.35,
-                    color: "#12f7f177", // 100% 处的颜色
-                  },
-                  {
-                    offset: 0.75,
-                    color: "#12f7f133", // 100% 处的颜色
                 },
                 {
                   offset: 1,
-                    color: "transparent", // 100% 处的颜色
+                  color: 'rgba(255, 234, 153, 0)'
+                }
+              ])
             },
-                ],
+            itemStyle: {
-                global: false, // 缺省为 false
+              normal: {
+                color: '#8167F6', //改变折线点的颜色
+                lineStyle: {
+                  color: '#8167F6' //改变折线颜色
+                }
+              }
             },
-            },
+            // emphasis: {
-            data: [], // this.series[0].data,
+            //   focus: 'series'
+            // },
+            data: [120, 132, 101, 134, 90, 230, 210]
           },
           {
-            name: "", // this.series[1].name,
+            name: '邯郸',
-            type: "bar",
+            type: 'line',
-            barWidth: 12,
+            stack: 'Total',
-            // tooltip: {
+            areaStyle: {
-            //   valueFormatter: function (value) {
+              opacity: 0.8,
-            //     return value + " ml";
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            //   },
-            // },
-            itemStyle: {
-              borderRadius: [10, 10, 0, 0],
-              color: {
-                type: "linear",
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [
                 {
                   offset: 0,
-                    color: "#57abf8", // 0% 处的颜色
+                  color: '#2760FF'
                 },
                 {
                   offset: 1,
-                    color: "#364BFE66", // 100% 处的颜色
+                  color: 'rgba(255, 234, 153, 0)'
+                }
+              ])
             },
-                ],
+            itemStyle: {
-                global: false, // 缺省为 false
+              normal: {
+                color: '#2760FF', //改变折线点的颜色
+                lineStyle: {
+                  color: '#2760FF' //改变折线颜色
+                }
+              }
             },
+            // emphasis: {
+            //   focus: 'series'
+            // },
+            data: [120, 132, 101, 134, 90, 230, 210]
           },
-            data: [], // this.series[1].data,
+          {
+            name: '株洲',
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#5996F7'
                 },
-        ],
+                {
+                  offset: 1,
+                  color: 'rgba(255, 234, 153, 0)'
+                }
+              ])
+            },
+            itemStyle: {
+              normal: {
+                color: '#5996F7', //改变折线点的颜色
+                lineStyle: {
+                  color: '#5996F7' //改变折线颜色
+                }
+              }
+            },
+            // emphasis: {
+            //   focus: 'series'
+            // },
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+          {
+            name: '佳木斯',
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#8BC566'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(255, 234, 153, 0)'
+                }
+              ])
+            },
+            itemStyle: {
+              normal: {
+                color: '#8BC566', //改变折线点的颜色
+                lineStyle: {
+                  color: '#8BC566' //改变折线颜色
+                }
+              }
+            },
+            // emphasis: {
+            //   focus: 'series'
+            // },
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+          {
+            name: '成都',
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#11FAF0'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(255, 234, 153, 0)'
+                }
+              ])
+            },
+            itemStyle: {
+              normal: {
+                color: '#11FAF0', //改变折线点的颜色
+                lineStyle: {
+                  color: '#11FAF0' //改变折线颜色
+                }
+              }
+            },
+            // emphasis: {
+            //   focus: 'series'
+            // },
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+          {
+            name: '凯盛',
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#F3C000'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(255, 234, 153, 0)'
+                }
+              ])
+            },
+            itemStyle: {
+              normal: {
+                color: '#F3C000', //改变折线点的颜色
+                lineStyle: {
+                  color: '#F3C000' //改变折线颜色
+                }
+              }
+            },
+            // emphasis: {
+            //   focus: 'series'
+            // },
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+          {
+            name: '蚌埠',
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#F38600'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(255, 234, 153, 0)'
+                }
+              ])
+            },
+            itemStyle: {
+              normal: {
+                color: '#F38600', //改变折线点的颜色
+                lineStyle: {
+                  color: '#F38600' //改变折线颜色
+                }
+              }
+            },
+            // emphasis: {
+            //   focus: 'series'
+            // },
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+        ]
       },
     };
   },
+  computed: {
+    isOpen() {
+      return this.$store.getters.sidebar.opened
+    },
+  },
   watch: {
+    isOpen(val) {
+      if (val === true) {
+        this.width = '99%'
+        this.canvasReset()
+        console.log(this.width)
+      } else {
+        this.watch = 100 + '%'
+        this.canvasReset()
+      }
+    },
     /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
     isFullscreen(val) {
       this.actualOptions.series.map((item) => {
@@ -191,11 +383,11 @@ export default {
       this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
       this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
       this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
-      this.initOptions(this.actualOptions);
+      this.initChart(this.actualOptions);
     },
     series(val) {
       if (!val) {
-        this.initOptions(this.options);
+        this.initChart(this.options);
         return;
       }
       const actualOptions = JSON.parse(JSON.stringify(this.options));
@@ -204,19 +396,42 @@ export default {
       actualOptions.series[1].data = val?.[1]?.data || [];
       actualOptions.series[1].name = val?.[1]?.name || "";
       this.actualOptions = actualOptions;
-      this.initOptions(actualOptions);
+      this.initChart(actualOptions);
     },
   },
-  mounted() {
-    this.actualOptions = this.options;
-    this.initOptions(this.options);
 
-    if (screenfull.isEnabled) {
+  mounted() {
-      screenfull.on("change", () => {
+    // if (screenfull.isEnabled) {
-        this.isFullscreen = screenfull.isFullscreen;
+    //   screenfull.on("change", () => {
-      });
+    //     this.isFullscreen = screenfull.isFullscreen;
+    //   });
+    // }
+    this.actualOptions = this.options
+    this.canvasReset();
+    window.addEventListener("resize", this.canvasReset);
+  },
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.dispose();
     }
   },
+  destroyed() {
+    window.removeEventListener("resize", this.canvasReset);
+  },
+  methods: {
+    canvasReset() {
+      debounce(() => {
+        this.initChart();
+      }, 500)();
+    },
+    initChart() {
+      if (this.chart) {
+        this.chart.dispose();
+      }
+      this.chart = echarts.init(this.$refs.elsChart);
+      this.chart.setOption(this.actualOptions);
+    },
+  },
 };
 </script>
 
@@ -233,7 +448,7 @@ export default {
   .legend-item {
     position: relative;
     // font-size: 12px;
-    margin-right: 0.67vw;
+    margin-right: 2vw;
 
     &::before {
       content: "";
@@ -260,37 +475,37 @@ export default {
 
   .legend-item:nth-child(1):after,
   .legend-item:nth-child(1):before {
-    background-color: #fad162;
+    background-color: #8167F6;
   }
 
   .legend-item:nth-child(2):after,
   .legend-item:nth-child(2):before {
-    background-color: #2160f3;
+    background-color: #2760FF;
   }
 
   .legend-item:nth-child(3):after,
   .legend-item:nth-child(3):before {
-    background-color: #13dbf3;
+    background-color: #5996F7;
   }
 
   .legend-item:nth-child(4):after,
   .legend-item:nth-child(4):before {
-    background-color: #88ca67;
+    background-color: #8BC566;
   }
 
   .legend-item:nth-child(5):after,
   .legend-item:nth-child(5):before {
-    background-color: #5c97fc;
+    background-color: #11FAF0;
   }
 
   .legend-item:nth-child(6):after,
   .legend-item:nth-child(6):before {
-    background-color: #f48900;
+    background-color: #F3C000;
   }
 
   .legend-item:nth-child(7):after,
   .legend-item:nth-child(7):before {
-    background-color: #776bf0;
+    background-color: #F38600;
   }
 }
 </style>

src/views/copilot/components/LineChartWater.vue

@@ -0,0 +1,515 @@
+<!--
+    filename: LineChartBase.vue
+    author: liubin
+    date: 2024-04-30 08:59:28
+    description:
+-->
+
+<template>
+  <chart-container class="line-chart-base">
+    <div class="legend">
+      <span v-for="item in legend" :key="item.label" class="legend-item"
+        :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
+    </div>
+    <div ref="waterChart" :style="{ height: '100%',width: width}"></div>
+  </chart-container>
+</template>
+
+<script>
+import screenfull from "screenfull";
+import { debounce } from "@/utils/debounce";
+import ChartContainer from "./ChartContainer.vue";
+// import chartMixin from "@/mixins/chart.js";
+import * as echarts from "echarts";
+export default {
+  name: "LineChartBase",
+  components: {
+    ChartContainer,
+  },
+  // mixins: [chartMixin],
+  props: {
+    vHeight: {
+      type: Number,
+      default: 38,
+    },
+    legend: {
+      type: Array,
+      required: true,
+    },
+    xAxis: {
+      type: Array,
+      required: true,
+    },
+    series: {
+      type: Array,
+      required: true,
+    },
+    in: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      width:'',
+      isFullscreen: false,
+      actualOptions: null,
+      options: {
+        grid: {
+          left: "1%",
+          right: "4%",
+          bottom: "3%",
+          top: "15%",
+          containLabel: true,
+        },
+        // title: {
+        //   text: 'Stacked Area Chart'
+        // },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          }
+        },
+        // legend: {
+        //   data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
+        // },
+        // toolbox: {
+        //   feature: {
+        //     saveAsImage: {}
+        //   }
+        // },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+          }
+        ],
+        yAxis: [
+          {
+            min: function () { // 取最小值向下取整为最小刻度
+              return 0
+            },
+            max: function (value) { // 取最大值向上取整为最大刻度
+            },
+            scale: true,
+            type: 'value',
+            name: 'kw/h',
+            // max: 100,//最大值
+            // min: 0,//最小值
+            // interval: 20,//间隔
+            nameTextStyle: {// y轴上方单位的颜色
+              color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
+              align: "right",
+              padding: [0, 0, 0, 2]
+            },
+            // position: 'left',
+            alignTicks: true,
+            axisLine: {
+              show: true,
+              lineStyle: {
+                // type: 'solid',
+                color: '#25528f',
+                // width: '1' // 坐标线的宽度
+              }
+            },
+            axisLabel: {
+              color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
+              fontSize: 12,
+              // formatter: '{value}'
+              formatter: '{value}'
+              // }
+            },
+            splitLine: {
+              lineStyle: {
+                color: '#25528f'
+              }
+            }
+            // type: 'value'
+            // axisLine: {
+            //   show: true,
+            //   lineStyle: {
+            //     color: colors[0]
+            //   }
+            // },
+          },
+        ],
+        series: [
+          {
+            name: '瑞昌',
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#8167F6'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(255, 234, 153, 0)'
+                }
+              ])
+            },
+            itemStyle: {
+              normal: {
+                color: '#8167F6', //改变折线点的颜色
+                lineStyle: {
+                  color: '#8167F6' //改变折线颜色
+                }
+              }
+            },
+            // emphasis: {
+            //   focus: 'series'
+            // },
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+          {
+            name: '邯郸',
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#2760FF'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(255, 234, 153, 0)'
+                }
+              ])
+            },
+            itemStyle: {
+              normal: {
+                color: '#2760FF', //改变折线点的颜色
+                lineStyle: {
+                  color: '#2760FF' //改变折线颜色
+                }
+              }
+            },
+            // emphasis: {
+            //   focus: 'series'
+            // },
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+          {
+            name: '株洲',
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#5996F7'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(255, 234, 153, 0)'
+                }
+              ])
+            },
+            itemStyle: {
+              normal: {
+                color: '#5996F7', //改变折线点的颜色
+                lineStyle: {
+                  color: '#5996F7' //改变折线颜色
+                }
+              }
+            },
+            // emphasis: {
+            //   focus: 'series'
+            // },
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+          {
+            name: '佳木斯',
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#8BC566'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(255, 234, 153, 0)'
+                }
+              ])
+            },
+            itemStyle: {
+              normal: {
+                color: '#8BC566', //改变折线点的颜色
+                lineStyle: {
+                  color: '#8BC566' //改变折线颜色
+                }
+              }
+            },
+            // emphasis: {
+            //   focus: 'series'
+            // },
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+          {
+            name: '成都',
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#11FAF0'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(255, 234, 153, 0)'
+                }
+              ])
+            },
+            itemStyle: {
+              normal: {
+                color: '#11FAF0', //改变折线点的颜色
+                lineStyle: {
+                  color: '#11FAF0' //改变折线颜色
+                }
+              }
+            },
+            // emphasis: {
+            //   focus: 'series'
+            // },
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+          {
+            name: '凯盛',
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#F3C000'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(255, 234, 153, 0)'
+                }
+              ])
+            },
+            itemStyle: {
+              normal: {
+                color: '#F3C000', //改变折线点的颜色
+                lineStyle: {
+                  color: '#F3C000' //改变折线颜色
+                }
+              }
+            },
+            // emphasis: {
+            //   focus: 'series'
+            // },
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+          {
+            name: '蚌埠',
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#F38600'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(255, 234, 153, 0)'
+                }
+              ])
+            },
+            itemStyle: {
+              normal: {
+                color: '#F38600', //改变折线点的颜色
+                lineStyle: {
+                  color: '#F38600' //改变折线颜色
+                }
+              }
+            },
+            // emphasis: {
+            //   focus: 'series'
+            // },
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+        ]
+      },
+    };
+  },
+  watch: {
+    isOpen(val) {
+      // console.log(val)
+      if (val === true) {
+        console.log('ztl')
+        this.width = '99%'
+        this.canvasReset()
+        console.log(this.width)
+      } else {
+        this.watch = 100 + '%'
+        this.canvasReset()
+      }
+    },
+    /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
+    isFullscreen(val) {
+      if (val === true && this.isOpen === true) {
+        this.width = '99%'
+      }
+      this.actualOptions.series.map((item) => {
+        item.barWidth = val ? 18 : 12;
+      });
+      this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
+      this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
+      this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
+      this.initChart(this.actualOptions);
+    },
+    series(val) {
+      if (!val) {
+        this.initChart(this.options);
+        return;
+      }
+      const actualOptions = JSON.parse(JSON.stringify(this.options));
+      actualOptions.series[0].data = val[0].data;
+      actualOptions.series[0].name = val[0].name;
+      actualOptions.series[1].data = val?.[1]?.data || [];
+      actualOptions.series[1].name = val?.[1]?.name || "";
+      this.actualOptions = actualOptions;
+      this.initChart(actualOptions);
+    },
+  },
+  computed: {
+    isOpen() {
+      return this.$store.getters.sidebar.opened
+    },
+  },
+  mounted() {
+    if (screenfull.isEnabled) {
+      screenfull.on("change", () => {
+        this.isFullscreen = screenfull.isFullscreen;
+      });
+    }
+    this.actualOptions = this.options
+    this.canvasReset();
+    window.addEventListener("resize", this.canvasReset);
+  },
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.dispose();
+    }
+  },
+  destroyed() {
+    window.removeEventListener("resize", this.canvasReset);
+  },
+  methods: {
+    canvasReset() {
+      debounce(() => {
+        this.initChart();
+      }, 500)();
+    },
+    initChart() {
+      if (this.chart) {
+        this.chart.dispose();
+      }
+      this.chart = echarts.init(this.$refs.waterChart);
+      this.chart.setOption(this.actualOptions);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.line-chart-base {
+  // position: relative;
+
+  .legend {
+    position: absolute;
+    top: 5.2vh;
+    right: 1vw;
+  }
+
+  .legend-item {
+    position: relative;
+    // font-size: 12px;
+    margin-right: 2vw;
+
+    &::before {
+      content: "";
+      display: inline-block;
+      width: 0.432vw;
+      height: 0.432vw;
+      border-radius: 100%;
+      margin-right: 0.4vw;
+    }
+
+    &::after {
+      content: "";
+      display: inline-block;
+      width: 1vw;
+      height: 0.125vw;
+      position: absolute;
+      top: 54%;
+      left: -15%;
+      transform: translateY(-50%);
+      border-radius: 100;
+      margin-right: 0.22vw;
+    }
+  }
+
+  .legend-item:nth-child(1):after,
+  .legend-item:nth-child(1):before {
+    background-color: #8167F6;
+  }
+
+  .legend-item:nth-child(2):after,
+  .legend-item:nth-child(2):before {
+    background-color: #2760FF;
+  }
+
+  .legend-item:nth-child(3):after,
+  .legend-item:nth-child(3):before {
+    background-color: #5996F7;
+  }
+
+  .legend-item:nth-child(4):after,
+  .legend-item:nth-child(4):before {
+    background-color: #8BC566;
+  }
+
+  .legend-item:nth-child(5):after,
+  .legend-item:nth-child(5):before {
+    background-color: #11FAF0;
+  }
+
+  .legend-item:nth-child(6):after,
+  .legend-item:nth-child(6):before {
+    background-color: #F3C000;
+  }
+
+  .legend-item:nth-child(7):after,
+  .legend-item:nth-child(7):before {
+    background-color: #F38600;
+  }
+}
+</style>

src/views/copilot/components/NotMsg.vue

@@ -0,0 +1,27 @@
+<template>
+	<div class="notmsg">暂无数据</div>
+</template>
+
+<script>
+export default {
+	name: 'NotMsg',
+	components: {},
+	data() {
+		return {
+		};
+	},
+	computed: {
+	},
+	methods: {
+	},
+};
+</script>
+
+<style scoped lang="scss">
+.notmsg {
+	padding-top: 72px;
+	color: rgba(255, 255, 255, 0.4);
+	text-align: center;
+	font-size: 24px;
+}
+</style>

src/views/copilot/components/gasBarChartBase.vue

@@ -0,0 +1,304 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-05-13 14:08:51
+ * @LastEditTime: 2024-05-14 08:46:07
+ * @LastEditors: zhp
+ * @Description:
+-->
+
+<template>
+  <chart-container class="bar-chart-base">
+    <div class="legend">
+      <!-- <span v-for="item in legend" :key="item.label" class="legend-item"
+        :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span> -->
+    </div>
+    <div  ref="gasChart" :style="{ height: '100%',width: width}"></div>
+  </chart-container>
+</template>
+
+<script>
+import screenfull from "screenfull";
+import ChartContainer from "./ChartContainer.vue";
+// import chartMixin from "@/mixins/chart.js";
+import { debounce } from "@/utils/debounce";
+import * as echarts from "echarts";
+export default {
+  name: "BarChartBase",
+  components: {
+    ChartContainer,
+  },
+  // mixins: [chartMixin],
+  props: {
+    vHeight: {
+      type: Number,
+      default: 38,
+    },
+    legend: {
+      type: Array,
+      required: false,
+    },
+    xAxis: {
+      type: Array,
+      required: true,
+    },
+    series: {
+      type: Array,
+      required: true,
+    },
+    in: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      width: '100%',
+      isFullscreen: false,
+      actualOptions: null,
+      options: {
+        grid: {
+          left: "1%",
+          right: "4%",
+          bottom: "3%",
+          top: "15%",
+          containLabel: true,
+        },
+        tooltip: {},
+        xAxis: {
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#4561AE",
+            },
+          },
+          axisLabel: {
+            color: "#fff",
+            fontSize: 12,
+          },
+          data: this.xAxis,
+        },
+        yAxis: {
+          name: "单位/片",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            color: "#fff",
+            fontSize: 12,
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#4561AE",
+            },
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#4561AE",
+            },
+          },
+        },
+        series: [
+          {
+            name: "", // this.series[0].name,
+            type: "bar",
+            barWidth: 12,
+            itemStyle: {
+              borderRadius: [10, 10, 0, 0],
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#12f7f1", // 0% 处的颜色
+                  },
+                  {
+                    offset: 0.35,
+                    color: "#12f7f177", // 100% 处的颜色
+                  },
+                  {
+                    offset: 0.75,
+                    color: "#12f7f133", // 100% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "transparent", // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+            },
+            data: [], // this.series[0].data,
+          },
+          {
+            name: "", // this.series[1].name,
+            type: "bar",
+            barWidth: 12,
+            // tooltip: {
+            //   valueFormatter: function (value) {
+            //     return value + " ml";
+            //   },
+            // },
+            itemStyle: {
+              borderRadius: [10, 10, 0, 0],
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#57abf8", // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "#364BFE66", // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+            },
+            data: [], // this.series[1].data,
+          },
+        ],
+      },
+    };
+  },
+  computed: {
+    isOpen() {
+      return this.$store.getters.sidebar.opened
+    },
+  },
+  watch: {
+    isOpen(val) {
+      // console.log(val)
+      if (val === true) {
+        console.log('ryf')
+        this.width = '99%'
+        this.canvasReset()
+        console.log(this.width)
+      } else {
+        this.watch = 100 + '%'
+        this.canvasReset()
+      }
+    },
+    /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
+    isFullscreen(val) {
+      if (val === true && this.isOpen === true) {
+        this.width = '99%'
+      }
+      this.actualOptions.series.map((item) => {
+        item.barWidth = val ? 18 : 12;
+      });
+      this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
+      this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
+      this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
+      this.initOptions(this.actualOptions);
+    },
+    series(val) {
+      if (!val) {
+        this.initOptions(this.options);
+        return;
+      }
+      const actualOptions = JSON.parse(JSON.stringify(this.options));
+      console.log('actualOptions', this.options)
+      actualOptions.series[0].data = val[0].data;
+      actualOptions.series[0].name = val[0].name;
+      actualOptions.series[1].data = val?.[1]?.data || [];
+      actualOptions.series[1].name = val?.[1]?.name || "";
+      this.actualOptions = actualOptions;
+      this.initChart(actualOptions);
+    },
+  },
+  mounted() {
+    if (screenfull.isEnabled) {
+      screenfull.on("change", () => {
+        this.isFullscreen = screenfull.isFullscreen;
+      });
+    }
+    this.actualOptions = this.options
+    this.canvasReset();
+    window.addEventListener("resize", this.canvasReset);
+  },
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.dispose();
+    }
+  },
+  destroyed() {
+    window.removeEventListener("resize", this.canvasReset);
+  },
+  methods: {
+    canvasReset() {
+      debounce(() => {
+        this.initChart();
+      }, 500)();
+    },
+    initChart() {
+      if (this.chart) {
+        this.chart.dispose();
+      }
+      this.chart = echarts.init(this.$refs.gasChart);
+      this.chart.setOption(this.actualOptions);
+    },
+  },
+  // mounted() {
+  //   this.actualOptions = this.options;
+  //   this.initOptions(this.options);
+  //   window.addEventListener("resize", this.initOptions(this.actualOptions))
+  //   if (screenfull.isEnabled) {
+  //     screenfull.on("change", () => {
+  //       this.isFullscreen = screenfull.isFullscreen;
+  //     });
+  //   }
+  // },
+};
+</script>
+
+<style scoped lang="scss">
+.bar-chart-base {
+  // position: relative;
+
+  .legend {
+    position: absolute;
+    top: 5.2vh;
+    right: 1vw;
+  }
+
+  .legend-item {
+    position: relative;
+    // font-size: 12px;
+    margin-right: 0.67vw;
+
+    &::before {
+      content: "";
+      display: inline-block;
+      width: 0.531vw;
+      height: 0.531vw;
+      background-color: #ccc;
+      border-radius: 2px;
+      margin-right: 0.22vw;
+    }
+  }
+
+  .legend-item:nth-child(1):before {
+    background-color: #12f7f1;
+  }
+
+  .legend-item:nth-child(2):before {
+    background-color: #58adfa;
+  }
+}
+</style>

src/views/copilot/efficiency/components/StdRate.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-07 10:25:10
- * @LastEditTime: 2024-05-09 08:44:21
+ * @LastEditTime: 2024-05-11 14:51:07
  * @LastEditors: zhp
  * @Description:
 -->
@@ -28,21 +28,68 @@ export default {
       default: "日",
     },
   },
+  computed: {
+    cities() {
+      console.log('ztl', this.$store.getters.copilot.efficiency.stdRate)
+      // let getterName = "";
+      // switch (this.dataSource) {
+      //   case "标准组件产出":
+      //     getterName = "stdOutput";
+      //     break;
+      //   case "芯片产出":
+      //     getterName = "chipOutput";
+      //     break;
+      //   case "BIPV产出":
+      //     getterName = "bipvOutput";
+      //     break;
+      // }
+      const _cities = [
+        { name: "瑞昌", target: 0, total: 0, current: 0, componentYield: 0, goodNumber:0,},
+        { name: "邯郸", target: 0, total: 0, current: 0, componentYield: 0, goodNumber: 0, },
+        { name: "株洲", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
+        { name: "佳木斯", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
+        { name: "成都", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
+        { name: "凯盛光伏", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
+        { name: "蚌埠", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
+      ]
+      if (this.$store.getters.copilot?.efficiency.stdRate?.previous) {
+        this.$store.getters.copilot?.efficiency.stdRate?.previous.forEach(
+          (v, idx) => {
+            _cities[idx].previous = v ?? 0;
+          }
+        );
+      }
+      if (this.$store.getters.copilot?.efficiency.stdRate?.target) {
+        this.$store.getters.copilot?.efficiency.stdRate?.target.forEach(
+          (v, idx) => {
+            _cities[idx].target = v ?? 0;
+          }
+        )
+      }
+      if (this.$store.getters.copilot?.efficiency.stdRate?.current) {
+        this.$store.getters.copilot?.efficiency.stdRate?.current.forEach(
+          (v, idx) => {
+            _cities[idx].current = v ?? 0;
+          }
+        );
+      }
+      // 删掉凯盛光伏
+      // _cities.splice(4, 1);
+      return _cities;
+    },
+  },
   data() {
     return {
-      cities: [
+      // cities: [
-        { name: "瑞昌", target: 100, total: 200, thisYear: 20 },
+      //   { name: "瑞昌", target: 100, total: 200, current: 20 },
-        { name: "邯郸", target: 200, total: 300, thisYear: 20 },
+      //   { name: "邯郸", target: 200, total: 300, current: 20 },
-        { name: "株洲", target: 300, total: 400, thisYear: 20 },
+      //   { name: "株洲", target: 300, total: 400, current: 20 },
-        { name: "佳木斯", target: 400, total: 500, thisYear: 20 },
+      //   { name: "佳木斯", target: 400, total: 500, current: 20 },
-        { name: "成都", target: 500, total: 600, thisYear: 20 },
+      //   { name: "成都", target: 500, total: 600, current: 20 },
-        { name: "凯盛光伏", target: 400, total: 500, thisYear: 20 },
+      //   { name: "凯盛光伏", target: 400, total: 500, current: 20 },
-        { name: "蚌埠", target: 500, total: 600, thisYear: 20 },
+      //   { name: "蚌埠", target: 500, total: 600, current: 20 },
-      ],
+      // ],
     };
-  },
-  computed: {
-
   },
   methods: {},
 };

src/views/copilot/efficiency/components/sub/bar/BarChartChipOEE.vue

@@ -1,40 +1,32 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-07 13:22:43
- * @LastEditTime: 2024-05-09 16:22:24
+ * @LastEditTime: 2024-05-14 08:32:44
  * @LastEditors: zhp
  * @Description:
 -->
 <template>
   <chart-container class="bar-chart-base">
     <div class="legend">
-      <span
+      <span v-for="item in legend" :key="item.label" class="legend-item"
-        v-for="item in legend"
+        :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
-        :key="item.label"
-        class="legend-item"
-        :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }"
-        >{{ item.label }}</span
-      >
     </div>
-    <div
+    <div ref="chart" :style="{ height: '100%',width: width}"></div>
-      ref="chart"
-      style="max-width: 40vw"
-      :style="{ height: vHeight + 'vh' }"
-    ></div>
   </chart-container>
 </template>
 
 <script>
 import screenfull from "screenfull";
 import ChartContainer from "../../../../components/ChartContainer.vue";
-import chartMixin from "@/mixins/chart.js";
+// import chartMixin from "@/mixins/chart.js";
-
+import { debounce } from "@/utils/debounce";
+import * as echarts from "echarts";
 export default {
   name: "BarChartBase",
   components: {
     ChartContainer,
   },
-  mixins: [chartMixin],
+  // mixins: [chartMixin],
   props: {
     vHeight: {
       type: Number,
@@ -59,12 +51,13 @@ export default {
   },
   data() {
     return {
+      width: '100%',
       isFullscreen: false,
       actualOptions: null,
       options: {
         grid: {
           left: "5%",
-          right: "4%",
+          right: "0%",
           bottom: "3%",
           top: "15%",
           containLabel: true,
@@ -182,7 +175,21 @@ export default {
       },
     };
   },
+  computed: {
+    isOpen() {
+      return this.$store.getters.sidebar.opened
+    },
+  },
   watch: {
+    isOpen(val) {
+      if (val === true) {
+        this.width = '100%-128px'
+        this.canvasReset()
+      } else {
+        this.watch = 100 + '%'
+        this.canvasReset()
+      }
+    },
     /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
     isFullscreen(val) {
       this.actualOptions.series.map((item) => {
@@ -191,11 +198,11 @@ export default {
       this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
       this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
       this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
-      this.initOptions(this.actualOptions);
+      this.initChart(this.actualOptions);
     },
     series(val) {
       if (!val) {
-        this.initOptions(this.options);
+        this.initChart(this.options);
         return;
       }
       console.log(val)
@@ -205,19 +212,41 @@ export default {
       actualOptions.series[1].data = val?.[1]?.data || [];
       actualOptions.series[1].name = val?.[1]?.name || "";
       this.actualOptions = actualOptions;
-      this.initOptions(actualOptions);
+      this.initChart(actualOptions);
     },
   },
   mounted() {
-    this.actualOptions = this.options;
+    // if (screenfull.isEnabled) {
-    this.initOptions(this.options);
+    //   screenfull.on("change", () => {
-
+    //     this.isFullscreen = screenfull.isFullscreen;
-    if (screenfull.isEnabled) {
+    //   });
-      screenfull.on("change", () => {
+    // }
-        this.isFullscreen = screenfull.isFullscreen;
+    this.actualOptions = this.options
-      });
+    this.canvasReset();
+    window.addEventListener("resize", this.canvasReset);
+  },
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.dispose();
     }
   },
+  destroyed() {
+    window.removeEventListener("resize", this.canvasReset);
+  },
+  methods: {
+    canvasReset() {
+      debounce(() => {
+        this.initChart();
+      }, 500)();
+    },
+    initChart() {
+      if (this.chart) {
+        this.chart.dispose();
+      }
+      this.chart = echarts.init(this.$refs.chart);
+      this.chart.setOption(this.actualOptions);
+    },
+  },
 };
 </script>
 

src/views/copilot/efficiency/components/sub/chip/ChipRateItem.vue

@@ -59,7 +59,7 @@ export default {
     },
     valueTuple() {
       const getter = this.chipRate;
-      console.log(getter)
+      // console.log(getter)
       if (this.period === "日" || this.period === "周") {
         return [
           getter.previous[this.factoryId],
@@ -111,11 +111,11 @@ export default {
             this.period == "月"
               ? `${year - 1}年${month}月良率`
               : `${year - 1}年良率`,
-          value: (this.valueTuple[0] * 100).toFixed(0) + "%",
+          value: isNaN((this.valueTuple[0] * 100).toFixed(0)) ? 0 + "%" : (this.valueTuple[0] * 100).toFixed(0) + "%"
         },
         {
           label: this.period == "月" ? `${month}月良率` : `${year}年良率`,
-          value:  (this.valueTuple[1] * 100).toFixed(0) + "%",
+          value: isNaN((this.valueTuple[1] * 100).toFixed(0)) ? 0 + "%" : (this.valueTuple[1] * 100).toFixed(0) + "%"
         },
       ];
     },
@@ -159,6 +159,7 @@ export default {
   }
 
   .chart {
+    width: 390px;
     align-self: stretch;
     height: 280px;
   }

src/views/copilot/efficiency/components/sub/std/ProgressBar.vue

@@ -6,11 +6,8 @@
 -->
 
 <template>
-  <div class="progress-bar" :data-title="title" :data-rate="dataRate">
+  <div class="progress-bar" :data-title="titleYear" :data-rate="number">
-    <div
+    <div class="progress-bar__rate" :style="{ width: dataRate == '-' ? 0 : dataRate }"></div>
-      class="progress-bar__rate"
-      :style="{ width: dataRate == '-' ? 0 : dataRate }"
-    ></div>
   </div>
 </template>
 
@@ -23,23 +20,52 @@ export default {
       type: Number,
       default: 0,
     },
-    total: {
+    target: {
       type: Number,
       default: 0,
     },
+    goodNumber: {
+      type: Number,
+      default:0
+    },
+    componentYield: {
+      type: Number,
+      default:0
+    },
+    period: {
+      type: String,
+      default:'日',
+    },
     title: {
       type: String,
       default: "",
     },
+    city: {
+      type: String,
+      default:""
+    }
   },
   data() {
-    return {};
+    return {
+      number: 0,
+      titleYear:'',
+    };
   },
   computed: {
     dataRate() {
-      return this.total == 0
+      if ((this.period === '年' || this.period === '月') && this.target != 0) {
+        // console.log(this.componentYield)
+        this.titleYear = this.title + '  ' + `${(this.target * 100).toFixed(0)}%`
+      } else {
+        this.titleYear = this.title
+      }
+      this.number = this.value == 0
         ? "-"
-        : `${(parseFloat(this.value / this.total) * 100).toFixed(0)}%`;
+        : `${(this.value * 100).toFixed(0)}%`
+      // console.log(this.period)
+      return this.value == 0
+        ? "-"
+        : this.value >1 ? 100 + '%' :`${(this.value * 100).toFixed(0)}%`
     },
   },
   methods: {},
@@ -69,7 +95,7 @@ export default {
     color: #fff;
     position: absolute;
     bottom: -200%;
-    right: 0;
+    right: 10px;
     font-size: 12px;
   }
 

src/views/copilot/efficiency/components/sub/std/StdRateItem.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-07 10:25:10
- * @LastEditTime: 2024-05-09 09:04:07
+ * @LastEditTime: 2024-05-11 15:05:17
  * @LastEditors: zhp
  * @Description:
 -->
@@ -10,29 +10,29 @@
   <div v-if="period == '日'" class="std-rate-item">
     <CityName :value="city.name" />
     <div class="std-rate-item__value">
-      <ProgressBar :title="title" :total="city.target" :value="city.target" />
+      <ProgressBar :period="period" :title="title" :value="city.current" />
       <!-- <ProgressBar title="24年累计" :total="city.target" :value="city.thisYear" /> -->
     </div>
   </div>
   <div v-else-if="period == '周'" class="std-rate-item">
     <CityName :value="city.name" />
     <div class="std-rate-item__value">
-      <ProgressBar :title="title" :total="city.target" :value="city.target" />
+      <ProgressBar :period="period" :title="title" :value="city.current" />
       <!-- <ProgressBar title="24年累计" :total="city.target" :value="city.thisYear" /> -->
     </div>
   </div>
   <div v-else-if="period == '月'" class="std-rate-item">
     <CityName :value="city.name" />
     <div class="std-rate-item__value">
-      <ProgressBar :title="titleEnd" :total="city.target" :value="city.target" />
+      <ProgressBar :period="period" :title="titleEnd" :target="city.target" :value="city.current" />
-      <ProgressBar :title="title" :total="city.target" :value="city.thisYear" />
+      <ProgressBar :period="period" :title="title" :value="city.previous" />
     </div>
   </div>
   <div v-else="period == '年'" class="std-rate-item">
     <CityName :value="city.name" />
     <div class="std-rate-item__value">
-      <ProgressBar :title="titleEnd" :total="city.target" :value="city.target" />
+      <ProgressBar :period="period" :title="titleEnd" :target="city.target" :value="city.current" />
-      <ProgressBar :title="title" :total="city.target" :value="city.thisYear" />
+      <ProgressBar :period="period" :title="title" :value="city.previous" />
     </div>
   </div>
 </template>

src/views/copilot/energy/components/ElecCost.vue

@@ -7,31 +7,30 @@
 
 <template>
   <LineChartBase
-    v-if="1"
     :legend="legend"
     :series="series"
     :xAxis="xAxis"
     in="elecCost"
     class="elec-cost"
   />
-  <BarChartBase
+  <!-- <BarChartBase
     v-else
     :legend="legend"
     :series="series"
     :xAxis="xAxis"
     in="elecCost"
     class="elec-cost"
-  />
+  /> -->
 </template>
 
 <script>
-import BarChartBaseVue from "@/views/copilot/components/BarChartBase.vue";
+// import BarChartBaseVue from "@/views/copilot/components/BarChartBase.vue";
 import LineChartBaseVue from "@/views/copilot/components/LineChartBase.vue";
 
 export default {
   name: "ElecCost",
   components: {
-    BarChartBase: BarChartBaseVue,
+    // BarChartBase: BarChartBaseVue,
     LineChartBase: LineChartBaseVue,
   },
   props: {
@@ -44,38 +43,47 @@ export default {
     // 城市数组的顺序必须是固定的
     const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
     return {
+      legend: [
+        { label: '瑞昌', color: "#8167F6" },
+        { label: '邯郸', color: "#2760FF" },
+        { label: '株洲', color: "#5996F7" },
+        { label: '佳木斯', color: "#8BC566" },
+        { label: '成都', color: "#11FAF0" },
+        { label: '凯盛', color: "#F3C000" },
+        { label: '蚌埠', color: "#F38600" },
+      ],
       xAxis: cities,
     };
   },
   computed: {
-    legend() {
+    // legend() {
-      switch (this.period) {
+    //   switch (this.period) {
-        case "日":
+    //     case "日":
-          return [{ label: "昨日", color: "#12f7f1" }];
+    //       return [{ label: "昨日", color: "#12f7f1" }];
-        case "周":
+    //     case "周":
-          return [{ label: "本周", color: "#12f7f1" }];
+    //       return [{ label: "本周", color: "#12f7f1" }];
-        case "月": {
+    //     case "月": {
-          const year = new Date().getFullYear();
+    //       const year = new Date().getFullYear();
-          const month = new Date().getMonth() + 1;
+    //       const month = new Date().getMonth() + 1;
-          return [
+    //       return [
-            { label: `${year - 1}年${month}月`, color: "#12f7f1" },
+    //         { label: `${year - 1}年${month}月`, color: "#12f7f1" },
-            { label: `${year}年${month}月`, color: "#58adfa" },
+    //         { label: `${year}年${month}月`, color: "#58adfa" },
-          ];
+    //       ];
-        }
+    //     }
-        case "年": {
+    //     case "年": {
-          const year = new Date().getFullYear();
+    //       const year = new Date().getFullYear();
-          return [
+    //       return [
-            { label: `${year - 1}年`, color: "#12f7f1" },
+    //         { label: `${year - 1}年`, color: "#12f7f1" },
-            { label: `${year}年`, color: "#58adfa" },
+    //         { label: `${year}年`, color: "#58adfa" },
-          ];
+    //       ];
-        }
+    //     }
-        default:
+    //     default:
-          return [
+    //       return [
-            { label: `${year - 1}年`, color: "#12f7f1" },
+    //         { label: `${year - 1}年`, color: "#12f7f1" },
-            { label: `${year}年`, color: "#58adfa" },
+    //         { label: `${year}年`, color: "#58adfa" },
-          ];
+    //       ];
-      }
+    //   }
-    },
+    // },
     series() {
       const { ftoInvest } = this.$store.getters.copilot.yield;
       let dataList = null;

src/views/copilot/energy/components/NatGas.vue

@@ -7,7 +7,6 @@
 
 <template>
   <BarChartBase
-    :legend="legend"
     :series="series"
     :xAxis="xAxis"
     in="nat-gas"
@@ -16,7 +15,7 @@
 </template>
 
 <script>
-import BarChartBase from "@/views/copilot/components/BarChartBase.vue";
+import BarChartBase from "@/views/copilot/components/gasBarChartBase.vue";
 
 export default {
   name: "NatGasCost",
@@ -35,34 +34,34 @@ export default {
     };
   },
   computed: {
-    legend() {
+    // legend() {
-      switch (this.period) {
+    //   switch (this.period) {
-        case "日":
+    //     case "日":
-          return [{ label: "昨日", color: "#12f7f1" }];
+    //       return [{ label: "昨日", color: "#12f7f1" }];
-        case "周":
+    //     case "周":
-          return [{ label: "本周", color: "#12f7f1" }];
+    //       return [{ label: "本周", color: "#12f7f1" }];
-        case "月": {
+    //     case "月": {
-          const year = new Date().getFullYear();
+    //       const year = new Date().getFullYear();
-          const month = new Date().getMonth() + 1;
+    //       const month = new Date().getMonth() + 1;
-          return [
+    //       return [
-            { label: `${year - 1}年${month}月`, color: "#12f7f1" },
+    //         { label: `${year - 1}年${month}月`, color: "#12f7f1" },
-            { label: `${year}年${month}月`, color: "#58adfa" },
+    //         { label: `${year}年${month}月`, color: "#58adfa" },
-          ];
+    //       ];
-        }
+    //     }
-        case "年": {
+    //     case "年": {
-          const year = new Date().getFullYear();
+    //       const year = new Date().getFullYear();
-          return [
+    //       return [
-            { label: `${year - 1}年`, color: "#12f7f1" },
+    //         { label: `${year - 1}年`, color: "#12f7f1" },
-            { label: `${year}年`, color: "#58adfa" },
+    //         { label: `${year}年`, color: "#58adfa" },
-          ];
+    //       ];
-        }
+    //     }
-        default:
+    //     default:
-          return [
+    //       return [
-            { label: `${year - 1}年`, color: "#12f7f1" },
+    //         { label: `${year - 1}年`, color: "#12f7f1" },
-            { label: `${year}年`, color: "#58adfa" },
+    //         { label: `${year}年`, color: "#58adfa" },
-          ];
+    //       ];
-      }
+    //   }
-    },
+    // },
     series() {
       const { ftoInvest } = this.$store.getters.copilot.yield;
       let dataList = null;

src/views/copilot/energy/components/WaterCost.vue

@@ -7,31 +7,30 @@
 
 <template>
   <LineChartBase
-    v-if="0"
     :legend="legend"
     :series="series"
     :xAxis="xAxis"
     in="waterCost"
     class="water-cost"
   />
-  <BarChartBase
+  <!-- <BarChartBase
     v-else
     :legend="legend"
     :series="series"
     :xAxis="xAxis"
     in="waterCost"
     class="water-cost"
-  />
+  /> -->
 </template>
 
 <script>
-import BarChartBaseVue from "@/views/copilot/components/BarChartBase.vue";
+// import BarChartBaseVue from "@/views/copilot/components/BarChartBase.vue";
-import LineChartBaseVue from "@/views/copilot/components/LineChartBase.vue";
+import LineChartBaseVue from "@/views/copilot/components/LineChartWater.vue";
 
 export default {
   name: "WaterCost",
   components: {
-    BarChartBase: BarChartBaseVue,
+    // BarChartBase: BarChartBaseVue,
     LineChartBase: LineChartBaseVue,
   },
   props: {
@@ -45,37 +44,46 @@ export default {
     const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
     return {
       xAxis: cities,
+      legend: [
+        { label: '瑞昌', color: "#8167F6" },
+        { label: '邯郸', color: "#2760FF" },
+        { label: '株洲', color: "#5996F7" },
+        { label: '佳木斯', color: "#8BC566" },
+        { label: '成都', color: "#11FAF0" },
+        { label: '凯盛', color: "#F3C000" },
+        { label: '蚌埠', color: "#F38600" },
+      ],
     };
   },
   computed: {
-    legend() {
+    // legend() {
-      switch (this.period) {
+    //   switch (this.period) {
-        case "日":
+    //     case "日":
-          return [{ label: "昨日", color: "#12f7f1" }];
+    //       return [{ label: "昨日", color: "#12f7f1" }];
-        case "周":
+    //     case "周":
-          return [{ label: "本周", color: "#12f7f1" }];
+    //       return [{ label: "本周", color: "#12f7f1" }];
-        case "月": {
+    //     case "月": {
-          const year = new Date().getFullYear();
+    //       const year = new Date().getFullYear();
-          const month = new Date().getMonth() + 1;
+    //       const month = new Date().getMonth() + 1;
-          return [
+    //       return [
-            { label: `${year - 1}年${month}月`, color: "#12f7f1" },
+    //         { label: `${year - 1}年${month}月`, color: "#12f7f1" },
-            { label: `${year}年${month}月`, color: "#58adfa" },
+    //         { label: `${year}年${month}月`, color: "#58adfa" },
-          ];
+    //       ];
-        }
+    //     }
-        case "年": {
+    //     case "年": {
-          const year = new Date().getFullYear();
+    //       const year = new Date().getFullYear();
-          return [
+    //       return [
-            { label: `${year - 1}年`, color: "#12f7f1" },
+    //         { label: `${year - 1}年`, color: "#12f7f1" },
-            { label: `${year}年`, color: "#58adfa" },
+    //         { label: `${year}年`, color: "#58adfa" },
-          ];
+    //       ];
-        }
+    //     }
-        default:
+    //     default:
-          return [
+    //       return [
-            { label: `${year - 1}年`, color: "#12f7f1" },
+    //         { label: `${year - 1}年`, color: "#12f7f1" },
-            { label: `${year}年`, color: "#58adfa" },
+    //         { label: `${year}年`, color: "#58adfa" },
-          ];
+    //       ];
-      }
+    //   }
-    },
+    // },
     series() {
       const { ftoInvest } = this.$store.getters.copilot.yield;
       let dataList = null;

src/views/copilot/energy/components/sub/monitor/MonitorItem.vue

@@ -10,7 +10,9 @@
     <div class="cities">
       <CopilotButtons :options="cities" @update:active="handleCityUpdate" />
     </div>
+    <div style="padding: 0 30px;width: 90%;">
       <div class="chart" ref="chart"></div>
+    </div>
     <div class="legend" v-if="1">
       <div class="legend-item" v-for="(lgd,index) in legendList" :key="lgd.name">
         <div>
@@ -108,6 +110,8 @@ export default {
   }
 
   .chart {
+    margin-left: 5%;
+    width: 290px;
     align-self: stretch;
     height: 280px;
   }

src/views/copilot/energy/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-07 10:25:10
- * @LastEditTime: 2024-05-09 08:41:11
+ * @LastEditTime: 2024-05-13 15:48:10
  * @LastEditors: zhp
  * @Description:
 -->
@@ -56,8 +56,11 @@ export default {
       immediate: true,
     },
   },
+
   methods: {
     fetchData(period = "日") {
+      // console.log(this.width);
+      // console.log('sidebar', this.$store.getters.sidebar);
       console.log(`效率驾驶舱，获取${period}数据`);
       this.$store.dispatch("copilot/initCopilot", {
         period,

src/views/copilot/energy/options/monitorOptions.js

@@ -1,7 +1,7 @@
 /*
  * @Author: zhp
  * @Date: 2024-05-07 10:25:10
- * @LastEditTime: 2024-05-08 10:30:06
+ * @LastEditTime: 2024-05-10 16:10:49
  * @LastEditors: zhp
  * @Description:
  */
@@ -51,7 +51,7 @@ export default function ({
       name: 'Access From',
       type: 'pie',
     	// center: ['50%', '40%'],
-			radius: ['60%', '90%'],
+			radius: ['50%', '80%'],
       avoidLabelOverlap: false,
         labelLine: {
         show: false

src/views/copilot/factoryData/components/Energy.vue

@@ -1,6 +1,8 @@
 <template>
+  <div>
     <div class="left-chart-base">
-    <div class="legend">
+      <NotMsg v-show="notMsg" />
+      <div class="legend" v-show="!notMsg">
         <span
           v-for="item in legend"
           :key="item.label"
@@ -9,28 +11,27 @@
           >{{ item.label }}</span
         >
       </div>
-    <div id="factoryEnergyChart" style="width: 100%; height: 100%"></div>
+      <div
+        id="factoryEnergyChart"
+        style="width: 100%; height: 100%"
+        v-show="!notMsg"
+      ></div>
+    </div>
   </div>
 </template>
 <script>
 import { debounce } from "@/utils/debounce";
 import * as echarts from "echarts";
+import NotMsg from "./../../components/NotMsg";
 export default {
   name: "Energy",
+  components: { NotMsg },
   props: {
-    vHeight: {
-      type: Number,
-      default: 34,
-    },
     legend: {
       type: Array,
       required: true,
     },
-    xAxis: {
+    energyCockpits: {
-      type: Array,
-      required: true,
-    },
-    series: {
       type: Array,
       required: true,
     },
@@ -39,6 +40,7 @@ export default {
     return {
       isFullscreen: false,
       actualOptions: null,
+      notMsg: false,
       chart: "",
       options: {
         color: ["#FFD160", "#2760FF", "#12FFF5"],
@@ -65,7 +67,7 @@ export default {
             color: "rgba(255, 255, 255, 0.7)",
             fontSize: 12,
           },
-          data: this.xAxis,
+          data: [],
         },
         yAxis: [
           {
@@ -190,6 +192,11 @@ export default {
       },
     };
   },
+  computed: {
+    isOpen() {
+      return this.$store.getters.sidebar.opened;
+    },
+  },
   watch: {
     /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
     // isFullscreen(val) {
@@ -216,6 +223,12 @@ export default {
     //   this.actualOptions = actualOptions;
     //   this.initOptions(actualOptions);
     // },
+    energyCockpits() {
+      this.initChart();
+    },
+    isOpen(val) {
+      this.canvasReset();
+    },
   },
   mounted() {
     // if (screenfull.isEnabled) {
@@ -241,17 +254,63 @@ export default {
       }, 500)();
     },
     initChart() {
+      let energyxAxis = [];
+      let n = 0;
+      let seriesArr = [
+        {
+          name: "水",
+          energyType: 1,
+          data: [],
+        },
+        {
+          name: "电",
+          energyType: 2,
+          data: [],
+        },
+        {
+          name: "气",
+          energyType: 3,
+          data: [],
+        },
+      ];
+      if (this.energyCockpits.length > 0) {
+        this.notMsg = false;
+        let dataArr = this.energyCockpits.map((item) => {
+          return item.groupName;
+        });
+        energyxAxis = Array.from(new Set(dataArr));
+        n = energyxAxis.length;
+        seriesArr[0].data = Array.from({ length: n }, () => 0);
+        seriesArr[1].data = Array.from({ length: n }, () => 0);
+        seriesArr[2].data = Array.from({ length: n }, () => 0);
+        for (let i = 0; i < this.energyCockpits.length; i++) {
+          for (let j = 0; j < energyxAxis.length; j++) {
+            if (this.energyCockpits[i].groupName === energyxAxis[j]) {
+              if (this.energyCockpits[i].energyType === 1) {
+                seriesArr[0].data[j] = this.energyCockpits[i].totalEnergyValue;
+              } else if (this.energyCockpits[i].energyType === 2) {
+                seriesArr[1].data[j] = this.energyCockpits[i].totalEnergyValue;
+              } else if (this.energyCockpits[i].energyType === 3) {
+                seriesArr[2].data[j] = this.energyCockpits[i].totalEnergyValue;
+              }
+            }
+          }
+        }
+      } else {
+        this.notMsg = true;
+      }
       if (this.chart) {
         this.chart.dispose();
       }
       this.chart = echarts.init(document.getElementById("factoryEnergyChart"));
       const actualOptions = JSON.parse(JSON.stringify(this.options));
-      actualOptions.series[0].data = this.series[0].data;
+      actualOptions.xAxis.data = energyxAxis;
-      actualOptions.series[0].name = this.series[0].name;
+      actualOptions.series[0].data = seriesArr[0].data;
-      actualOptions.series[1].data = this.series[1].data;
+      actualOptions.series[0].name = seriesArr[0].name;
-      actualOptions.series[1].name = this.series[1].name;
+      actualOptions.series[1].data = seriesArr[1].data;
-      actualOptions.series[2].data = this.series[2].data;
+      actualOptions.series[1].name = seriesArr[1].name;
-      actualOptions.series[2].name = this.series[2].name;
+      actualOptions.series[2].data = seriesArr[2].data;
+      actualOptions.series[2].name = seriesArr[2].name;
       this.actualOptions = actualOptions;
       this.chart.setOption(actualOptions);
     },

src/views/copilot/factoryData/components/Order.vue

@@ -1,8 +1,9 @@
 <template>
   <dv-scroll-board
-    v-if="aa"
+    v-if="showTable"
     :config="config"
     style="width: 100%; height: 100%"
+    ref="orderScrollBoard"
   />
 </template>
 <script>
@@ -11,7 +12,7 @@ export default {
   name: "Order",
   data() {
     return {
-      aa: true,
+      showTable: true,
       config: {
         header: ["序号", "客户名称", "产品名称", "计划加工数量", "加工进度"],
         headerBGC: "rgba(0, 106, 205, 0.22)",
@@ -26,51 +27,87 @@ export default {
       },
     };
   },
-  mounted() {
+  props: {
-    this.getTableList();
+    prodOrder: {
+      type: Array,
+      default: [],
+    },
+  },
+  computed: {
+    isOpen() {
+      return this.$store.getters.sidebar.opened;
+    },
+  },
+  watch: {
+    isOpen(val) {
       this.tableReset();
+    },
+    prodOrder() {
+      this.getTableList();
+    },
+  },
+  mounted() {
     window.addEventListener("resize", this.tableReset);
   },
   methods: {
     tableReset() {
-      this.aa = false;
+      this.showTable = false;
       debounce(() => {
         this.initTable();
       }, 500)();
     },
     initTable() {
-      this.aa = true;
+      this.showTable = true;
     },
     getTableList() {
-      let _this = this;
+      let outArr = [];
-      setTimeout(
+      if (this.prodOrder.length > 0) {
-        (function name() {
+        for (let i = 0; i < this.prodOrder.length; i++) {
-          _this.config.data = [
+          let arr = [];
-            ["1", "行1列1", "行1列2", "行1列3", "50%"],
+          arr.push(i + 1);
-            ["2", "行2列1", "行2列2", "行2列3", "50%"],
+          arr.push(
-            ["3", "行3列1", "行3列2", "行3列3", "50%"],
+            `<span title=${this.prodOrder[i].customerName || ""}>${
-            ["4", "行4列1", "行4列2", "行4列3", "50%"],
+              this.prodOrder[i].customerName || ""
-            ["5", "行5列1", "行5列2", "行5列3", "50%"],
+            }</span>`
-            ["6", "行6列1", "行6列2", "行6列3", "50%"],
-            ["7", "行7列1", "行7列2", "行7列3", "50%"],
-            ["8", "行8列1", "行8列2", "行8列3", "50%"],
-            ["9", "行9列1", "行9列2", "行9列3", "50%"],
-            ["10", "行10列1", "行10列2", "行10列3", "50%"],
-            ["11", "行11列1", "行11列2", "行11列3", "50%"],
-            ["12", "行12列1", "行12列2", "行12列3", "50%"],
-            ["13", "行13列1", "行13列2", "行13列3", "50%"],
-            ["14", "行14列1", "行14列2", "行14列3", "50%"],
-            ["15", "行15列1", "行15列2", "行15列3", "50%"],
-            ["16", "行16列1", "行16列2", "行16列3", "50%"],
-            ["17", "行17列1", "行17列2", "行17列3", "50%"],
-            ["18", "行18列1", "行18列2", "行18列3", "50%"],
-            ["19", "行19列1", "行19列2", "行19列3", "50%"],
-            ["20", "行20列1", "行20列2", "行20列3", "50%"],
-          ];
-        })(),
-        2000
           );
-      this.initTable();
+          arr.push(
+            `<span title=${this.prodOrder[i].productName || ""}>${
+              this.prodOrder[i].productName || ""
+            }</span>`
+          );
+          arr.push(
+            `<span title=${this.prodOrder[i].plannedProductionQuantity || ""}>${
+              this.prodOrder[i].plannedProductionQuantity || ""
+            }</span>`
+          );
+          arr.push(`<span style="display:inline-block;width:45px;">${
+            this.prodOrder[i].productionProgress
+              ? this.prodOrder[i].productionProgress.toFixed(0) + "%"
+              : "0%"
+          }</span>
+            <div style="display:inline-block;height:20px;margin-top:-5px;vertical-align:middle;">
+            <svg xmlns="http://www.w3.org/200/svg" height="20" width="20">
+              <circle cx="10" cy="10" r="6" fill="none" stroke="#283851" stroke-width="4" stroke-linecap="round"/>
+              <circle style="transform-origin: center;transform: rotate(-90deg);" id="J_progress_bar" cx="10" cy="10" r="6" fill="none" stroke="#47FF27" stroke-width="4" stroke-dasharray="${
+                this.prodOrder[i].productionProgress
+                  ? this.prodOrder[i].productionProgress.toFixed(0) *
+                      37.68 *
+                      0.01 +
+                    "," +
+                    (1 -
+                      this.prodOrder[i].productionProgress.toFixed(0) * 0.01) *
+                      37.68
+                  : 0 + "," + 37.68
+              }"/>
+            </svg>
+          </div>`);
+          outArr.push(arr);
+        }
+        this.config.data = outArr;
+      } else {
+        this.config.data = [];
+      }
+      this.$refs["orderScrollBoard"].updateRows(outArr);
     },
   },
 };

src/views/copilot/factoryData/components/ProdMonitor.vue

@@ -14,7 +14,7 @@
       </div>
       <div class="right-box">
         <span class="type">投入数量</span>
-        <span class="num">8391222</span>
+        <span class="num">{{ prodFto[0] ? prodFto[0].chipInput : 0 }}</span>
       </div>
     </div>
     <div class="std-box">
@@ -33,7 +33,9 @@
           </div>
           <div>
             <span class="type">良品数量</span>
-            <span class="type-name">740</span>
+            <span class="type-name">{{
+              msgObj.stand.goodNumber ? msgObj.stand.goodNumber : 0
+            }}</span>
           </div>
         </div>
       </div>
@@ -41,11 +43,15 @@
         <div class="separate">
           <div>
             <span class="type">生产数量</span>
-            <span class="num">783</span>
+            <span class="num">{{
+              msgObj.stand.outputNumber ? msgObj.stand.outputNumber : 0
+            }}</span>
           </div>
           <div>
             <span class="type1">良品率</span>
-            <span class="num">96%</span>
+            <span class="num"
+              >{{ msgObj.stand.yieldRate ? msgObj.stand.yieldRate : 0 }}%</span
+            >
           </div>
         </div>
       </div>
@@ -66,7 +72,9 @@
           </div>
           <div>
             <span class="type">良品数量</span>
-            <span class="type-name">740</span>
+            <span class="type-name">{{
+              msgObj.chip.goodNumber ? msgObj.chip.goodNumber : 0
+            }}</span>
           </div>
         </div>
       </div>
@@ -74,11 +82,15 @@
         <div class="separate">
           <div>
             <span class="type">生产数量</span>
-            <span class="num">783</span>
+            <span class="num">{{
+              msgObj.chip.outputNumber ? msgObj.chip.outputNumber : 0
+            }}</span>
           </div>
           <div>
             <span class="type1">良品率</span>
-            <span class="num">96%</span>
+            <span class="num"
+              >{{ msgObj.chip.yieldRate ? msgObj.chip.yieldRate : 0 }}%</span
+            >
           </div>
         </div>
       </div>
@@ -99,7 +111,9 @@
           </div>
           <div>
             <span class="type">良品数量</span>
-            <span class="type-name">740</span>
+            <span class="type-name">{{
+              msgObj.bipv.goodNumber ? msgObj.bipv.goodNumber : 0
+            }}</span>
           </div>
         </div>
       </div>
@@ -107,11 +121,15 @@
         <div class="separate">
           <div>
             <span class="type">生产数量</span>
-            <span class="num">783</span>
+            <span class="num">{{
+              msgObj.bipv.outputNumber ? msgObj.bipv.outputNumber : 0
+            }}</span>
           </div>
           <div>
             <span class="type1">良品率</span>
-            <span class="num">96%</span>
+            <span class="num"
+              >{{ msgObj.bipv.yieldRate ? msgObj.bipv.yieldRate : 0 }}%</span
+            >
           </div>
         </div>
       </div>
@@ -121,6 +139,51 @@
 <script>
 export default {
   name: "ProdMonitor",
+  data() {
+    return {
+      msgObj: {
+        stand: {},
+        chip: {},
+        bipv: {},
+      },
+    };
+  },
+  props: {
+    prodOutPut: {
+      type: Array,
+      default: [],
+    },
+    prodFto: {
+      type: Array,
+      default: [],
+    },
+  },
+  watch: {
+    prodOutPut() {
+      this.makeData();
+    },
+  },
+  mounted() {
+    this.makeData();
+  },
+  methods: {
+    makeData() {
+      this.msgObj.chip = {};
+      this.msgObj.stand = {};
+      this.msgObj.bipv = {};
+      if (this.prodOutPut.length > 0) {
+        this.prodOutPut.map((item) => {
+          if (item.glassType === 0) {
+            this.msgObj.chip = item;
+          } else if (item.glassType === 1) {
+            this.msgObj.stand = item;
+          } else if (item.glassType === 2) {
+            this.msgObj.bipv = item;
+          }
+        });
+      }
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>

src/views/copilot/factoryData/components/Store.vue

@@ -1,36 +1,43 @@
 <template>
-  <div id="factoryStoreChart" style="width: 100%; height: 100%"></div>
+  <div>
+    <NotMsg v-show="notMsg" />
+    <div
+      id="factoryStoreChart"
+      style="width: 100%; height: 100%"
+      v-show="!notMsg"
+    ></div>
+  </div>
 </template>
 <script>
 import { debounce } from "@/utils/debounce";
 import * as echarts from "echarts";
+import NotMsg from "./../../components/NotMsg";
 export default {
   name: "Store",
+  components: { NotMsg },
   props: {
-    vHeight: {
+    stock: {
-      type: Number,
+      type: Object,
-      default: 34,
-    },
-    xAxis: {
-      type: Array,
       required: true,
     },
-    series: {
+  },
-      type: Array,
+  computed: {
-      required: true,
+    isOpen() {
+      return this.$store.getters.sidebar.opened;
     },
   },
   data() {
     return {
       isFullscreen: false,
       actualOptions: null,
+      notMsg: false,
       chart: "",
       options: {
         grid: {
           left: "3%",
           right: "1%",
           bottom: "0",
-          top: "10%",
+          top: "15%",
           containLabel: true,
         },
         tooltip: {},
@@ -47,7 +54,7 @@ export default {
             color: "rgba(255, 255, 255, 0.7)",
             fontSize: 12,
           },
-          data: this.xAxis,
+          data: [],
         },
         yAxis: {
           name: "单位/片",
@@ -116,18 +123,11 @@ export default {
     };
   },
   watch: {
-    series(val) {
+    stock(val) {
-      if (!val) {
+      this.initChart();
-        this.initOptions(this.options);
+    },
-        return;
+    isOpen(val) {
-      }
+      this.canvasReset();
-      const actualOptions = JSON.parse(JSON.stringify(this.options));
-      actualOptions.series[0].data = val[0].data;
-      actualOptions.series[0].name = val[0].name;
-      actualOptions.series[1].data = val[1].data;
-      actualOptions.series[1].name = val[1].name;
-      this.actualOptions = actualOptions;
-      this.initOptions(actualOptions);
     },
   },
   mounted() {
@@ -154,13 +154,23 @@ export default {
       }, 500)();
     },
     initChart() {
+      let xAxis = Object.keys(this.stock) || [];
+      let data = [];
+      if (xAxis.length > 0) {
+        this.notMsg = false;
+        data = xAxis.map((item) => {
+          return this.stock[item].total;
+        });
+      } else {
+        this.notMsg = true;
+      }
       if (this.chart) {
         this.chart.dispose();
       }
       this.chart = echarts.init(document.getElementById("factoryStoreChart"));
       const actualOptions = JSON.parse(JSON.stringify(this.options));
-      actualOptions.series[0].data = this.series[0].data;
+      actualOptions.xAxis.data = xAxis;
-      actualOptions.series[0].name = this.series[0].name;
+      actualOptions.series[0].data = data;
       this.actualOptions = actualOptions;
       this.chart.setOption(actualOptions);
     },

src/views/copilot/factoryData/index.vue

@@ -5,27 +5,23 @@
       :companyId="companyId"
       :period="period"
       @updateCompany="updateCompany"
-      @update:period="period = $event"
+      @update:period="updatePeriod"
     />
     <div class="factory-section">
       <section class="top flex">
         <db-container title="生产监控" icon="prod">
-          <prod-monitor />
+          <prod-monitor :prodOutPut="prodOutPut" :prodFto="prodFto" />
         </db-container>
         <db-container title="仓库监控.当前" icon="store">
-          <store :series="series" :xAxis="xAxis" />
+          <store :stock="stock" />
         </db-container>
       </section>
       <section class="bottom flex">
         <db-container title="能源监控" icon="energy">
-          <energy
+          <energy :legend="energyLegend" :energyCockpits="energyCockpits" />
-            :legend="energyLegend"
-            :series="energySeries"
-            :xAxis="energyxAxis"
-          />
         </db-container>
         <db-container title="订单监控" icon="order">
-          <order />
+          <order :prodOrder="prodOrder" />
         </db-container>
       </section>
     </div>
@@ -41,7 +37,7 @@ import Energy from "./components/Energy.vue";
 import Order from "./components/Order.vue";
 import { cockpitDataMonitor } from "@/api/produceData";
 export default {
-  name: "FactoryData",
+  name: "factoryData",
   components: {
     FactoryDataHeader,
     DbContainer: Container,
@@ -51,89 +47,47 @@ export default {
     Order,
   },
   data() {
-    const year = new Date().getFullYear();
-    const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
     return {
-      companyId: "1",
+      companyId: 0,
       companyName: "瑞昌中建材光电材料有限公司",
-      period: "日",
+      period: 1,
-
+      // 接口获取的数据
+      prodOutPut: [], //生产
+      prodFto: [], //生产
+      stock: {}, //仓库
+      energyCockpits: [], //能源
+      prodOrder: [], //订单
       energyLegend: [
         { label: "电", color: "#FFD160" },
         { label: "水", color: "#2760FF" },
         { label: "气", color: "#12FFF5" },
       ],
-      energyxAxis: [3.1, 3.2, 3.3, 3.4, 3.5, 3.6, 3.7],
-
-      legend: [
-        { label: `${year - 1}年`, color: "#12f7f1" },
-        // { label: `${year}年`, color: "#58adfa" },
-      ],
-      xAxis: cities,
     };
   },
-  computed: {
-    energySeries() {
-      return [
-        {
-          name: "电",
-          data: Array.from({ length: 7 }, () =>
-            Math.floor(Math.random() * 1000)
-          ),
-        },
-        {
-          name: "水",
-          data: Array.from({ length: 7 }, () =>
-            Math.floor(Math.random() * 1000)
-          ),
-        },
-        {
-          name: "气",
-          data: Array.from({ length: 7 }, () =>
-            Math.floor(Math.random() * 1000)
-          ),
-        },
-      ];
-    },
-    series() {
-      // const ftoInvest = this.$store.getters.home.ftoInvest;
-      // if (!ftoInvest || !ftoInvest.current || !ftoInvest.previous) {
-      return [
-        {
-          name: "2023年",
-          data: Array.from({ length: 7 }, () =>
-            Math.floor(Math.random() * 1000)
-          ),
-        },
-      ];
-      // }
-
-      // return [
-      //   {
-      //     name: `${new Date().getFullYear() - 1}年`,
-      //     data: ftoInvest.previous,
-      //   },
-      //   {
-      //     name: `${new Date().getFullYear()}年`,
-      //     data: ftoInvest.current,
-      //   },
-      // ];
-    },
-  },
   mounted() {
-    this.getMes1();
+    this.getMes();
   },
   methods: {
     updateCompany(obj) {
       this.companyId = obj.companyId;
       this.companyName = obj.companyName;
+      this.getMes();
     },
-    getMes1() {
+    updatePeriod(val) {
+      this.period = val;
+      this.getMes();
+    },
+    getMes() {
       cockpitDataMonitor({
-        factorys: [1],
+        factorys: [this.companyId],
-        date: 4,
+        date: this.period,
       }).then((res) => {
         console.log(res);
+        this.prodOutPut = res.data.prodOutputMonitorShDO || [];
+        this.prodFto = res.data.prodOutputFtoDO || [];
+        this.stock = res.data.stockDO || {};
+        this.energyCockpits = res.data.energyCockpitsDO || [];
+        this.prodOrder = res.data.prodOrderMonitorDO || [];
       });
     },
   },

src/views/copilot/yield/components/sub/city/CityData.vue

@@ -72,6 +72,7 @@ export default {
       );
     },
     cities() {
+      // console.log('ztl')
       let getterName = "";
       switch (this.dataSource) {
         case "标准组件产出":

src/views/dashboard/components/Header.vue

@@ -9,8 +9,8 @@
   <header class="dashboard-header">
     <div class="btn" :style="btnStyle" @click="toggleFullscreen"></div>
     <h1>发电玻璃智能管控平台地图总览</h1>
-    <span class="side left">晴转多云 14℃</span>
+    <span class="side left">{{ this.weather }}</span>
-    <span class="side right">23:12|星期一|2023.12.13</span>
+    <span class="side right"> {{ times }} </span>
   </header>
 </template>
 
@@ -25,7 +25,10 @@ export default {
   props: {},
   data() {
     return {
+      weatherInterval:null,
       isFullscreen: false,
+      times: null,
+      weather:'',
     };
   },
   computed: {
@@ -37,7 +40,72 @@ export default {
       };
     },
   },
+  mounted() {
+    this.getTimes()
+    this.weatherInterval = setInterval(() => {
+      this,this.getWeather()
+    }, 1000)
+  },
+  destroyed() {
+    // console.log(1111)
+    clearInterval(this.weatherInterval)
+  },
   methods: {
+    getTimes() {
+      setInterval(this.getTimesInterval, 1000);
+    },
+    getTimesInterval: function () {
+      var now = new Date();
+      var weekDay = now.getDay();
+      var weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
+      var week = weeks[weekDay]
+      let _this = this;
+      let year = new Date().getFullYear(); //获取当前时间的年份
+      let month = new Date().getMonth() + 1; //获取当前时间的月份
+      let day = new Date().getDate(); //获取当前时间的天数
+      let hours = new Date().getHours(); //获取当前时间的小时
+      let minutes = new Date().getMinutes(); //获取当前时间的分数
+      // let seconds = new Date().getSeconds(); //获取当前时间的秒数
+      //当小于 10 的是时候，在前面加 0
+      if (hours < 10) {
+        hours = '0' + hours;
+      }
+      if (minutes < 10) {
+        minutes = '0' + minutes;
+      }
+      // if (seconds < 10) {
+      //   seconds = '0' + seconds;
+      // }
+      //拼接格式化当前时间
+      this.times =
+        hours +
+        ':' +
+      minutes +
+      ' | ' +
+      week +
+      ' | ' +
+        year +
+        '.' +
+        month +
+        '.' +
+        day
+    },
+    getWeather() {
+      fetch(`https://restapi.amap.com/v3/weather/weatherInfo?key=a20a2093715deb9bd68e423c34a2ac3c&city=110108`, {
+        method: 'get',
+        extensions: 'base',
+        //  output:'JSON'
+      }).then((response) => {
+        // 注意此处
+        response.json().then((data) => {
+          console.log(data)
+          this.weather = data.lives[0].weather + '   ' + data.lives[0].temperature + '℃'
+        }).catch((err) => {
+          this.weather = '晴  25℃'
+          console.log(err);
+        })
+      })
+    },
     toggleFullscreen() {
       screenfull.toggle();
       this.isFullscreen = !this.isFullscreen;

src/views/system/loginlog/index.vue

@@ -2,63 +2,138 @@
   <div class="app-container">
     <doc-alert title="系统日志" url="https://doc.iocoder.cn/system-log/" />
     <!-- 搜索工作栏 -->
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
       <el-form-item label="登录地址" prop="userIp">
-        <el-input v-model="queryParams.userIp" placeholder="请输入登录地址" clearable style="width: 240px;"
+        <el-input
-                  @keyup.enter.native="handleQuery"/>
+          v-model="queryParams.userIp"
+          placeholder="请输入登录地址"
+          clearable
+          style="width: 240px"
+          @keyup.enter.native="handleQuery"
+        />
       </el-form-item>
       <el-form-item label="用户名称" prop="username">
-        <el-input v-model="queryParams.username" placeholder="请输入用户名称" clearable style="width: 240px;"
+        <el-input
-                  @keyup.enter.native="handleQuery"/>
+          v-model="queryParams.username"
+          placeholder="请输入用户名称"
+          clearable
+          style="width: 240px"
+          @keyup.enter.native="handleQuery"
+        />
       </el-form-item>
       <el-form-item label="状态" prop="status">
-        <el-select v-model="queryParams.status" placeholder="结果" clearable style="width: 240px">
+        <el-select
+          v-model="queryParams.status"
+          placeholder="结果"
+          clearable
+          style="width: 240px"
+        >
           <el-option :key="true" label="成功" :value="true" />
           <el-option :key="false" label="失败" :value="false" />
         </el-select>
       </el-form-item>
       <el-form-item label="登录时间" prop="createTime">
-        <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+        <el-date-picker
-                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+          v-model="queryParams.createTime"
+          style="width: 240px"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="['00:00:00', '23:59:59']"
+        />
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery"
+          >搜索</el-button
+        >
         <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
+        <el-button
-                   v-hasPermi="['system:login-log:export']">导出</el-button>
+          type="warning"
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['system:login-log:export']"
+          >导出</el-button
+        >
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
     </el-row>
 
     <el-table v-loading="loading" :data="list">
       <el-table-column label="访问编号" align="center" prop="id" />
-      <el-table-column label="日志类型" align="center" prop="logType" width="120">
+      <el-table-column
+        label="日志类型"
+        align="center"
+        prop="logType"
+        width="120"
+      >
         <template v-slot="scope">
-          <dict-tag :type="DICT_TYPE.SYSTEM_LOGIN_TYPE" :value="scope.row.logType" />
+          <dict-tag
+            :type="DICT_TYPE.SYSTEM_LOGIN_TYPE"
+            :value="scope.row.logType"
+          />
         </template>
       </el-table-column>
       <el-table-column label="用户名称" align="center" prop="username" />
-      <el-table-column label="登录地址" align="center" prop="userIp" width="130" :show-overflow-tooltip="true" />
+      <el-table-column
-      <el-table-column label="userAgent" align="center" prop="userAgent" width="400" :show-overflow-tooltip="true" />
+        label="登录地址"
+        align="center"
+        prop="userIp"
+        width="130"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        label="userAgent"
+        align="center"
+        prop="userAgent"
+        width="400"
+        :show-overflow-tooltip="true"
+      />
       <el-table-column label="结果" align="center" prop="status">
         <template v-slot="scope">
-          <dict-tag :type="DICT_TYPE.SYSTEM_LOGIN_RESULT" :value="scope.row.result" />
+          <dict-tag
+            :type="DICT_TYPE.SYSTEM_LOGIN_RESULT"
+            :value="scope.row.result"
+          />
         </template>
       </el-table-column>
-      <el-table-column label="登录日期" align="center" prop="loginTime" width="180">
+      <el-table-column
+        label="登录日期"
+        align="center"
+        prop="loginTime"
+        width="180"
+      >
         <template v-slot="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
       </el-table-column>
     </el-table>
 
-    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+    <pagination
-                @pagination="getList"/>
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNo"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
   </div>
 </template>
 
@@ -86,8 +161,8 @@ export default {
         userIp: undefined,
         username: undefined,
         status: undefined,
-        createTime: []
+        createTime: [],
-      }
+      },
     };
   },
   created() {
@@ -97,12 +172,11 @@ export default {
     /** 查询登录日志列表 */
     getList() {
       this.loading = true;
-      list(this.queryParams).then(response => {
+      list(this.queryParams).then((response) => {
         this.list = response.data.list;
         this.total = response.data.total;
         this.loading = false;
-        }
+      });
-      );
     },
     /** 搜索按钮操作 */
     handleQuery() {
@@ -116,19 +190,31 @@ export default {
     },
     /** 导出按钮操作 */
     handleExport() {
-      this.$modal.confirm('是否确认导出所有操作日志数据项?').then(() => {
+      this.$modal
+        .confirm("是否确认导出所有操作日志数据项?")
+        .then(() => {
           // 处理查询参数
           let params = { ...this.queryParams };
           params.pageNo = undefined;
           params.pageSize = undefined;
           this.exportLoading = true;
           return exportLoginLog(params);
-        }).then(response => {
+        })
-          this.$download.excel(response, '登录日志.xls');
+        .then((response) => {
+          this.$download.excel(response, "登录日志.xls");
           this.exportLoading = false;
-      }).catch(() => {});
+        })
-    }
+        .catch(() => {});
-  }
+    },
+  },
 };
 </script>
-
+<style lang="scss" scoped>
+.app-container {
+  width: 100%;
+  height: calc(100vh - 120px - 8px);
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 8px;
+}
+</style>

src/views/system/menu/index.vue

@@ -1,59 +1,146 @@
 <template>
   <div class="app-container">
-    <doc-alert title="功能权限" url="https://doc.iocoder.cn/resource-permission" />
+    <doc-alert
+      title="功能权限"
+      url="https://doc.iocoder.cn/resource-permission"
+    />
     <doc-alert title="菜单路由" url="https://doc.iocoder.cn/vue2/route/" />
     <!-- 搜索工作栏 -->
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+    >
       <el-form-item label="菜单名称" prop="name">
-        <el-input v-model="queryParams.name" placeholder="请输入菜单名称" clearable @keyup.enter.native="handleQuery"/>
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入菜单名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
       </el-form-item>
       <el-form-item label="状态" prop="status">
-        <el-select v-model="queryParams.status" placeholder="菜单状态" clearable>
+        <el-select
-          <el-option v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
+          v-model="queryParams.status"
+          placeholder="菜单状态"
+          clearable
+        >
+          <el-option
+            v-for="dict in statusDictDatas"
+            :key="parseInt(dict.value)"
+            :label="dict.label"
+            :value="parseInt(dict.value)"
+          />
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery"
+          >搜索</el-button
+        >
         <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+        <el-button
-                   v-hasPermi="['system:menu:create']">新增</el-button>
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['system:menu:create']"
+          >新增</el-button
+        >
       </el-col>
       <el-col :span="1.5">
-        <el-button type="info" plain icon="el-icon-sort" size="mini" @click="toggleExpandAll">展开/折叠</el-button>
+        <el-button
+          type="info"
+          plain
+          icon="el-icon-sort"
+          size="mini"
+          @click="toggleExpandAll"
+          >展开/折叠</el-button
+        >
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
     </el-row>
 
-    <el-table v-if="refreshTable" v-loading="loading" :data="menuList" row-key="id" :default-expand-all="isExpandAll"
+    <el-table
-              :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
+      v-if="refreshTable"
-      <el-table-column prop="name" label="菜单名称" :show-overflow-tooltip="true" width="250"></el-table-column>
+      v-loading="loading"
+      :data="menuList"
+      row-key="id"
+      :default-expand-all="isExpandAll"
+      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+    >
+      <el-table-column
+        prop="name"
+        label="菜单名称"
+        :show-overflow-tooltip="true"
+        width="250"
+      ></el-table-column>
       <el-table-column prop="icon" label="图标" align="center" width="100">
         <template v-slot="scope">
           <svg-icon :icon-class="scope.row.icon" />
         </template>
       </el-table-column>
       <el-table-column prop="sort" label="排序" width="60"></el-table-column>
-      <el-table-column prop="permission" label="权限标识" :show-overflow-tooltip="true" />
+      <el-table-column
-      <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true" />
+        prop="permission"
-      <el-table-column prop="componentName" label="组件名称" :show-overflow-tooltip="true" />
+        label="权限标识"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        prop="component"
+        label="组件路径"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        prop="componentName"
+        label="组件名称"
+        :show-overflow-tooltip="true"
+      />
       <el-table-column prop="status" label="状态" width="80">
         <template v-slot="scope">
           <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
         <template v-slot="scope">
-          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+          <el-button
-                     v-hasPermi="['system:menu:update']">修改</el-button>
+            size="mini"
-          <el-button size="mini" type="text" icon="el-icon-plus" @click="handleAdd(scope.row)"
+            type="text"
-                     v-hasPermi="['system:menu:create']">新增</el-button>
+            icon="el-icon-edit"
-          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+            @click="handleUpdate(scope.row)"
-                     v-hasPermi="['system:menu:delete']">删除</el-button>
+            v-hasPermi="['system:menu:update']"
+            >修改</el-button
+          >
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-plus"
+            @click="handleAdd(scope.row)"
+            v-hasPermi="['system:menu:create']"
+            >新增</el-button
+          >
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['system:menu:delete']"
+            >删除</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
@@ -64,26 +151,55 @@
         <el-row>
           <el-col :span="24">
             <el-form-item label="上级菜单">
-              <treeselect v-model="form.parentId" :options="menuOptions" :normalizer="normalizer" :show-count="true"
+              <treeselect
-                          placeholder="选择上级菜单"/>
+                v-model="form.parentId"
+                :options="menuOptions"
+                :normalizer="normalizer"
+                :show-count="true"
+                placeholder="选择上级菜单"
+              />
             </el-form-item>
           </el-col>
           <el-col :span="24">
             <el-form-item label="菜单类型" prop="type">
               <el-radio-group v-model="form.type">
-                <el-radio v-for="dict in menuTypeDictDatas" :key="parseInt(dict.value)" :label="parseInt(dict.value)">
+                <el-radio
-                  {{dict.label}}</el-radio>
+                  v-for="dict in menuTypeDictDatas"
+                  :key="parseInt(dict.value)"
+                  :label="parseInt(dict.value)"
+                >
+                  {{ dict.label }}</el-radio
+                >
               </el-radio-group>
             </el-form-item>
           </el-col>
           <el-col :span="24">
             <el-form-item v-if="form.type !== 3" label="菜单图标">
-              <el-popover placement="bottom-start" width="460" trigger="click" @show="$refs['iconSelect'].reset()">
+              <el-popover
+                placement="bottom-start"
+                width="460"
+                trigger="click"
+                @show="$refs['iconSelect'].reset()"
+              >
                 <IconSelect ref="iconSelect" @selected="selected" />
-                <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly>
+                <el-input
-                  <svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon"
+                  slot="reference"
-                            style="height: 32px;width: 16px;"/>
+                  v-model="form.icon"
-                  <i v-else slot="prefix" class="el-icon-search el-input__icon" />
+                  placeholder="点击选择图标"
+                  readonly
+                >
+                  <svg-icon
+                    v-if="form.icon"
+                    slot="prefix"
+                    :icon-class="form.icon"
+                    class="el-input__icon"
+                    style="height: 32px; width: 16px"
+                  />
+                  <i
+                    v-else
+                    slot="prefix"
+                    class="el-icon-search el-input__icon"
+                  />
                 </el-input>
               </el-popover>
             </el-form-item>
@@ -95,13 +211,20 @@
           </el-col>
           <el-col :span="12">
             <el-form-item label="显示排序" prop="sort">
-              <el-input-number v-model="form.sort" controls-position="right" :min="0" />
+              <el-input-number
+                v-model="form.sort"
+                controls-position="right"
+                :min="0"
+              />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item v-if="form.type !== 3" label="路由地址" prop="path">
               <span slot="label">
-                <el-tooltip content="访问的路由地址，如：`user`。如需外网地址时，则以 `http(s)://` 开头" placement="top">
+                <el-tooltip
+                  content="访问的路由地址，如：`user`。如需外网地址时，则以 `http(s)://` 开头"
+                  placement="top"
+                >
                   <i class="el-icon-question" />
                 </el-tooltip>
                 路由地址
@@ -112,42 +235,65 @@
           <el-col :span="12">
             <el-form-item v-if="form.type !== 1" label="权限标识">
               <span slot="label">
-                <el-tooltip content="Controller 方法上的权限字符，如：@PreAuthorize(`@ss.hasPermission('system:user:list')`)" placement="top">
+                <el-tooltip
+                  content="Controller 方法上的权限字符，如：@PreAuthorize(`@ss.hasPermission('system:user:list')`)"
+                  placement="top"
+                >
                   <i class="el-icon-question" />
                 </el-tooltip>
                 权限字符
               </span>
-							<el-input v-model="form.permission" placeholder="请权限标识" maxlength="50" />
+              <el-input
+                v-model="form.permission"
+                placeholder="请权限标识"
+                maxlength="50"
+              />
             </el-form-item>
           </el-col>
           <el-col :span="12" v-if="form.type === 2">
             <el-form-item label="组件路径" prop="component">
-              <el-input v-model="form.component" placeholder="例如说：system/user/index" />
+              <el-input
+                v-model="form.component"
+                placeholder="例如说：system/user/index"
+              />
             </el-form-item>
           </el-col>
           <el-col :span="12" v-if="form.type === 2">
             <el-form-item label="组件名称" prop="componentName">
-							<el-input v-model="form.componentName" placeholder="例如说：SystemUser" />
+              <el-input
+                v-model="form.componentName"
+                placeholder="例如说：SystemUser"
+              />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="菜单状态" prop="status">
               <span slot="label">
-                <el-tooltip content="选择停用时，路由将不会出现在侧边栏，也不能被访问" placement="top">
+                <el-tooltip
+                  content="选择停用时，路由将不会出现在侧边栏，也不能被访问"
+                  placement="top"
+                >
                   <i class="el-icon-question" />
                 </el-tooltip>
                 菜单状态
               </span>
               <el-radio-group v-model="form.status">
-                <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
+                <el-radio
-                          :key="dict.value" :label="parseInt(dict.value)">{{dict.label}}</el-radio>
+                  v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
+                  :key="dict.value"
+                  :label="parseInt(dict.value)"
+                  >{{ dict.label }}</el-radio
+                >
               </el-radio-group>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item v-if="form.type !== 3" label="显示状态">
               <span slot="label">
-                <el-tooltip content="选择隐藏时，路由将不会出现在侧边栏，但仍然可以访问" placement="top">
+                <el-tooltip
+                  content="选择隐藏时，路由将不会出现在侧边栏，但仍然可以访问"
+                  placement="top"
+                >
                   <i class="el-icon-question" />
                 </el-tooltip>
                 是否显示
@@ -161,7 +307,10 @@
           <el-col :span="12">
             <el-form-item v-if="form.type !== 3" label="总是显示">
               <span slot="label">
-                <el-tooltip content="选择不是时，当该菜单只有一个子菜单时，不展示自己，直接展示子菜单" placement="top">
+                <el-tooltip
+                  content="选择不是时，当该菜单只有一个子菜单时，不展示自己，直接展示子菜单"
+                  placement="top"
+                >
                   <i class="el-icon-question" />
                 </el-tooltip>
                 总是显示
@@ -175,7 +324,10 @@
           <el-col :span="12">
             <el-form-item v-if="form.type === 2" label="是否缓存">
               <span slot="label">
-                <el-tooltip content="选择缓存时，则会被 `keep-alive` 缓存，必须填写「组件名称」字段" placement="top">
+                <el-tooltip
+                  content="选择缓存时，则会被 `keep-alive` 缓存，必须填写「组件名称」字段"
+                  placement="top"
+                >
                   <i class="el-icon-question" />
                 </el-tooltip>
                 是否缓存
@@ -197,13 +349,19 @@
 </template>
 
 <script>
-import { listMenu, getMenu, delMenu, addMenu, updateMenu } from "@/api/system/menu";
+import {
+  listMenu,
+  getMenu,
+  delMenu,
+  addMenu,
+  updateMenu,
+} from "@/api/system/menu";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 import IconSelect from "@/components/IconSelect";
 
-import { SystemMenuTypeEnum, CommonStatusEnum } from '@/utils/constants'
+import { SystemMenuTypeEnum, CommonStatusEnum } from "@/utils/constants";
-import { getDictDatas, DICT_TYPE } from '@/utils/dict'
+import { getDictDatas, DICT_TYPE } from "@/utils/dict";
 import { isExternal } from "@/utils/validate";
 
 export default {
@@ -230,24 +388,22 @@ export default {
       // 查询参数
       queryParams: {
         name: undefined,
-        visible: undefined
+        visible: undefined,
       },
       // 表单参数
       form: {},
       // 表单校验
       rules: {
         name: [
-          { required: true, message: "菜单名称不能为空", trigger: "blur" }
+          { required: true, message: "菜单名称不能为空", trigger: "blur" },
         ],
         sort: [
-          { required: true, message: "菜单顺序不能为空", trigger: "blur" }
+          { required: true, message: "菜单顺序不能为空", trigger: "blur" },
         ],
         path: [
-          { required: true, message: "路由地址不能为空", trigger: "blur" }
+          { required: true, message: "路由地址不能为空", trigger: "blur" },
         ],
-        status: [
+        status: [{ required: true, message: "状态不能为空", trigger: "blur" }],
-          { required: true, message: "状态不能为空", trigger: "blur" }
-        ]
       },
 
       // 枚举
@@ -255,7 +411,7 @@ export default {
       CommonStatusEnum: CommonStatusEnum,
       // 数据字典
       menuTypeDictDatas: getDictDatas(DICT_TYPE.SYSTEM_MENU_TYPE),
-      statusDictDatas: getDictDatas(DICT_TYPE.COMMON_STATUS)
+      statusDictDatas: getDictDatas(DICT_TYPE.COMMON_STATUS),
     };
   },
   created() {
@@ -269,7 +425,7 @@ export default {
     /** 查询菜单列表 */
     getList() {
       this.loading = true;
-      listMenu(this.queryParams).then(response => {
+      listMenu(this.queryParams).then((response) => {
         this.menuList = this.handleTree(response.data, "id");
         this.loading = false;
       });
@@ -282,14 +438,14 @@ export default {
       return {
         id: node.id,
         label: node.name,
-        children: node.children
+        children: node.children,
       };
     },
     /** 查询菜单下拉树结构 */
     getTreeselect() {
-      listMenu().then(response => {
+      listMenu().then((response) => {
         this.menuOptions = [];
-        const menu = { id: 0, name: '主类目', children: [] };
+        const menu = { id: 0, name: "主类目", children: [] };
         menu.children = this.handleTree(response.data, "id");
         this.menuOptions.push(menu);
       });
@@ -348,7 +504,7 @@ export default {
     handleUpdate(row) {
       this.reset();
       this.getTreeselect();
-      getMenu(row.id).then(response => {
+      getMenu(row.id).then((response) => {
         this.form = response.data;
         this.open = true;
         this.title = "修改菜单";
@@ -356,34 +512,36 @@ export default {
     },
     /** 提交按钮 */
     submitForm: function () {
-      this.$refs["form"].validate(valid => {
+      this.$refs["form"].validate((valid) => {
         if (valid) {
           // 若权限类型为目录或者菜单时，进行 path 的校验，避免后续拼接出来的路由无法跳转
-          if (this.form.type === SystemMenuTypeEnum.DIR
+          if (
-            || this.form.type === SystemMenuTypeEnum.MENU) {
+            this.form.type === SystemMenuTypeEnum.DIR ||
+            this.form.type === SystemMenuTypeEnum.MENU
+          ) {
             // 如果是外链，则不进行校验
-            const path = this.form.path
+            const path = this.form.path;
             if (!isExternal(path)) {
               // 父权限为根节点，path 必须以 / 开头
-              if (this.form.parentId === 0 && path.charAt(0) !== '/') {
+              if (this.form.parentId === 0 && path.charAt(0) !== "/") {
-                this.$modal.msgSuccess('前端必须以 / 开头')
+                this.$modal.msgSuccess("前端必须以 / 开头");
-                return
+                return;
-              } else if (this.form.parentId !== 0 && path.charAt(0) === '/') {
+              } else if (this.form.parentId !== 0 && path.charAt(0) === "/") {
-                this.$modal.msgSuccess('前端不能以 / 开头')
+                this.$modal.msgSuccess("前端不能以 / 开头");
-                return
+                return;
               }
             }
           }
 
           // 提交
           if (this.form.id !== undefined) {
-            updateMenu(this.form).then(response => {
+            updateMenu(this.form).then((response) => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
             });
           } else {
-            addMenu(this.form).then(response => {
+            addMenu(this.form).then((response) => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
               this.getList();
@@ -394,13 +552,26 @@ export default {
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      this.$modal.confirm('是否确认删除名称为"' + row.name + '"的数据项?').then(function() {
+      this.$modal
+        .confirm('是否确认删除名称为"' + row.name + '"的数据项?')
+        .then(function () {
           return delMenu(row.id);
-        }).then(() => {
+        })
+        .then(() => {
           this.getList();
           this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+        })
-    }
+        .catch(() => {});
-  }
+    },
+  },
 };
 </script>
+<style lang="scss" scoped>
+.app-container {
+  width: 100%;
+  height: calc(100vh - 120px - 8px);
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 8px;
+}
+</style>

src/views/system/operatelog/index.vue

@@ -1,62 +1,143 @@
 <template>
   <div class="app-container">
-    <doc-alert title="系统日志" url="https://doc.iocoder.cn/system-log/" />
+    <!-- <doc-alert title="系统日志" url="https://doc.iocoder.cn/system-log/" /> -->
     <!-- 搜索工作栏 -->
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <search-bar
+      :formConfigs="formConfig"
+      ref="searchBarForm"
+      @headBtnClick="buttonClick"
+    />
+    <!-- <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
       <el-form-item label="系统模块" prop="module">
-        <el-input v-model="queryParams.module" placeholder="请输入系统模块" clearable style="width: 240px;"
+        <el-input
-                  @keyup.enter.native="handleQuery"/>
+          v-model="queryParams.module"
+          placeholder="请输入系统模块"
+          clearable
+          style="width: 240px"
+          @keyup.enter.native="handleQuery"
+        />
       </el-form-item>
       <el-form-item label="操作人员" prop="userNickname">
-        <el-input v-model="queryParams.userNickname" placeholder="请输入操作人员" clearable style="width: 240px;"
+        <el-input
-                  @keyup.enter.native="handleQuery"/>
+          v-model="queryParams.userNickname"
+          placeholder="请输入操作人员"
+          clearable
+          style="width: 240px"
+          @keyup.enter.native="handleQuery"
+        />
       </el-form-item>
       <el-form-item label="类型" prop="type">
-        <el-select v-model="queryParams.type" placeholder="操作类型" clearable style="width: 240px">
+        <el-select
-          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.SYSTEM_OPERATE_TYPE)" :key="parseInt(dict.value)"
+          v-model="queryParams.type"
-                     :label="dict.label" :value="parseInt(dict.value)"/>
+          placeholder="操作类型"
+          clearable
+          style="width: 240px"
+        >
+          <el-option
+            v-for="dict in this.getDictDatas(DICT_TYPE.SYSTEM_OPERATE_TYPE)"
+            :key="parseInt(dict.value)"
+            :label="dict.label"
+            :value="parseInt(dict.value)"
+          />
         </el-select>
       </el-form-item>
       <el-form-item label="状态" prop="status">
-        <el-select v-model="queryParams.success" placeholder="操作状态" clearable style="width: 240px">
+        <el-select
+          v-model="queryParams.success"
+          placeholder="操作状态"
+          clearable
+          style="width: 240px"
+        >
           <el-option :key="true" label="成功" :value="true" />
           <el-option :key="false" label="失败" :value="false" />
         </el-select>
       </el-form-item>
       <el-form-item label="操作时间" prop="startTime">
-        <el-date-picker v-model="queryParams.startTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+        <el-date-picker
-                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+          v-model="queryParams.startTime"
+          style="width: 240px"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="['00:00:00', '23:59:59']"
+        />
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery"
+          >搜索</el-button
+        >
         <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
       </el-form-item>
-    </el-form>
+    </el-form> -->
 
-    <el-row :gutter="10" class="mb8">
+    <!-- <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
+        <el-button
-                   v-hasPermi="['system:operate-log:export']">导出</el-button>
+          type="warning"
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['system:operate-log:export']"
+          >导出</el-button
+        >
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar
-    </el-row>
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
+    </el-row> -->
 
-    <el-table v-loading="loading" :data="list">
+    <!-- 列表 -->
+    <base-table
+      :page="queryParams.pageNo"
+      :limit="queryParams.pageSize"
+      :table-props="tableProps"
+      :table-data="list"
+      :max-height="tableH"
+    >
+      <method-btn
+        v-if="tableBtn.length"
+        slot="handleBtn"
+        :width="230"
+        label="操作"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <!-- <el-table v-loading="loading" :data="list">
       <el-table-column label="日志编号" align="center" prop="id" />
       <el-table-column label="操作模块" align="center" prop="module" />
       <el-table-column label="操作名" align="center" prop="name" width="180" />
       <el-table-column label="操作类型" align="center" prop="type">
         <template v-slot="scope">
-          <dict-tag :type="DICT_TYPE.SYSTEM_OPERATE_TYPE" :value="scope.row.type"/>
+          <dict-tag
+            :type="DICT_TYPE.SYSTEM_OPERATE_TYPE"
+            :value="scope.row.type"
+          />
         </template>
       </el-table-column>
       <el-table-column label="操作人" align="center" prop="userNickname" />
       <el-table-column label="操作结果" align="center" prop="status">
         <template v-slot="scope">
-          <span>{{ scope.row.resultCode === 0 ? '成功' : '失败' }}</span>
+          <span>{{ scope.row.resultCode === 0 ? "成功" : "失败" }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作日期" align="center" prop="startTime" width="180">
+      <el-table-column
+        label="操作日期"
+        align="center"
+        prop="startTime"
+        width="180"
+      >
         <template v-slot="scope">
           <span>{{ parseTime(scope.row.startTime) }}</span>
         </template>
@@ -66,19 +147,38 @@
           <span>{{ scope.row.duration }} ms</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
         <template v-slot="scope">
-          <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row,scope.index)"
+          <el-button
-                     v-hasPermi="['system:operate-log:query']">详细</el-button>
+            size="mini"
+            type="text"
+            icon="el-icon-view"
+            @click="handleView(scope.row, scope.index)"
+            v-hasPermi="['system:operate-log:query']"
+            >详细</el-button
+          >
         </template>
       </el-table-column>
-    </el-table>
+    </el-table> -->
 
-    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+    <pagination
-                @pagination="getList" />
+      :page.sync="queryParams.pageNo"
+      :limit.sync="queryParams.pageSize"
+      :total="total"
+      @pagination="getList"
+    />
 
     <!-- 操作日志详细 -->
-    <el-dialog title="访问日志详细" :visible.sync="open" width="700px" append-to-body>
+    <el-dialog
+      title="访问日志详细"
+      :visible.sync="open"
+      width="700px"
+      append-to-body
+    >
       <el-form ref="form" :model="form" label-width="100px" size="mini">
         <el-row>
           <el-col :span="24">
@@ -88,24 +188,35 @@
             <el-form-item label="链路追踪：">{{ form.traceId }}</el-form-item>
           </el-col>
           <el-col :span="24">
-            <el-form-item label="用户信息：">{{ form.userId }} | {{ form.userNickname }} | {{ form.userIp }} | {{ form.userAgent}} </el-form-item>
+            <el-form-item label="用户信息："
+              >{{ form.userId }} | {{ form.userNickname }} | {{ form.userIp }} |
+              {{ form.userAgent }}
+            </el-form-item>
           </el-col>
           <el-col :span="24">
             <el-form-item label="操作信息：">
               {{ form.module }} | {{ form.name }}
-              <dict-tag :type="DICT_TYPE.SYSTEM_OPERATE_TYPE" :value="form.type"/>
+              <dict-tag
-              <br /> {{ form.content }}
+                :type="DICT_TYPE.SYSTEM_OPERATE_TYPE"
-              <br /> {{ form.exts }}
+                :value="form.type"
+              />
+              <br />
+              {{ form.content }} <br />
+              {{ form.exts }}
             </el-form-item>
           </el-col>
           <el-col :span="24">
-            <el-form-item label="请求信息：">{{ form.requestMethod }} | {{ form.requestUrl }} </el-form-item>
+            <el-form-item label="请求信息："
+              >{{ form.requestMethod }} | {{ form.requestUrl }}
+            </el-form-item>
           </el-col>
           <el-col :span="24">
             <el-form-item label="方法名：">{{ form.javaMethod }}</el-form-item>
           </el-col>
           <el-col :span="24">
-            <el-form-item label="方法参数：">{{ form.javaMethodArgs }}</el-form-item>
+            <el-form-item label="方法参数：">{{
+              form.javaMethodArgs
+            }}</el-form-item>
           </el-col>
           <el-col :span="24">
             <el-form-item label="开始时间：">
@@ -114,8 +225,12 @@
           </el-col>
           <el-col :span="12">
             <el-form-item label="操作结果：">
-              <div v-if="form.resultCode === 0">正常 | {{ form.resultData}} </div>
+              <div v-if="form.resultCode === 0">
-              <div v-else-if="form.resultCode > 0">失败 | {{ form.resultCode }} || {{ form.resultMsg}}</div>
+                正常 | {{ form.resultData }}
+              </div>
+              <div v-else-if="form.resultCode > 0">
+                失败 | {{ form.resultCode }} || {{ form.resultMsg }}
+              </div>
             </el-form-item>
           </el-col>
         </el-row>
@@ -129,11 +244,100 @@
 
 <script>
 import { listOperateLog, exportOperateLog } from "@/api/system/operatelog";
-
+import tableHeightMixin from "@/mixins/tableHeightMixin";
+const tableProps = [
+  {
+    prop: "code",
+    label: "角色编码",
+    minWidth: 140,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "name",
+    label: "角色名称",
+    minWidth: 140,
+    showOverflowtooltip: true,
+  },
+  // {
+  //   prop: "status",
+  //   label: "状态",
+  //   minWidth: 100,
+  //   subcomponent: statusBtn,
+  // },
+  {
+    prop: "remark",
+    label: "角色描述",
+    minWidth: 140,
+    showOverflowtooltip: true,
+  },
+];
 export default {
   name: "SystemOperateLog",
+  mixins: [tableHeightMixin],
   data() {
     return {
+      formConfig: [
+        {
+          type: "input",
+          label: "系统模块",
+          placeholder: "系统模块",
+          param: "module",
+        },
+        {
+          type: "input",
+          label: "操作人员",
+          placeholder: "操作人员",
+          param: "userNickname",
+        },
+        {
+          type: "select",
+          label: "类型",
+          selectOptions: this.getDictDatas(this.DICT_TYPE.SYSTEM_OPERATE_TYPE),
+          labelField: "label",
+          valueField: "value",
+          param: "type",
+        },
+        {
+          type: "select",
+          label: "状态",
+          selectOptions: [
+            { id: true, name: "成功" },
+            { id: false, name: "失败" },
+          ],
+          param: "success",
+        },
+        {
+          type: "datePicker",
+          label: "操作时间",
+          dateType: "daterange",
+          format: "yyyy-MM-dd",
+          valueFormat: "yyyy-MM-dd HH:mm:ss",
+          rangeSeparator: "-",
+          startPlaceholder: "开始日期",
+          endPlaceholder: "结束日期",
+          param: "startTime",
+          defaultSelect: [],
+          defaultTime: ["00:00:00", "23:59:59"],
+          width: 250,
+        },
+        {
+          type: "button",
+          btnName: "查询",
+          name: "search",
+          color: "primary",
+        },
+        {
+          type: "separate",
+        },
+        {
+          type: "button",
+          btnName: "导出",
+          name: "export",
+          color: "primary",
+          plain: true,
+        },
+      ],
+      tableProps,
       // 遮罩层
       loading: true,
       // 导出遮罩层
@@ -144,6 +348,12 @@ export default {
       total: 0,
       // 表格数据
       list: [],
+      tableBtn: [
+        {
+          type: "detail",
+          btnName: "详情",
+        },
+      ],
       // 是否显示弹出层
       open: false,
       // 类型数据字典
@@ -153,12 +363,12 @@ export default {
       // 查询参数
       queryParams: {
         pageNo: 1,
-        pageSize: 10,
+        pageSize: 20,
         module: undefined,
         userNickname: undefined,
         businessType: undefined,
-        status: undefined,
+        success: undefined,
-        startTime: []
+        startTime: [],
       },
     };
   },
@@ -169,12 +379,11 @@ export default {
     /** 查询登录日志 */
     getList() {
       this.loading = true;
-      listOperateLog(this.queryParams).then( response => {
+      listOperateLog(this.queryParams).then((response) => {
         this.list = response.data.list;
         this.total = response.data.total;
         this.loading = false;
-        }
+      });
-      );
     },
     /** 搜索按钮操作 */
     handleQuery() {
@@ -193,19 +402,46 @@ export default {
     },
     /** 导出按钮操作 */
     handleExport() {
-      this.$modal.confirm('是否确认导出所有操作日志数据项?').then(() => {
+      this.$modal
+        .confirm("是否确认导出所有操作日志数据项?")
+        .then(() => {
           // 处理查询参数
           let params = { ...this.queryParams };
           params.pageNo = undefined;
           params.pageSize = undefined;
           this.exportLoading = true;
           return exportOperateLog(params);
-        }).then(response => {
+        })
-          this.$download.excel(response, '操作日志.xls');
+        .then((response) => {
+          this.$download.excel(response, "操作日志.xls");
           this.exportLoading = false;
-      }).catch(() => {});
+        })
-    }
+        .catch(() => {});
+    },
+    buttonClick(val) {
+      if (val.btnName === "search") {
+        this.queryParams.module = val.module;
+        this.queryParams.userNickname = val.userNickname;
+        this.queryParams.type = val.type;
+        this.queryParams.success = val.success;
+        this.queryParams.startTime = val.startTime;
+        this.getList();
+      } else {
+        this.handleExport();
       }
+    },
+    handleClick(val) {
+      this.handleView(val.data);
+    },
+  },
 };
 </script>
-
+<style lang="scss" scoped>
+.app-container {
+  width: 100%;
+  height: calc(100vh - 120px - 8px);
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 8px;
+}
+</style>

src/views/system/post/index.vue

@@ -1,162 +1,243 @@
 <template>
-  <div class="user-manager">
+  <div class="app-container">
-    <InPageLeftNav />
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-    <div
+      <el-form-item label="岗位编码" prop="code">
-      class="table-area"
+        <el-input v-model="queryParams.code" placeholder="请输入岗位编码" clearable @keyup.enter.native="handleQuery"/>
-      :class="{
+      </el-form-item>
-        'table-area-w': sidebar.opened,
+      <el-form-item label="岗位名称" prop="name">
-        'table-area-ws': !sidebar.opened,
+        <el-input v-model="queryParams.name" placeholder="请输入岗位名称" clearable @keyup.enter.native="handleQuery"/>
-      }"
+      </el-form-item>
-    >
+      <el-form-item label="状态" prop="status">
-      <SearchBarTop @emitFun="emitFun" />
+        <el-select v-model="queryParams.status" placeholder="岗位状态" clearable>
-      <!-- 列表 -->
+          <el-option v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
-      <base-table
+        </el-select>
-        :page="queryParams.pageNo"
+      </el-form-item>
-        :limit="queryParams.pageSize"
+      <el-form-item>
-        :table-props="tableProps"
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
-        :table-data="list"
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
-        :max-height="tableH"
+      </el-form-item>
-      >
+    </el-form>
-        <method-btn
+
-          v-if="tableBtn.length"
+    <el-row :gutter="10" class="mb8">
-          slot="handleBtn"
+      <el-col :span="1.5">
-          :width="120"
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
-          label="操作"
+                   v-hasPermi="['system:post:create']">新增</el-button>
-          :method-list="tableBtn"
+      </el-col>
-          @clickBtn="handleClick"
+      <el-col :span="1.5">
-        />
+        <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
-      </base-table>
+                   v-hasPermi="['system:post:export']">导出</el-button>
-      <pagination
+      </el-col>
-        :page.sync="queryParams.pageNo"
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-        :limit.sync="queryParams.pageSize"
+    </el-row>
-        :total="total"
+
-        @pagination="getList"
+    <el-table v-loading="loading" :data="postList">
-      />
+      <el-table-column label="岗位编号" align="center" prop="id" />
+      <el-table-column label="岗位编码" align="center" prop="code" />
+      <el-table-column label="岗位名称" align="center" prop="name" />
+      <el-table-column label="岗位排序" align="center" prop="sort" />
+      <el-table-column label="状态" align="center" prop="status">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                     v-hasPermi="['system:post:update']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                     v-hasPermi="['system:post:delete']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+
+    <!-- 添加或修改岗位对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="岗位名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入岗位名称" />
+        </el-form-item>
+        <el-form-item label="岗位编码" prop="code">
+          <el-input v-model="form.code" placeholder="请输入编码名称" />
+        </el-form-item>
+        <el-form-item label="岗位顺序" prop="sort">
+          <el-input-number v-model="form.sort" controls-position="right" :min="0" />
+        </el-form-item>
+        <el-form-item label="岗位状态" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="parseInt(dict.value)">
+              {{dict.label}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
       </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { mapGetters } from "vuex";
+import { listPost, getPost, delPost, addPost, updatePost, exportPost } from "@/api/system/post";
-import InPageLeftNav from "./components/InPageLeftNav";
+
-import SearchBarTop from "./components/SearchBarTop";
+import {CommonStatusEnum} from '@/utils/constants'
-import tableHeightMixin from "@/mixins/tableHeightMixin";
+import { getDictDatas, DICT_TYPE } from '@/utils/dict'
-import { listUser } from "@/api/system/user";
+
-const tableProps = [
-  {
-    prop: "username",
-    label: "用户名",
-    minWidth: 120,
-    showOverflowtooltip: true,
-  },
-  {
-    prop: "email",
-    label: "邮箱",
-    minWidth: 150,
-    showOverflowtooltip: true,
-  },
-  {
-    prop: "mobile",
-    label: "手机号",
-    minWidth: 120,
-  },
-  {
-    prop: "deptName",
-    label: "组织",
-    minWidth: 120,
-  },
-  {
-    prop: "role",
-    label: "角色名称",
-  },
-  {
-    prop: "workno",
-    label: "工号",
-  },
-  {
-    prop: "status",
-    label: "状态",
-  },
-  {
-    prop: "remark",
-    label: "备注",
-    showOverflowtooltip: true,
-  },
-];
 export default {
   name: "SystemPost",
-  components: { InPageLeftNav, SearchBarTop },
-  mixins: [tableHeightMixin],
-  computed: {
-    ...mapGetters(["sidebar"]),
-  },
   data() {
     return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 岗位表格数据
+      postList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
       // 查询参数
       queryParams: {
         pageNo: 1,
-        pageSize: 20,
+        pageSize: 10,
-        name: null,
+        code: undefined,
-        status: null,
+        name: undefined,
-        planFinishTime: [],
+        status: undefined
-      },
-      total: 0,
-      tableProps,
-      list: [{ username: "111" }],
-      tableBtn: [
-        {
-          type: "authorization",
-          btnName: "授权",
-        },
-        {
-          type: "edit",
-          btnName: "编辑",
-        },
-        {
-          type: "delete",
-          btnName: "删除",
       },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        name: [
+          { required: true, message: "岗位名称不能为空", trigger: "blur" }
         ],
+        code: [
+          { required: true, message: "岗位编码不能为空", trigger: "blur" }
+        ],
+        sort: [
+          { required: true, message: "岗位顺序不能为空", trigger: "blur" }
+        ]
+      },
+
+      // 枚举
+      CommonStatusEnum: CommonStatusEnum,
+      // 数据字典
+      statusDictDatas: getDictDatas(DICT_TYPE.COMMON_STATUS)
     };
   },
   created() {
     this.getList();
   },
   methods: {
-    /** 查询用户列表 */
+    /** 查询岗位列表 */
     getList() {
-      listUser(this.queryParams).then((response) => {
+      this.loading = true;
-        this.list = response.data.list;
+      listPost(this.queryParams).then(response => {
+        this.postList = response.data.list;
         this.total = response.data.total;
+        this.loading = false;
       });
     },
-    emitFun(val) {
+    // 取消按钮
-      if (val.btn === "onSearch") {
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: undefined,
+        code: undefined,
+        name: undefined,
+        sort: 0,
+        status: CommonStatusEnum.ENABLE,
+        remark: undefined
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
       this.queryParams.pageNo = 1;
       this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加岗位";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id
+      getPost(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改岗位";
+      });
+    },
+    /** 提交按钮 */
+    submitForm: function() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id !== undefined) {
+            updatePost(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
           } else {
+            addPost(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
           }
+        }
+      });
     },
-    handleClick() {},
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id;
+      this.$modal.confirm('是否确认删除岗位编号为"' + ids + '"的数据项?').then(function() {
+          return delPost(ids);
+        }).then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
     },
+    /** 导出按钮操作 */
+    handleExport() {
+      const queryParams = this.queryParams;
+      this.$modal.confirm('是否确认导出所有岗位数据项?').then(() => {
+          this.exportLoading = true;
+          return exportPost(queryParams);
+        }).then(response => {
+          this.$download.excel(response, '岗位数据.xls');
+          this.exportLoading = false;
+      }).catch(() => {});
+    }
+  }
 };
 </script>
-<style lang="scss" scoped>
-.user-manager {
-  display: flex;
-  .table-area {
-    display: inline-block;
-    height: calc(100vh - 120px - 8px);
-    background-color: #fff;
-    margin-left: 8px;
-    border-radius: 8px;
-    padding: 8px;
-  }
-  .table-area-w {
-    width: calc(100vw - 542px);
-  }
-  .table-area-ws {
-    width: calc(100vw - 348px);
-  }
-}
-</style>

src/views/system/post/index1.vue

@@ -1,243 +0,0 @@
-<template>
-  <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="岗位编码" prop="code">
-        <el-input v-model="queryParams.code" placeholder="请输入岗位编码" clearable @keyup.enter.native="handleQuery"/>
-      </el-form-item>
-      <el-form-item label="岗位名称" prop="name">
-        <el-input v-model="queryParams.name" placeholder="请输入岗位名称" clearable @keyup.enter.native="handleQuery"/>
-      </el-form-item>
-      <el-form-item label="状态" prop="status">
-        <el-select v-model="queryParams.status" placeholder="岗位状态" clearable>
-          <el-option v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
-                   v-hasPermi="['system:post:create']">新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
-                   v-hasPermi="['system:post:export']">导出</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <el-table v-loading="loading" :data="postList">
-      <el-table-column label="岗位编号" align="center" prop="id" />
-      <el-table-column label="岗位编码" align="center" prop="code" />
-      <el-table-column label="岗位名称" align="center" prop="name" />
-      <el-table-column label="岗位排序" align="center" prop="sort" />
-      <el-table-column label="状态" align="center" prop="status">
-        <template v-slot="scope">
-          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
-        </template>
-      </el-table-column>
-      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
-        <template v-slot="scope">
-          <span>{{ parseTime(scope.row.createTime) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template v-slot="scope">
-          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
-                     v-hasPermi="['system:post:update']">修改</el-button>
-          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
-                     v-hasPermi="['system:post:delete']">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
-                @pagination="getList"/>
-
-    <!-- 添加或修改岗位对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="岗位名称" prop="name">
-          <el-input v-model="form.name" placeholder="请输入岗位名称" />
-        </el-form-item>
-        <el-form-item label="岗位编码" prop="code">
-          <el-input v-model="form.code" placeholder="请输入编码名称" />
-        </el-form-item>
-        <el-form-item label="岗位顺序" prop="sort">
-          <el-input-number v-model="form.sort" controls-position="right" :min="0" />
-        </el-form-item>
-        <el-form-item label="岗位状态" prop="status">
-          <el-radio-group v-model="form.status">
-            <el-radio v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="parseInt(dict.value)">
-              {{dict.label}}</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import { listPost, getPost, delPost, addPost, updatePost, exportPost } from "@/api/system/post";
-
-import {CommonStatusEnum} from '@/utils/constants'
-import { getDictDatas, DICT_TYPE } from '@/utils/dict'
-
-export default {
-  name: "SystemPost",
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 导出遮罩层
-      exportLoading: false,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 岗位表格数据
-      postList: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
-      // 查询参数
-      queryParams: {
-        pageNo: 1,
-        pageSize: 10,
-        code: undefined,
-        name: undefined,
-        status: undefined
-      },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-        name: [
-          { required: true, message: "岗位名称不能为空", trigger: "blur" }
-        ],
-        code: [
-          { required: true, message: "岗位编码不能为空", trigger: "blur" }
-        ],
-        sort: [
-          { required: true, message: "岗位顺序不能为空", trigger: "blur" }
-        ]
-      },
-
-      // 枚举
-      CommonStatusEnum: CommonStatusEnum,
-      // 数据字典
-      statusDictDatas: getDictDatas(DICT_TYPE.COMMON_STATUS)
-    };
-  },
-  created() {
-    this.getList();
-  },
-  methods: {
-    /** 查询岗位列表 */
-    getList() {
-      this.loading = true;
-      listPost(this.queryParams).then(response => {
-        this.postList = response.data.list;
-        this.total = response.data.total;
-        this.loading = false;
-      });
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        id: undefined,
-        code: undefined,
-        name: undefined,
-        sort: 0,
-        status: CommonStatusEnum.ENABLE,
-        remark: undefined
-      };
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNo = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加岗位";
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const id = row.id
-      getPost(id).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改岗位";
-      });
-    },
-    /** 提交按钮 */
-    submitForm: function() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          if (this.form.id !== undefined) {
-            updatePost(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addPost(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
-      });
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const ids = row.id;
-      this.$modal.confirm('是否确认删除岗位编号为"' + ids + '"的数据项?').then(function() {
-          return delPost(ids);
-        }).then(() => {
-          this.getList();
-          this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      const queryParams = this.queryParams;
-      this.$modal.confirm('是否确认导出所有岗位数据项?').then(() => {
-          this.exportLoading = true;
-          return exportPost(queryParams);
-        }).then(response => {
-          this.$download.excel(response, '岗位数据.xls');
-          this.exportLoading = false;
-      }).catch(() => {});
-    }
-  }
-};
-</script>

src/views/system/post/index2.vue

@@ -0,0 +1,162 @@
+<template>
+  <div class="user-manager">
+    <InPageLeftNav />
+    <div
+      class="table-area"
+      :class="{
+        'table-area-w': sidebar.opened,
+        'table-area-ws': !sidebar.opened,
+      }"
+    >
+      <SearchBarTop @emitFun="emitFun" />
+      <!-- 列表 -->
+      <base-table
+        :page="queryParams.pageNo"
+        :limit="queryParams.pageSize"
+        :table-props="tableProps"
+        :table-data="list"
+        :max-height="tableH"
+      >
+        <method-btn
+          v-if="tableBtn.length"
+          slot="handleBtn"
+          :width="120"
+          label="操作"
+          :method-list="tableBtn"
+          @clickBtn="handleClick"
+        />
+      </base-table>
+      <pagination
+        :page.sync="queryParams.pageNo"
+        :limit.sync="queryParams.pageSize"
+        :total="total"
+        @pagination="getList"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import InPageLeftNav from "./components/InPageLeftNav";
+import SearchBarTop from "./components/SearchBarTop";
+import tableHeightMixin from "@/mixins/tableHeightMixin";
+import { listUser } from "@/api/system/user";
+const tableProps = [
+  {
+    prop: "username",
+    label: "用户名",
+    minWidth: 120,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "email",
+    label: "邮箱",
+    minWidth: 150,
+    showOverflowtooltip: true,
+  },
+  {
+    prop: "mobile",
+    label: "手机号",
+    minWidth: 120,
+  },
+  {
+    prop: "deptName",
+    label: "组织",
+    minWidth: 120,
+  },
+  {
+    prop: "role",
+    label: "角色名称",
+  },
+  {
+    prop: "workno",
+    label: "工号",
+  },
+  {
+    prop: "status",
+    label: "状态",
+  },
+  {
+    prop: "remark",
+    label: "备注",
+    showOverflowtooltip: true,
+  },
+];
+export default {
+  name: "SystemPost",
+  components: { InPageLeftNav, SearchBarTop },
+  mixins: [tableHeightMixin],
+  computed: {
+    ...mapGetters(["sidebar"]),
+  },
+  data() {
+    return {
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 20,
+        name: null,
+        status: null,
+        planFinishTime: [],
+      },
+      total: 0,
+      tableProps,
+      list: [{ username: "111" }],
+      tableBtn: [
+        {
+          type: "authorization",
+          btnName: "授权",
+        },
+        {
+          type: "edit",
+          btnName: "编辑",
+        },
+        {
+          type: "delete",
+          btnName: "删除",
+        },
+      ],
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询用户列表 */
+    getList() {
+      listUser(this.queryParams).then((response) => {
+        this.list = response.data.list;
+        this.total = response.data.total;
+      });
+    },
+    emitFun(val) {
+      if (val.btn === "onSearch") {
+        this.queryParams.pageNo = 1;
+        this.getList();
+      } else {
+      }
+    },
+    handleClick() {},
+  },
+};
+</script>
+<style lang="scss" scoped>
+.user-manager {
+  display: flex;
+  .table-area {
+    display: inline-block;
+    height: calc(100vh - 120px - 8px);
+    background-color: #fff;
+    margin-left: 8px;
+    border-radius: 8px;
+    padding: 8px;
+  }
+  .table-area-w {
+    width: calc(100vw - 542px);
+  }
+  .table-area-ws {
+    width: calc(100vw - 348px);
+  }
+}
+</style>

src/views/system/user/index.vue

@@ -2,99 +2,275 @@
   <div class="app-container">
     <doc-alert title="用户体系" url="https://doc.iocoder.cn/user-center/" />
     <doc-alert title="三方登陆" url="https://doc.iocoder.cn/social-user/" />
-    <doc-alert title="Excel 导入导出" url="https://doc.iocoder.cn/excel-import-and-export/" />
+    <doc-alert
+      title="Excel 导入导出"
+      url="https://doc.iocoder.cn/excel-import-and-export/"
+    />
     <!-- 搜索工作栏 -->
     <el-row :gutter="20">
       <!--部门数据-->
       <el-col :span="4" :xs="24">
         <div class="head-container">
-          <el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px"/>
+          <el-input
+            v-model="deptName"
+            placeholder="请输入部门名称"
+            clearable
+            size="small"
+            prefix-icon="el-icon-search"
+            style="margin-bottom: 20px"
+          />
         </div>
         <div class="head-container">
-          <el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode"
+          <el-tree
-                   ref="tree" default-expand-all highlight-current @node-click="handleNodeClick"/>
+            :data="deptOptions"
+            :props="defaultProps"
+            :expand-on-click-node="false"
+            :filter-node-method="filterNode"
+            ref="tree"
+            default-expand-all
+            highlight-current
+            @node-click="handleNodeClick"
+          />
         </div>
       </el-col>
       <!--用户数据-->
       <el-col :span="20" :xs="24">
-        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+        <el-form
+          :model="queryParams"
+          ref="queryForm"
+          size="small"
+          :inline="true"
+          v-show="showSearch"
+          label-width="68px"
+        >
           <el-form-item label="用户名称" prop="username">
-            <el-input v-model="queryParams.username" placeholder="请输入用户名称" clearable style="width: 240px"
+            <el-input
-                      @keyup.enter.native="handleQuery"/>
+              v-model="queryParams.username"
+              placeholder="请输入用户名称"
+              clearable
+              style="width: 240px"
+              @keyup.enter.native="handleQuery"
+            />
           </el-form-item>
           <el-form-item label="手机号码" prop="mobile">
-            <el-input v-model="queryParams.mobile" placeholder="请输入手机号码" clearable style="width: 240px"
+            <el-input
-                      @keyup.enter.native="handleQuery"/>
+              v-model="queryParams.mobile"
+              placeholder="请输入手机号码"
+              clearable
+              style="width: 240px"
+              @keyup.enter.native="handleQuery"
+            />
           </el-form-item>
           <el-form-item label="状态" prop="status">
-            <el-select v-model="queryParams.status" placeholder="用户状态" clearable style="width: 240px">
+            <el-select
-              <el-option v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
+              v-model="queryParams.status"
+              placeholder="用户状态"
+              clearable
+              style="width: 240px"
+            >
+              <el-option
+                v-for="dict in statusDictDatas"
+                :key="parseInt(dict.value)"
+                :label="dict.label"
+                :value="parseInt(dict.value)"
+              />
             </el-select>
           </el-form-item>
           <el-form-item label="创建时间" prop="createTime">
-            <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+            <el-date-picker
-              range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+              v-model="queryParams.createTime"
+              style="width: 240px"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              :default-time="['00:00:00', '23:59:59']"
+            />
           </el-form-item>
           <el-form-item>
-            <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+            <el-button type="primary" icon="el-icon-search" @click="handleQuery"
-            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+              >搜索</el-button
+            >
+            <el-button icon="el-icon-refresh" @click="resetQuery"
+              >重置</el-button
+            >
           </el-form-item>
         </el-form>
 
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
-            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+            <el-button
-                       v-hasPermi="['system:user:create']">新增</el-button>
+              type="primary"
+              plain
+              icon="el-icon-plus"
+              size="mini"
+              @click="handleAdd"
+              v-hasPermi="['system:user:create']"
+              >新增</el-button
+            >
           </el-col>
           <el-col :span="1.5">
-            <el-button type="info" icon="el-icon-upload2" size="mini" @click="handleImport"
+            <el-button
-                       v-hasPermi="['system:user:import']">导入</el-button>
+              type="info"
+              icon="el-icon-upload2"
+              size="mini"
+              @click="handleImport"
+              v-hasPermi="['system:user:import']"
+              >导入</el-button
+            >
           </el-col>
           <el-col :span="1.5">
-            <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
+            <el-button
-                       v-hasPermi="['system:user:export']">导出</el-button>
+              type="warning"
+              icon="el-icon-download"
+              size="mini"
+              @click="handleExport"
+              :loading="exportLoading"
+              v-hasPermi="['system:user:export']"
+              >导出</el-button
+            >
           </el-col>
-          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
+          <right-toolbar
+            :showSearch.sync="showSearch"
+            @queryTable="getList"
+            :columns="columns"
+          ></right-toolbar>
         </el-row>
 
         <el-table v-loading="loading" :data="userList">
-          <el-table-column label="用户编号" align="center" key="id" prop="id" v-if="columns[0].visible" />
+          <el-table-column
-          <el-table-column label="用户名称" align="center" key="username" prop="username" v-if="columns[1].visible" :show-overflow-tooltip="true" />
+            label="用户编号"
-          <el-table-column label="用户昵称" align="center" key="nickname" prop="nickname" v-if="columns[2].visible" :show-overflow-tooltip="true" />
+            align="center"
-          <el-table-column label="部门" align="center" key="deptName" prop="dept.name" v-if="columns[3].visible" :show-overflow-tooltip="true" />
+            key="id"
-          <el-table-column label="手机号码" align="center" key="mobile" prop="mobile" v-if="columns[4].visible" width="120" />
+            prop="id"
-          <el-table-column label="状态" key="status" v-if="columns[5].visible" align="center">
+            v-if="columns[0].visible"
+          />
+          <el-table-column
+            label="用户名称"
+            align="center"
+            key="username"
+            prop="username"
+            v-if="columns[1].visible"
+            :show-overflow-tooltip="true"
+          />
+          <el-table-column
+            label="用户昵称"
+            align="center"
+            key="nickname"
+            prop="nickname"
+            v-if="columns[2].visible"
+            :show-overflow-tooltip="true"
+          />
+          <el-table-column
+            label="部门"
+            align="center"
+            key="deptName"
+            prop="dept.name"
+            v-if="columns[3].visible"
+            :show-overflow-tooltip="true"
+          />
+          <el-table-column
+            label="手机号码"
+            align="center"
+            key="mobile"
+            prop="mobile"
+            v-if="columns[4].visible"
+            width="120"
+          />
+          <el-table-column
+            label="状态"
+            key="status"
+            v-if="columns[5].visible"
+            align="center"
+          >
             <template v-slot="scope">
-              <el-switch v-model="scope.row.status" :active-value="0" :inactive-value="1" @change="handleStatusChange(scope.row)" />
+              <el-switch
+                v-model="scope.row.status"
+                :active-value="0"
+                :inactive-value="1"
+                @change="handleStatusChange(scope.row)"
+              />
             </template>
           </el-table-column>
-          <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160">
+          <el-table-column
+            label="创建时间"
+            align="center"
+            prop="createTime"
+            v-if="columns[6].visible"
+            width="160"
+          >
             <template v-slot="scope">
               <span>{{ parseTime(scope.row.createTime) }}</span>
             </template>
           </el-table-column>
-          <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
+          <el-table-column
+            label="操作"
+            align="center"
+            width="160"
+            class-name="small-padding fixed-width"
+          >
             <template v-slot="scope">
-              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+              <el-button
-                         v-hasPermi="['system:user:update']">修改</el-button>
+                size="mini"
-              <el-dropdown  @command="(command) => handleCommand(command, scope.$index, scope.row)"
+                type="text"
-                            v-hasPermi="['system:user:delete', 'system:user:update-password', 'system:permission:assign-user-role']">
+                icon="el-icon-edit"
-                <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
+                @click="handleUpdate(scope.row)"
+                v-hasPermi="['system:user:update']"
+                >修改</el-button
+              >
+              <el-dropdown
+                @command="
+                  (command) => handleCommand(command, scope.$index, scope.row)
+                "
+                v-hasPermi="[
+                  'system:user:delete',
+                  'system:user:update-password',
+                  'system:permission:assign-user-role',
+                ]"
+              >
+                <el-button size="mini" type="text" icon="el-icon-d-arrow-right"
+                  >更多</el-button
+                >
                 <el-dropdown-menu slot="dropdown">
-                  <el-dropdown-item command="handleDelete" v-if="scope.row.id !== 1" size="mini" type="text" icon="el-icon-delete"
+                  <el-dropdown-item
-                                    v-hasPermi="['system:user:delete']">删除</el-dropdown-item>
+                    command="handleDelete"
-                  <el-dropdown-item command="handleResetPwd" size="mini" type="text" icon="el-icon-key"
+                    v-if="scope.row.id !== 1"
-                                    v-hasPermi="['system:user:update-password']">重置密码</el-dropdown-item>
+                    size="mini"
-                  <el-dropdown-item command="handleRole" size="mini" type="text" icon="el-icon-circle-check"
+                    type="text"
-                                    v-hasPermi="['system:permission:assign-user-role']">分配角色</el-dropdown-item>
+                    icon="el-icon-delete"
+                    v-hasPermi="['system:user:delete']"
+                    >删除</el-dropdown-item
+                  >
+                  <el-dropdown-item
+                    command="handleResetPwd"
+                    size="mini"
+                    type="text"
+                    icon="el-icon-key"
+                    v-hasPermi="['system:user:update-password']"
+                    >重置密码</el-dropdown-item
+                  >
+                  <el-dropdown-item
+                    command="handleRole"
+                    size="mini"
+                    type="text"
+                    icon="el-icon-circle-check"
+                    v-hasPermi="['system:permission:assign-user-role']"
+                    >分配角色</el-dropdown-item
+                  >
                 </el-dropdown-menu>
               </el-dropdown>
             </template>
           </el-table-column>
         </el-table>
 
-        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+        <pagination
-                    @pagination="getList"/>
+          v-show="total > 0"
+          :total="total"
+          :page.sync="queryParams.pageNo"
+          :limit.sync="queryParams.pageSize"
+          @pagination="getList"
+        />
       </el-col>
     </el-row>
 
@@ -109,32 +285,59 @@
           </el-col>
           <el-col :span="12">
             <el-form-item label="归属部门" prop="deptId">
-              <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" :clearable="false"
+              <treeselect
-                          placeholder="请选择归属部门" :normalizer="normalizer"/>
+                v-model="form.deptId"
+                :options="deptOptions"
+                :show-count="true"
+                :clearable="false"
+                placeholder="请选择归属部门"
+                :normalizer="normalizer"
+              />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="12">
             <el-form-item label="手机号码" prop="mobile">
-              <el-input v-model="form.mobile" placeholder="请输入手机号码" maxlength="11" />
+              <el-input
+                v-model="form.mobile"
+                placeholder="请输入手机号码"
+                maxlength="11"
+              />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="邮箱" prop="email">
-              <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
+              <el-input
+                v-model="form.email"
+                placeholder="请输入邮箱"
+                maxlength="50"
+              />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="12">
-            <el-form-item v-if="form.id === undefined" label="用户名称" prop="username">
+            <el-form-item
+              v-if="form.id === undefined"
+              label="用户名称"
+              prop="username"
+            >
               <el-input v-model="form.username" placeholder="请输入用户名称" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item v-if="form.id === undefined" label="用户密码" prop="password">
+            <el-form-item
-              <el-input v-model="form.password" placeholder="请输入用户密码" type="password" show-password />
+              v-if="form.id === undefined"
+              label="用户密码"
+              prop="password"
+            >
+              <el-input
+                v-model="form.password"
+                placeholder="请输入用户密码"
+                type="password"
+                show-password
+              />
             </el-form-item>
           </el-col>
         </el-row>
@@ -142,7 +345,12 @@
           <el-col :span="12">
             <el-form-item label="用户性别">
               <el-select v-model="form.sex" placeholder="请选择">
-                <el-option v-for="dict in sexDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
+                <el-option
+                  v-for="dict in sexDictDatas"
+                  :key="parseInt(dict.value)"
+                  :label="dict.label"
+                  :value="parseInt(dict.value)"
+                />
               </el-select>
             </el-form-item>
           </el-col>
@@ -162,7 +370,11 @@
         <el-row>
           <el-col :span="24">
             <el-form-item label="备注">
-              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
+              <el-input
+                v-model="form.remark"
+                type="textarea"
+                placeholder="请输入内容"
+              ></el-input>
             </el-form-item>
           </el-col>
         </el-row>
@@ -174,18 +386,39 @@
     </el-dialog>
 
     <!-- 用户导入对话框 -->
-    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
+    <el-dialog
-      <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
+      :title="upload.title"
-        :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
+      :visible.sync="upload.open"
-        :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
+      width="400px"
+      append-to-body
+    >
+      <el-upload
+        ref="upload"
+        :limit="1"
+        accept=".xlsx, .xls"
+        :headers="upload.headers"
+        :action="upload.url + '?updateSupport=' + upload.updateSupport"
+        :disabled="upload.isUploading"
+        :on-progress="handleFileUploadProgress"
+        :on-success="handleFileSuccess"
+        :auto-upload="false"
+        drag
+      >
         <i class="el-icon-upload"></i>
         <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
         <div class="el-upload__tip text-center" slot="tip">
           <div class="el-upload__tip" slot="tip">
-            <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
+            <el-checkbox v-model="upload.updateSupport" />
+            是否更新已经存在的用户数据
           </div>
           <span>仅允许导入xls、xlsx格式文件。</span>
-          <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
+          <el-link
+            type="primary"
+            :underline="false"
+            style="font-size: 12px; vertical-align: baseline"
+            @click="importTemplate"
+            >下载模板</el-link
+          >
         </div>
       </el-upload>
       <div slot="footer" class="dialog-footer">
@@ -195,7 +428,12 @@
     </el-dialog>
 
     <!-- 分配角色 -->
-    <el-dialog title="分配角色" :visible.sync="openRole" width="500px" append-to-body>
+    <el-dialog
+      title="分配角色"
+      :visible.sync="openRole"
+      width="500px"
+      append-to-body
+    >
       <el-form :model="form" label-width="80px">
         <el-form-item label="用户名称">
           <el-input v-model="form.username" :disabled="true" />
@@ -219,7 +457,6 @@
         <el-button @click="cancelRole">取 消</el-button>
       </div>
     </el-dialog>
-
   </div>
 </template>
 
@@ -233,7 +470,7 @@ import {
   importTemplate,
   listUser,
   resetUserPwd,
-  updateUser
+  updateUser,
 } from "@/api/system/user";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
@@ -282,7 +519,7 @@ export default {
       form: {},
       defaultProps: {
         children: "children",
-        label: "name"
+        label: "name",
       },
       // 用户导入参数
       upload: {
@@ -297,7 +534,7 @@ export default {
         // 设置上传的请求头部
         headers: getBaseHeader(),
         // 上传的地址
-        url: process.env.VUE_APP_BASE_API + '/admin-api/system/user/import'
+        url: process.env.VUE_APP_BASE_API + "/admin-api/system/user/import",
       },
       // 查询参数
       queryParams: {
@@ -307,7 +544,7 @@ export default {
         mobile: undefined,
         status: undefined,
         deptId: undefined,
-        createTime: []
+        createTime: [],
       },
       // 列信息
       columns: [
@@ -317,33 +554,34 @@ export default {
         { key: 3, label: `部门`, visible: true },
         { key: 4, label: `手机号码`, visible: true },
         { key: 5, label: `状态`, visible: true },
-        { key: 6, label: `创建时间`, visible: true }
+        { key: 6, label: `创建时间`, visible: true },
       ],
       // 表单校验
       rules: {
         username: [
-          { required: true, message: "用户名称不能为空", trigger: "blur" }
+          { required: true, message: "用户名称不能为空", trigger: "blur" },
         ],
         nickname: [
-          { required: true, message: "用户昵称不能为空", trigger: "blur" }
+          { required: true, message: "用户昵称不能为空", trigger: "blur" },
         ],
         password: [
-          { required: true, message: "用户密码不能为空", trigger: "blur" }
+          { required: true, message: "用户密码不能为空", trigger: "blur" },
         ],
         email: [
           {
             type: "email",
             message: "'请输入正确的邮箱地址",
-            trigger: ["blur", "change"]
+            trigger: ["blur", "change"],
-          }
+          },
         ],
         mobile: [
           {
-            pattern: /^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/,
+            pattern:
+              /^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/,
             message: "请输入正确的手机号码",
-            trigger: "blur"
+            trigger: "blur",
-          }
+          },
-        ]
+        ],
       },
       // 是否显示弹出层（角色权限）
       openRole: false,
@@ -359,7 +597,7 @@ export default {
     // 根据名称筛选部门树
     deptName(val) {
       this.$refs.tree.filter(val);
-    }
+    },
   },
   created() {
     this.getList();
@@ -372,16 +610,16 @@ export default {
     // 更多操作
     handleCommand(command, index, row) {
       switch (command) {
-        case 'handleUpdate':
+        case "handleUpdate":
           this.handleUpdate(row); //修改客户信息
           break;
-        case 'handleDelete':
+        case "handleDelete":
           this.handleDelete(row); //红号变更
           break;
-        case 'handleResetPwd':
+        case "handleResetPwd":
           this.handleResetPwd(row);
           break;
-        case 'handleRole':
+        case "handleRole":
           this.handleRole(row);
           break;
         default:
@@ -391,21 +629,20 @@ export default {
     /** 查询用户列表 */
     getList() {
       this.loading = true;
-      listUser(this.queryParams).then(response => {
+      listUser(this.queryParams).then((response) => {
         this.userList = response.data.list;
         this.total = response.data.total;
         this.loading = false;
-        }
+      });
-      );
     },
     /** 查询部门下拉树结构 + 岗位下拉 */
     getTreeselect() {
-      listSimpleDepts().then(response => {
+      listSimpleDepts().then((response) => {
         // 处理 deptOptions 参数
         this.deptOptions = [];
         this.deptOptions.push(...this.handleTree(response.data, "id"));
       });
-      listSimplePosts().then(response => {
+      listSimplePosts().then((response) => {
         // 处理 postOptions 参数
         this.postOptions = [];
         this.postOptions.push(...response.data);
@@ -424,12 +661,18 @@ export default {
     // 用户状态修改
     handleStatusChange(row) {
       let text = row.status === CommonStatusEnum.ENABLE ? "启用" : "停用";
-      this.$modal.confirm('确认要"' + text + '""' + row.username + '"用户吗?').then(function() {
+      this.$modal
+        .confirm('确认要"' + text + '""' + row.username + '"用户吗?')
+        .then(function () {
           return changeUserStatus(row.id, row.status);
-        }).then(() => {
+        })
+        .then(() => {
           this.$modal.msgSuccess(text + "成功");
-        }).catch(function() {
+        })
-          row.status = row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.DISABLE
+        .catch(function () {
+          row.status =
+            row.status === CommonStatusEnum.ENABLE
+              ? CommonStatusEnum.DISABLE
               : CommonStatusEnum.ENABLE;
         });
     },
@@ -457,7 +700,7 @@ export default {
         status: "0",
         remark: undefined,
         postIds: [],
-        roleIds: []
+        roleIds: [],
       };
       this.resetForm("form");
     },
@@ -486,7 +729,7 @@ export default {
       this.reset();
       this.getTreeselect();
       const id = row.id;
-      getUser(id).then(response => {
+      getUser(id).then((response) => {
         this.form = response.data;
         this.open = true;
         this.title = "修改用户";
@@ -496,17 +739,19 @@ export default {
     handleResetPwd(row) {
       this.$prompt('请输入"' + row.username + '"的新密码', "提示", {
         confirmButtonText: "确定",
-        cancelButtonText: "取消"
+        cancelButtonText: "取消",
-      }).then(({ value }) => {
+      })
-          resetUserPwd(row.id, value).then(response => {
+        .then(({ value }) => {
+          resetUserPwd(row.id, value).then((response) => {
             this.$modal.msgSuccess("修改成功，新密码是：" + value);
           });
-        }).catch(() => {});
+        })
+        .catch(() => {});
     },
     /** 分配用户角色操作 */
     handleRole(row) {
       this.reset();
-      const id = row.id
+      const id = row.id;
       // 处理了 form 的用户 username 和 nickname 的展示
       this.form.id = id;
       this.form.username = row.username;
@@ -514,29 +759,29 @@ export default {
       // 打开弹窗
       this.openRole = true;
       // 获得角色列表
-      listSimpleRoles().then(response => {
+      listSimpleRoles().then((response) => {
         // 处理 roleOptions 参数
         this.roleOptions = [];
         this.roleOptions.push(...response.data);
       });
       // 获得角色拥有的菜单集合
-      listUserRoles(id).then(response => {
+      listUserRoles(id).then((response) => {
         // 设置选中
         this.form.roleIds = response.data;
-      })
+      });
     },
     /** 提交按钮 */
     submitForm: function () {
-      this.$refs["form"].validate(valid => {
+      this.$refs["form"].validate((valid) => {
         if (valid) {
           if (this.form.id !== undefined) {
-            updateUser(this.form).then(response => {
+            updateUser(this.form).then((response) => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
             });
           } else {
-            addUser(this.form).then(response => {
+            addUser(this.form).then((response) => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
               this.getList();
@@ -551,7 +796,7 @@ export default {
         assignUserRole({
           userId: this.form.id,
           roleIds: this.form.roleIds,
-        }).then(response => {
+        }).then((response) => {
           this.$modal.msgSuccess("分配角色成功");
           this.openRole = false;
           this.getList();
@@ -561,26 +806,34 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除用户编号为"' + ids + '"的数据项?').then(function() {
+      this.$modal
+        .confirm('是否确认删除用户编号为"' + ids + '"的数据项?')
+        .then(function () {
           return delUser(ids);
-        }).then(() => {
+        })
+        .then(() => {
           this.getList();
           this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+        })
+        .catch(() => {});
     },
     /** 导出按钮操作 */
     handleExport() {
-      this.$modal.confirm('是否确认导出所有用户数据项?').then(() => {
+      this.$modal
+        .confirm("是否确认导出所有用户数据项?")
+        .then(() => {
           // 处理查询参数
           let params = { ...this.queryParams };
           params.pageNo = undefined;
           params.pageSize = undefined;
           this.exportLoading = true;
           return exportUser(params);
-        }).then(response => {
+        })
-          this.$download.excel(response, '用户数据.xls');
+        .then((response) => {
+          this.$download.excel(response, "用户数据.xls");
           this.exportLoading = false;
-      }).catch(() => {});
+        })
+        .catch(() => {});
     },
     /** 导入按钮操作 */
     handleImport() {
@@ -589,8 +842,8 @@ export default {
     },
     /** 下载模板操作 */
     importTemplate() {
-      importTemplate().then(response => {
+      importTemplate().then((response) => {
-        this.$download.excel(response, '用户导入模板.xls');
+        this.$download.excel(response, "用户导入模板.xls");
       });
     },
     // 文件上传中处理
@@ -600,7 +853,7 @@ export default {
     // 文件上传成功处理
     handleFileSuccess(response, file, fileList) {
       if (response.code !== 0) {
-        this.$modal.msgError(response.msg)
+        this.$modal.msgError(response.msg);
         return;
       }
       this.upload.open = false;
@@ -608,17 +861,22 @@ export default {
       this.$refs.upload.clearFiles();
       // 拼接提示语
       let data = response.data;
-      let text = '创建成功数量：' + data.createUsernames.length;
+      let text = "创建成功数量：" + data.createUsernames.length;
       for (const username of data.createUsernames) {
-        text += '<br />&nbsp;&nbsp;&nbsp;&nbsp;' + username;
+        text += "<br />&nbsp;&nbsp;&nbsp;&nbsp;" + username;
       }
-      text += '<br />更新成功数量：' + data.updateUsernames.length;
+      text += "<br />更新成功数量：" + data.updateUsernames.length;
       for (const username of data.updateUsernames) {
-        text += '<br />&nbsp;&nbsp;&nbsp;&nbsp;' + username;
+        text += "<br />&nbsp;&nbsp;&nbsp;&nbsp;" + username;
       }
-      text += '<br />更新失败数量：' + Object.keys(data.failureUsernames).length;
+      text +=
+        "<br />更新失败数量：" + Object.keys(data.failureUsernames).length;
       for (const username in data.failureUsernames) {
-        text += '<br />&nbsp;&nbsp;&nbsp;&nbsp;' + username + '：' + data.failureUsernames[username];
+        text +=
+          "<br />&nbsp;&nbsp;&nbsp;&nbsp;" +
+          username +
+          "：" +
+          data.failureUsernames[username];
       }
       this.$alert(text, "导入结果", { dangerouslyUseHTMLString: true });
       this.getList();
@@ -632,9 +890,18 @@ export default {
       return {
         id: node.id,
         label: node.name,
-        children: node.children
+        children: node.children,
-      }
+      };
-    }
+    },
-  }
+  },
 };
 </script>
+<style lang="scss" scoped>
+.app-container {
+  width: 100%;
+  height: calc(100vh - 120px - 8px);
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 8px;
+}
+</style>