设备首页 维修计划修改

src/api/main/index.js

@@ -39,4 +39,14 @@ export async function listInspection(data) {
     return Promise.resolve(res.data.data)
   }
   return Promise.reject(new Error(res.data.message));
+}
+/**
+ * 设备故障数统计
+ */
+export async function indexGroupQuery() {
+  const res = await request.get('/eam/workorder/indexGroupQuery');
+  if (res.data.code == 0) {
+    return Promise.resolve(res.data.data)
+  }
+  return Promise.reject(new Error(res.data.message));
 }

src/views/home/data.js

@@ -250,7 +250,8 @@ export const pieOption1 = (data) => {
           position: 'outside',
           show: true,
           formatter: (item) => {
-            return item.name + '：' + item.value + '%';
+            console.log(item,'item')
+            return item.name + '：' + item.percent + '%';
           },
           fontSize: window.innerHeight * 0.0125,
           color: '#333'
@@ -271,7 +272,7 @@ export const pieOption1 = (data) => {
   };
 };
 
-export const lineOption = (type) => {
+export const lineOption = (data,time) => {
   return {
     tooltip: {
       formatter: (item) => {
@@ -294,54 +295,54 @@ export const lineOption = (type) => {
       axisLabel: {
         fontSize: window.innerHeight * 0.012
       },
-      data:
-        type == 1
-          ? [2020, 2021, 2022, 2023, 2024]
-          : type == 2
-          ? ['1季度', '2季度', '3季度', '4季度']
-          : [
-              '1月',
-              '2月',
-              '3月',
-              '4月',
-              '5月',
-              '6月',
-              '7月',
-              '8月',
-              '9月',
-              '10月',
-              '11月',
-              '12月'
-            ]
+      data:time
+        // type == 1
+        //   ? [2020, 2021, 2022, 2023, 2024]
+        //   : type == 2
+        //   ? ['1季度', '2季度', '3季度', '4季度']
+        //   : [
+        //       '1月',
+        //       '2月',
+        //       '3月',
+        //       '4月',
+        //       '5月',
+        //       '6月',
+        //       '7月',
+        //       '8月',
+        //       '9月',
+        //       '10月',
+        //       '11月',
+        //       '12月'
+        //     ]
     },
     yAxis: {
       type: 'value'
     },
-    series: [
-      {
-        name: '班组一',
-        data: getRandomNumber(type),
-        type: 'line',
-        smooth: true
-      },
-      {
-        name: '班组二',
-        data: getRandomNumber(type),
-        type: 'line',
-        smooth: true
-      },
-      {
-        name: '班组三',
-        data: getRandomNumber(type),
-        type: 'line',
-        smooth: true
-      },
-      {
-        name: '班组四',
-        data: getRandomNumber(type),
-        type: 'line',
-        smooth: true
-      }
-    ]
+    series: data
+    // [
+    //   {
+    //     name: '班组一',
+    //     data: getRandomNumber(type),
+    //     type: 'line',
+    //     smooth: true
+    //   },
+    //   {
+    //     name: '班组二',
+    //     data: getRandomNumber(type),
+    //     type: 'line',
+    //     smooth: true
+    //   },
+    //   {
+    //     name: '班组三',
+    //     data: getRandomNumber(type),
+    //     type: 'line',
+    //     smooth: true
+    //   },
+    //   {
+    //     name: '班组四',
+    //     data: getRandomNumber(type),
+      
+    //   }
+    // ]
   };
 };

src/views/home/index.vue

@@ -87,13 +87,13 @@
         <div class="char" style="height: 40%; margin: 0">
           <el-card
             class="box-card"
-            style="height: 100%;width: 100%;  position: relative"
+            style="height: 100%; width: 100%; position: relative"
           >
             <div slot="header" class="clearfix">
               <span>备品备件</span>
             </div>
             <div class="sparePart">
-              <span>消耗总量 68</span>
+              <span>消耗总量 {{ bpbjGroupSumNum }}</span>
               <!-- <span
                 >环比-17%
                 <i
@@ -249,529 +249,448 @@
   </div>
 </template>
 <script>
-import vueSeamlessScroll from 'vue-seamless-scroll';
+  import vueSeamlessScroll from 'vue-seamless-scroll';
 
-import {
-  // planList,
-  statusList,
-  rankList,
-  repaireOptions,
-  pieOption,
-  barOption,
-  pieOption1,
-  lineOption
-} from './data';
-import { use } from 'echarts/core';
-import { CanvasRenderer } from 'echarts/renderers';
-import { BarChart, PieChart, LineChart } from 'echarts/charts';
-import {
-  GridComponent,
-  TooltipComponent,
-  LegendComponent
-} from 'echarts/components';
+  import {
+    // planList,
+    statusList,
+    rankList,
+    repaireOptions,
+    pieOption,
+    barOption,
+    pieOption1,
+    lineOption
+  } from './data';
+  import { use } from 'echarts/core';
+  import { CanvasRenderer } from 'echarts/renderers';
+  import { BarChart, PieChart, LineChart } from 'echarts/charts';
+  import {
+    GridComponent,
+    TooltipComponent,
+    LegendComponent
+  } from 'echarts/components';
 
-import VChart from 'vue-echarts';
-import { echartsMixin } from '@/utils/echarts-mixin';
-import {
-  listInspection,
-  queryRunStatus,
-  queryGroupName,
-  queryDevice
-} from '@/api/main';
-// 按需加载 echarts
-use([
-  CanvasRenderer,
-  BarChart,
-  PieChart,
-  GridComponent,
-  TooltipComponent,
-  LegendComponent,
-  LineChart
-]);
-const seamlessScrollOption = {
-  step: 0.2, // 数值越大速度滚动越快
-  limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
-  hoverStop: true, // 是否开启鼠标悬停stop
-  direction: 1, // 0向下 1向上 2向左 3向右
-  openWatch: true, // 开启数据实时监控刷新dom
-  singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
-  singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
-  waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
-};
-export default {
-  mixins: [echartsMixin(['barRef', 'pieRef', 'pieRef1', 'lineRef'])],
-  data() {
-    return {
-      timeType: '3',
-      // planList,
-      tabPosition: '个人',
-      // planData: [
-      //   {
-      //     type: '审批',
-      //     code: 'XA123451',
-      //     title: '巡查点计划1',
-      //     userName: '李杰3213213123213123123'
-      //   },
-      //   {
-      //     type: '审批',
-      //     code: 'XA123452',
-      //     title: '巡查点计划2',
-      //     userName: '李杰'
-      //   },
-      //   {
-      //     type: '审批',
-      //     code: 'XA123453',
-      //     title: '巡查点计划3',
-      //     userName: '李杰'
-      //   },
-      //   {
-      //     type: '审批',
-      //     code: 'XA123454',
-      //     title: '巡查点计划4',
-      //     userName: '李杰'
-      //   },
-      //   {
-      //     type: '审批',
-      //     code: 'XA123455',
-      //     title: '巡查点计划5',
-      //     userName: '李杰'
-      //   }
-      // ],
+  import VChart from 'vue-echarts';
+  import { echartsMixin } from '@/utils/echarts-mixin';
+  import {
+    listInspection,
+    queryRunStatus,
+    queryGroupName,
+    queryDevice,
+    indexGroupQuery
+  } from '@/api/main';
+  // 按需加载 echarts
+  use([
+    CanvasRenderer,
+    BarChart,
+    PieChart,
+    GridComponent,
+    TooltipComponent,
+    LegendComponent,
+    LineChart
+  ]);
+  const seamlessScrollOption = {
+    step: 0.2, // 数值越大速度滚动越快
+    limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
+    hoverStop: true, // 是否开启鼠标悬停stop
+    direction: 1, // 0向下 1向上 2向左 3向右
+    openWatch: true, // 开启数据实时监控刷新dom
+    singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+    singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+    waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
+  };
+  export default {
+    mixins: [echartsMixin(['barRef', 'pieRef', 'pieRef1', 'lineRef'])],
+    data() {
+      return {
+        timeType: '3',
+        tabPosition: '个人',
+        bpbjGroupSumNum: 0,
 
-      rankData: [
-        {
-          name: '备件1',
-          num: '356',
-          rank: 1
-        },
-        {
-          name: '备件2',
-          num: '356',
-          rank: 2
-        },
-        {
-          name: '备件3',
-          num: '356',
-          rank: 3
-        },
-        {
-          name: '备件4',
-          num: '356',
-          rank: 4
-        },
-        {
-          name: '备件5',
-          num: '356',
-          rank: 5
-        },
-        {
-          name: '备件6',
-          num: '356',
-          rank: 6
-        },
-        {
-          name: '备件7',
-          num: '356',
-          rank: 7
-        },
-        {
-          name: '备件8',
-          num: '356',
-          rank: 8
-        },
-        {
-          name: '备件9',
-          num: '356',
-          rank: 9
-        },
-        {
-          name: '备件10',
-          num: '356',
-          rank: 10
-        }
-      ],
-      dateOptions: [
-        {
-          label: '近七日',
-          value: 1
-        },
-        {
-          label: '近一个月',
-          value: 2
-        }
-      ],
-      rankTypeOption: [
-        {
-          value: '1',
-          label: '全厂'
-        },
-        {
-          value: '2',
-          label: '机加一'
-        },
-        {
-          value: '3',
-          label: '机加二'
-        },
-        {
-          value: '4',
-          label: '特种作业'
-        },
-        {
-          value: '5',
-          label: '总装'
-        }
-      ],
-      rankType: '1',
-      statusList,
-      rankList,
-      repaireOptions,
-      date: new Date(),
-      seamlessScrollOption: JSON.parse(JSON.stringify(seamlessScrollOption)),
-      // seamlessScrollOption2: JSON.parse(JSON.stringify(seamlessScrollOption)),
-      barEquipmentFailureOption: {},
-      pieEquipmentFailureOption: {},
-      lineOption: {},
-      pieSparePartOption: {}
-    };
-  },
-  components: {
-    vueSeamlessScroll,
-    VChart
-  },
-  created() {
-    this.pieSparePartOption = pieOption1([
-      {
-        value: '2',
-        name: '机加一'
-      },
-      {
-        value: '3',
-        name: '机加二'
-      },
-      {
-        value: '4',
-        name: '特种作业'
-      },
-      {
-        value: '5',
-        name: '总装'
-      }
-    ]);
-
-    this.queryRunStatus();
-    this.timeTypeChange();
-    this.queryGroupName();
-    this.queryDevice();
-  },
-  methods: {
-    //工单信息
-    async getListInspection() {
-      const arr = await Promise.all(
-        [1, 2, 3].map((item) => listInspection({ type: item }))
-      );
-      arr.forEach((item, index) => {
-        this.repaireOptions[index].total = item.numberTotal;
-        this.repaireOptions[index].num = item.finishNumber;
-      });
+        dateOptions: [
+          {
+            label: '近七日',
+            value: 1
+          },
+          {
+            label: '近一个月',
+            value: 2
+          }
+        ],
+        rankTypeOption: [
+          {
+            value: '1',
+            label: '全厂'
+          },
+          {
+            value: '2',
+            label: '机加一'
+          },
+          {
+            value: '3',
+            label: '机加二'
+          },
+          {
+            value: '4',
+            label: '特种作业'
+          },
+          {
+            value: '5',
+            label: '总装'
+          }
+        ],
+        rankType: '1',
+        statusList,
+        rankList,
+        repaireOptions,
+        date: new Date(),
+        seamlessScrollOption: JSON.parse(JSON.stringify(seamlessScrollOption)),
+        // seamlessScrollOption2: JSON.parse(JSON.stringify(seamlessScrollOption)),
+        barEquipmentFailureOption: {},
+        pieEquipmentFailureOption: {},
+        lineOption: {},
+        pieSparePartOption: {}
+      };
     },
-    async queryGroupName() {
-      const data = await queryGroupName();
-      this.pieEquipmentFailureOption = pieOption(
-        data.map((item) => {
-          return {
-            name: item.groupName,
-            value: item.failureRate
-          };
-        })
-      );
+    components: {
+      vueSeamlessScroll,
+      VChart
     },
-    async queryDevice() {
-      const data = await queryDevice();
-      this.barEquipmentFailureOption = barOption(data.map(item=>{
-        return {
-          name:item.deviceName,
-          value:item.qualifiedNumber
-        }
-      }));
-      console.log(data);
+    created() {
+      this.queryRunStatus();
+      // this.timeTypeChange();
+      this.queryGroupName();
+      this.queryDevice();
+      this.indexGroupQuery();
     },
-    queryRunStatus() {
-      queryRunStatus().then((res) => {
-        this.statusList.forEach((item) => {
-          item.num = res[item.code];
+    methods: {
+      //工单信息
+      async getListInspection() {
+        const arr = await Promise.all(
+          [1, 2, 3].map((item) => listInspection({ type: item }))
+        );
+        arr.forEach((item, index) => {
+          this.repaireOptions[index].total = item.numberTotal;
+          this.repaireOptions[index].num = item.finishNumber;
         });
-      });
-    },
-    handelRouterTo(path) {
-      window.history.pushState(null, '', path);
+      },
+      async indexGroupQuery() {
+        const data = await indexGroupQuery();
+        this.bpbjGroupSumNum = data.bpbjGroupSumNum;
+        this.pieSparePartOption = pieOption1(
+          data.bpbjGroupVOList.map((item) => {
+            return {
+              name: item.categoryLevelName,
+              value: item.sumTotalNum
+            };
+          })
+        );
+        this.lineOption = lineOption(
+          data.wxxhqsGroupVOList.map((item) => {
+            return {
+              name:item.recipientName,
+              data:item.sumTotalNumList,
+              type: 'line',
+              smooth: true
+            };
+          }, data.wxxhqsGroupVOList[0]?.yearAndMonthList)
+        );
+      },
+      async queryGroupName() {
+        const data = await queryGroupName();
+        this.pieEquipmentFailureOption = pieOption(
+          data.map((item) => {
+            return {
+              name: item.groupName,
+              value: item.failureRate
+            };
+          })
+        );
+      },
+      async queryDevice() {
+        const data = await queryDevice();
+        this.barEquipmentFailureOption = barOption(
+          data.map((item) => {
+            return {
+              name: item.deviceName,
+              value: item.qualifiedNumber
+            };
+          })
+        );
+      },
+      queryRunStatus() {
+        queryRunStatus().then((res) => {
+          this.statusList.forEach((item) => {
+            item.num = res[item.code];
+          });
+        });
+      },
+      handelRouterTo(path) {
+        window.history.pushState(null, '', path);
+      }
     },
-    timeTypeChange() {
-      this.lineOption = lineOption(this.timeType);
+    mounted() {
+      this.getListInspection();
+      // this.seamlessScrollOption.limitMoveNum = parseInt(
+      //   this.$refs.rankTableList.clientHeight / 25
+      // );
+      setTimeout(() => {
+        this.$refs.barRef.resize();
+        this.$refs.pieRef.resize();
+        this.$refs.pieRef1.resize();
+        this.$refs.lineRef.resize();
+      }, 300);
+      // this.seamlessScrollOption2.limitMoveNum = parseInt(
+      //   this.$refs.rankTableList.clientHeight / 25
+      // );
     }
-  },
-  mounted() {
-    this.getListInspection();
-    this.seamlessScrollOption.limitMoveNum = parseInt(
-      this.$refs.rankTableList.clientHeight / 25
-    );
-    setTimeout(() => {
-      this.$refs.barRef.resize();
-      this.$refs.pieRef.resize();
-      this.$refs.pieRef1.resize();
-      this.$refs.lineRef.resize();
-    }, 300);
-    // this.seamlessScrollOption2.limitMoveNum = parseInt(
-    //   this.$refs.rankTableList.clientHeight / 25
-    // );
-  }
-};
+  };
 </script>
 
 <style lang="scss" scoped>
-@font-face {
-  font-family: 'MyFont';
-  src: url('../../../public/tinymce/skins/ui/oxide/fonts/black.ttf')
-    format('truetype');
-  font-weight: normal;
-  font-style: normal;
-}
-.clearfix {
-  font-size: 0.7vw;
-
-  > span {
-    font-weight: bold;
-    margin-left: 15px;
-    margin-right: 15px;
+  @font-face {
+    font-family: 'MyFont';
+    src: url('../../../public/tinymce/skins/ui/oxide/fonts/black.ttf')
+      format('truetype');
+    font-weight: normal;
+    font-style: normal;
   }
-  :deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
-    background-color: #398f4e;
-    border-color: #398f4e;
-  }
-  :deep(.el-radio-button__inner) {
+  .clearfix {
     font-size: 0.7vw;
-  }
-}
-.ele-body {
-  height: calc(100vh - 106px);
-  > .el-row {
-    height: 100%;
-  }
-  :deep(.el-calendar) {
-    font-size: 0.7vw;
-    height: 100%;
-    .el-calendar__body {
-      height: 90%;
-      padding: 0.4vw 0.7vw;
-    }
-    .el-calendar-day {
-      height: 100%;
-    }
-    .el-calendar-table {
-      height: 100%;
-    }
-    .el-calendar__header {
-      padding: 0.4vw 0.7vw;
-    }
-    .el-calendar-table thead th {
-      padding: 0.4vw 0;
-    }
-    .dateItem {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-  .el-card {
-    height: 100%;
-    // margin-top: 15px;
 
-    :deep(.el-card__body) {
-      padding: 0.3vw;
-    }
-    :deep(.el-card__header) {
-      padding: 0;
-      height: 2.5vw;
-      display: flex;
-      align-items: center;
-    }
-    :deep(.el-card__body) {
-      height: calc(100% - 2.5vw);
+    > span {
+      font-weight: bold;
+      margin-left: 15px;
+      margin-right: 15px;
     }
-    :deep(.ele-pro-table) {
-      height: 99%;
+    :deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
+      background-color: #398f4e;
+      border-color: #398f4e;
     }
-    .sparePart {
+    :deep(.el-radio-button__inner) {
       font-size: 0.7vw;
-      font-weight: bold;
-      position: absolute;
-      display: flex;
-      flex-direction: column;
-      top: 20%;
-      left: 5%;
     }
   }
-
-  // :deep(.el-card + .el-card){
-  //     margin-top: 0;
-  //   }
-  .char {
-    display: flex;
-    justify-content: space-between;
-    margin-top: 15px;
-    height: calc(40% - 15px);
-    > .box-card {
-      margin-top: 0;
+  .ele-body {
+    height: calc(100vh - 106px);
+    > .el-row {
+      height: 100%;
     }
-  }
-  .list {
-    display: flex;
-    box-sizing: border-box;
-    height: 100%;
-    margin-top: 5px;
-    > div {
-      flex: 1;
-      display: flex;
-      align-items: center;
-      background-color: #398f4d;
-      margin-left: 7.5px;
-      margin-right: 7.5px;
-      border-radius: 8px;
-      color: #fff;
-      height: 90%;
-      cursor: pointer;
-      .img_box {
-        // flex: 0 0 130px;
-        width: 3vw;
+    :deep(.el-calendar) {
+      font-size: 0.7vw;
+      height: 100%;
+      .el-calendar__body {
+        height: 90%;
+        padding: 0.4vw 0.7vw;
+      }
+      .el-calendar-day {
+        height: 100%;
+      }
+      .el-calendar-table {
+        height: 100%;
+      }
+      .el-calendar__header {
+        padding: 0.4vw 0.7vw;
+      }
+      .el-calendar-table thead th {
+        padding: 0.4vw 0;
+      }
+      .dateItem {
+        width: 100%;
         height: 100%;
         display: flex;
         align-items: center;
         justify-content: center;
-        border-top-right-radius: 50%;
-        border-bottom-right-radius: 50%;
-        border-top-left-radius: 8px;
-        border-bottom-left-radius: 8px;
-        background-color: #38994e;
-        > img {
-          width: 2.5vw;
-          height: 2.5vw;
-        }
       }
+    }
+    .el-card {
+      height: 100%;
+      // margin-top: 15px;
 
-      > div {
-        flex: 1;
-        // font-size: 16px;
+      :deep(.el-card__body) {
+        padding: 0.3vw;
+      }
+      :deep(.el-card__header) {
+        padding: 0;
+        height: 2.5vw;
+        display: flex;
+        align-items: center;
+      }
+      :deep(.el-card__body) {
+        height: calc(100% - 2.5vw);
+      }
+      :deep(.ele-pro-table) {
+        height: 99%;
+      }
+      .sparePart {
         font-size: 0.7vw;
-
+        font-weight: bold;
+        position: absolute;
         display: flex;
         flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        .text {
-          margin-top: 10px;
+        top: 20%;
+        left: 5%;
+      }
+    }
 
-          // font-size: 20px;
-        }
+    // :deep(.el-card + .el-card){
+    //     margin-top: 0;
+    //   }
+    .char {
+      display: flex;
+      justify-content: space-between;
+      margin-top: 15px;
+      height: calc(40% - 15px);
+      > .box-card {
+        margin-top: 0;
       }
     }
-  }
-  .statusList {
-    display: flex;
-    height: 100%;
-    color: #fff;
-    flex-wrap: wrap;
-    justify-content: space-around;
-    align-items: center;
-    > div {
-      width: 46%;
-      height: 3.3vw;
+    .list {
       display: flex;
-      align-items: center;
-
+      box-sizing: border-box;
+      height: 100%;
+      margin-top: 5px;
       > div {
-        position: relative;
+        flex: 1;
         display: flex;
-        height: 100%;
-        img {
-          position: absolute;
-          width: 100%;
-          height: 100%;
-          top: 0;
-          left: 0;
-        }
-      }
-      .left {
-        width: 3vw;
-        font-size: 0.7vw;
         align-items: center;
-        justify-content: center;
-        font-weight: 600;
-      }
-      .right {
-        height: 2.6vw;
-        font-family: 'MyFont';
+        background-color: #398f4d;
+        margin-left: 7.5px;
+        margin-right: 7.5px;
+        border-radius: 8px;
         color: #fff;
-        margin-left: 8px;
-        width: calc(100% - 3vw - 5px);
-        align-items: center;
-        justify-content: center;
+        height: 90%;
+        cursor: pointer;
+        .img_box {
+          // flex: 0 0 130px;
+          width: 3vw;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-top-right-radius: 50%;
+          border-bottom-right-radius: 50%;
+          border-top-left-radius: 8px;
+          border-bottom-left-radius: 8px;
+          background-color: #38994e;
+          > img {
+            width: 2.5vw;
+            height: 2.5vw;
+          }
+        }
+
         > div {
-          position: absolute;
-          font-size: 0.6vw;
+          flex: 1;
+          // font-size: 16px;
+          font-size: 0.7vw;
+
           display: flex;
+          flex-direction: column;
           align-items: center;
-          span:nth-of-type(1) {
-            margin-right: 0.6vw;
-            font-size: 0.9vw;
+          justify-content: center;
+          .text {
+            margin-top: 10px;
+
+            // font-size: 20px;
           }
-          // top:15px
         }
       }
     }
-  }
-}
-.scrollList {
-  height: 100%;
-  font-size: 0.6vw;
-  color: #333;
-  .tableList_header {
-    width: 100%;
-    display: flex;
-    font-weight: bold;
-
-    span {
+    .statusList {
       display: flex;
-      justify-content: center;
+      height: 100%;
+      color: #fff;
+      flex-wrap: wrap;
+      justify-content: space-around;
       align-items: center;
-      height: 2vw;
-      background: #f6f6f6;
+      > div {
+        width: 46%;
+        height: 3.3vw;
+        display: flex;
+        align-items: center;
+
+        > div {
+          position: relative;
+          display: flex;
+          height: 100%;
+          img {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+          }
+        }
+        .left {
+          width: 3vw;
+          font-size: 0.7vw;
+          align-items: center;
+          justify-content: center;
+          font-weight: 600;
+        }
+        .right {
+          height: 2.6vw;
+          font-family: 'MyFont';
+          color: #fff;
+          margin-left: 8px;
+          width: calc(100% - 3vw - 5px);
+          align-items: center;
+          justify-content: center;
+          > div {
+            position: absolute;
+            font-size: 0.6vw;
+            display: flex;
+            align-items: center;
+            span:nth-of-type(1) {
+              margin-right: 0.6vw;
+              font-size: 0.9vw;
+            }
+            // top:15px
+          }
+        }
+      }
     }
   }
-  .tableList {
-    height: calc(100% - 2vw);
-  }
-  .scroll_box {
+  .scrollList {
     height: 100%;
-    overflow: hidden;
-    .srcoll_item {
+    font-size: 0.6vw;
+    color: #333;
+    .tableList_header {
       width: 100%;
       display: flex;
-      min-height: 25px;
+      font-weight: bold;
 
       span {
-        text-align: center;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 2vw;
+        background: #f6f6f6;
+      }
+    }
+    .tableList {
+      height: calc(100% - 2vw);
+    }
+    .scroll_box {
+      height: 100%;
+      overflow: hidden;
+      .srcoll_item {
+        width: 100%;
+        display: flex;
+        min-height: 25px;
+
+        span {
+          text-align: center;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
       }
     }
   }
-}
 </style>
 <style>
-.el-select-dropdown__item.selected {
-  color: #157a2c !important;
-}
+  .el-select-dropdown__item.selected {
+    color: #157a2c !important;
+  }
 </style>

src/views/maintenance/components/planRepaireDialog.vue

@@ -53,7 +53,7 @@
         </el-col>
 
         <el-col :span="8">
-          <el-form-item label="计划开始时间" prop="startTime">
+          <el-form-item label="计划开始时间" prop="planStartTime">
             <el-date-picker
               style="width: 100%"
               v-model="addForm.planStartTime"
@@ -66,7 +66,7 @@
         </el-col>
 
         <el-col :span="8">
-          <el-form-item label="计划结束时间" prop="endTime">
+          <el-form-item label="计划结束时间" prop="planEndTime">
             <el-date-picker
               style="width: 100%"
               v-model="addForm.planEndTime"
@@ -252,31 +252,38 @@
                 </template>
               </template>
             </el-table-column>
+
             <el-table-column
               label="负责人部门"
               align="center"
-              prop="areaPersonInChargeGroupId"
+              prop="executeDeptId"
             >
+              <template slot="header" slot-scope="scope">
+                <span class="is-required">负责人部门</span>
+              </template>
               <template slot-scope="{ row, $index }">
                 <template>
                   <deptSelect
-                    v-model="row.areaPersonInChargeGroupId"
+                    v-model="row.executeDeptId"
                     @changeGroup="areaPersonGroup($index)"
+                    v-if="dialogTitle != '详情'"
                   />
+                  <span v-else>{{ row.executeDeptName }}</span>
                 </template>
               </template>
             </el-table-column>
-            <el-table-column
-              label="负责人"
-              align="center"
-              prop="areaPersonInChargeUserId"
-            >
+
+            <el-table-column label="负责人" align="center" prop="executeUserId">
+              <template slot="header" slot-scope="scope">
+                <span class="is-required">负责人</span>
+              </template>
               <template slot-scope="{ row, $index }">
                 <template>
                   <el-select
                     style="width: 100%"
-                    v-model="row.areaPersonInChargeUserId"
+                    v-model="row.executeUserId"
                     placeholder="请选择"
+                    v-if="dialogTitle != '详情'"
                   >
                     <el-option
                       v-for="item in row.areaPersonList"
@@ -286,6 +293,7 @@
                     >
                     </el-option>
                   </el-select>
+                  <span v-else>{{ row.executeUserName }}</span>
                 </template>
               </template>
             </el-table-column>
@@ -394,26 +402,11 @@
           autoOrder: [
             { required: true, message: '请选择是否自动派单', trigger: 'change' }
           ],
-          ruleId: [
-            { required: true, message: '请选择规则名称', trigger: 'change' }
-          ],
-          duration: [
-            { required: true, message: '请输入计划完成时长', trigger: 'blur' }
-          ],
-          categoryLevelId: [
-            { required: true, message: '请选择设备分类', trigger: 'change' }
-          ],
-          categoryId: [
-            { required: true, message: '请选择设备类别', trigger: 'change' }
-          ],
-          groupId: [
-            { required: true, message: '请选择巡点检部门', trigger: 'change' }
-          ],
-          executeId: [
-            { required: true, message: '请选择巡点检人员', trigger: 'change' }
+          planStartTime: [
+            { required: true, message: '请选择计划开始时间', trigger: 'change' }
           ],
-          urgent: [
-            { required: true, message: '请选择紧急程度', trigger: 'change' }
+          planEndTime: [
+            { required: true, message: '请选择计划结束时间', trigger: 'blur' }
           ]
         },
 
@@ -598,17 +591,24 @@
       save() {
         console.log(this.addForm);
         this.$refs.addFormRef.validate(async (valid) => {
-          console.log(valid);
-          console.log(this.equipmentList, 'this.equipmentList');
+          let isRepairGroupId = true,
+            isRepairUserId = true;
           if (valid) {
             const planDeviceList = this.equipmentList.map((item) => {
+              if (!item.repairGroupId) {
+                isRepairGroupId = false;
+              }
+              if (!item.repairUserId) {
+                isRepairUserId = false;
+              }
               return {
                 deviceId: item.id,
                 codeNumber: item.codeNumber,
                 equiLocation: item.position[0]?.pathName,
                 equiLocationCode: item.position[0]?.pathIds,
-                repairUserId: item.repairUserId,
-                workItems: []
+                workItems: [],
+                repairGroupId: item.executeDeptId,
+                repairUserId: item.executeUserId
               };
             });
             let boolen = planDeviceList.length > 0;
@@ -616,6 +616,14 @@
               this.$message.error('请添加设备！');
               return false;
             }
+            if (!isRepairGroupId) {
+              this.$message.error('请选择负责人部门！');
+              return false;
+            }
+            if (!isRepairUserId) {
+              this.$message.error('请选择负责人！');
+              return false;
+            }
             let sendMsg = [
               {
                 ...this.addForm,
@@ -649,13 +657,17 @@
           console.log('res----------', res);
           this.addForm = res.data;
           this.addForm.id = res.data.planId;
-          this.equipmentList = res.data.planDeviceList.map((item) => {
+          this.equipmentList = res.data.planDeviceList.map((item, index) => {
             return {
               name: item.substance.name,
               position: item.substance.position,
               id: item.substance.id,
               fixCode: item.substance.fixCode,
-              codeNumber: item.substance.codeNumber
+              codeNumber: item.substance.codeNumber,
+              executeDeptId: item.executeDeptId,
+              executeUserId: item.executeUserId,
+              executeUserName: item.executeUserName,
+              executeDeptName: item.executeDeptName
             };
           });
           if (this.dialogTitle === '派单') {
@@ -689,12 +701,22 @@
 
       // 选择设备
       chooseEquipment(data) {
-        console.log(data);
-
+        data.forEach((item, index) => {
+          this.$set(
+            data[index],
+            'executeDeptId',
+            item.repairGroupId || item.areaPersonInChargeGroupId
+          );
+          this.$set(
+            data[index],
+            'executeUserId',
+            item.repairUserId || item.areaPersonInChargeUserId
+          );
+        });
         this.equipmentList = this.equipmentList.concat(data);
         this.equipmentList.forEach((item, index) => {
           this.getUserList(
-            { groupId: item.areaPersonInChargeGroupId },
+            { groupId: item.executeDeptId },
             'isAreaPersonGroup',
             index
           );
@@ -719,10 +741,11 @@
           this.executorList = [];
         }
       },
+
       areaPersonGroup(index) {
-        this.$set(this.equipmentList[index], 'areaPersonInChargeUserId', '');
+        this.$set(this.equipmentList[index], 'executeUserId', '');
         this.getUserList(
-          { groupId: this.equipmentList[index]?.areaPersonInChargeGroupId },
+          { groupId: this.equipmentList[index]?.executeDeptId },
           'isAreaPersonGroup',
           index
         );

src/views/maintenance/repair/planRepair/index.vue

@@ -68,7 +68,6 @@
     <!-- 新建或编辑弹窗 -->
     <planRepaireDialog
       ref="planRepaireDialog"
-      :visible.sync="addPlanRepaireDialog"
       @done="reload"
     />
   </div>