fix: 样式修改

src/views/message/CustomSelectTree.vue

@@ -74,7 +74,8 @@ watch(
   height: 527px;
 }
 ::v-deep .el-select__selection {
-    max-height: 100px;
+    min-height: 25px;
+    max-height: 60px;
     overflow-y: auto;
-}
+  }
 </style>

src/views/message/SelectTree.vue

@@ -66,7 +66,8 @@ watch(
   height: 527px;
 }
 ::v-deep .el-select__selection {
-    max-height: 100px;
+    min-height: 25px;
+    max-height: 60px;
     overflow-y: auto;
-}
+  }
 </style>

src/views/message/designatedUserSelectTree.vue

@@ -68,7 +68,8 @@ onBeforeUpdate(()=>{
   height: 527px;
 }
 ::v-deep .el-select__selection {
-    max-height: 100px;
+    min-height: 25px;
+    max-height: 60px;
     overflow-y: auto;
-}
+  }
 </style>

src/views/message/reportmessage/CustomReport.vue

@@ -20,6 +20,7 @@
           <el-col :span="22">
             <el-date-picker
               v-model="item.daterange"
+              style="width: 327.5px;"
               type="daterange"
               range-separator="至"
               start-placeholder="开始日期"
@@ -51,7 +52,7 @@
           </el-col>
         </el-form-item>
 
-        <el-col class="text-center" :span="2">
+        <el-col class="text-center" :span="2" style="padding-bottom: 10px;">
           <span class="text-gray-500">—</span>
         </el-col>
 
@@ -62,7 +63,7 @@
           <el-col :span="22">
             <el-time-picker
               v-model="item.pushTime"
-              placeholder="09:00"
+              placeholder="选择时间"
               value-format="HH:mm:ss"
               style="width: 146.5px; height: 32px"
               :disabled="disableType.contentDisable"
@@ -88,6 +89,7 @@
         v-if="item.recipientType === '2'"
         label="选择分组:"
         required
+        style=" margin-top: 10px;"
         :prop="`customPushConfigList[` + index + `].userGroupList`"
         :rules="{ required: true, message: '请选择分组', trigger: 'change' }"
       >
@@ -96,7 +98,7 @@
             v-model="item.userGroupList"
             multiple
             placeholder="请选择分组"
-            style="width: 240px"
+            style="width: 326px; padding-bottom: 0px"
             :disabled="disableType.contentDisable"
           >
             <el-option
@@ -117,11 +119,13 @@
         label="选择人员:"
         required
         placeholder="请选择人员"
+        style="width: 526px; margin-top: 10px;"
         :prop="`customPushConfigList[` + index + `].customUserList`"
         :rules="{ required: true, message: '请选择推送人员', trigger: 'change' }"
       >
         <el-col :span="18">
           <CustomSelectTree
+            style="padding-bottom: 0;"
             :form="form"
             :disableType="disableType"
             :index="index"
@@ -135,6 +139,7 @@
   </div>
   <el-button
     type="primary"
+    :icon="Plus"
     @click="addCustom"
     class="addButton"
     :disabled="disableType.contentDisable"
@@ -148,6 +153,7 @@
   import { CircleCloseFilled } from '@element-plus/icons-vue';
   import { searchGroup } from '@/api/sendMessage/sendMessage';
   import CustomSelectTree from '../CustomSelectTree.vue';
+  import { Plus } from '@element-plus/icons-vue';
 
   const prop = defineProps(['form', 'disableType', 'ruleFormRef']);
   const emit = defineEmits(['customPropsChange']);
@@ -183,12 +189,11 @@
 </script>
 
 <style scoped>
-  .reportCard {
+.reportCard {
     margin-left: 87px;
-    margin-top: 12px;
+    margin-bottom: 16px;
+    padding: 12px 0px 0px 12px;
     background-color: #fafafa;
-    padding-top: 12px;
-    padding-bottom: 1px;
     width: 530px;
     position: relative;
   }
@@ -212,4 +217,19 @@
     width: 14px;
     height: 14px;
   }
+
+  .el-form-item--default {
+    /* margin-bottom: 8px; */
+    margin-bottom: 0px;
+    padding-bottom: 10px;
+}
+
+  .reportCard > .el-form-item:last-child{
+  /* background:#ff0000; */
+    padding-bottom: 16px;
+  }
+
+ ::v-deep .el-select__selection{
+    min-height: 25px;
+  }
 </style>

src/views/message/reportmessage/MonthReport.vue

@@ -21,7 +21,7 @@
           </el-col>
       </el-form-item>
 
-      <el-col class="text-center" :span="2">
+      <el-col class="text-center" :span="2" style="padding-bottom: 10px;">
         <span class="text-gray-500">—</span>
       </el-col>
 
@@ -52,6 +52,7 @@
       v-if="form.recipientType === 2"
       label="选择分组:"
       required
+      style="margin-top: 10px;"
       prop="userGroupList"
       >
         <el-col :span="10">
@@ -59,7 +60,7 @@
             v-model="form.userGroupList"
             multiple
             placeholder="请选择分组"
-            style="width: 240px"
+            style="width: 326px"
             :disabled="disableType.contentDisable"
           >
             <el-option
@@ -77,6 +78,7 @@
       label="选择人员:"
       required
       prop="customUserList.value"
+      style="width: 526px; margin-top: 10px;"
       :rules="{ required: true, message: '请选择推送人员', trigger: ['change'] }"
       >
         <el-col :span="18">
@@ -108,12 +110,27 @@
 </script>
 
 <style scoped>
-  .reportCard{
-    margin-left: 87px;
-    background-color: #FAFAFA;
-    padding-top: 12px;
-    width: 530px;
-  }
+.reportCard {
+  margin-left: 87px;
+  padding: 12px 0px 0px 12px;
+  margin-bottom: 16px;
+  background-color: #fafafa;
+  width: 530px;
+  box-sizing: border-box;
+}
+ 
+.el-form-item--default {
+    /* margin-bottom: 8px; */
+    margin-bottom: 0px;
+    padding-bottom: 10px;
+}
 
+.reportCard > .el-form-item:last-child{
+  /* background:#ff0000; */
+    padding-bottom: 16px;
+  }  
 
+ ::v-deep .el-select__selection{
+    min-height: 25px;
+  }
 </style>

src/views/message/reportmessage/ReportOperation.vue

@@ -15,7 +15,7 @@
       <div class="left">
         <el-form
           ref="ruleFormRef"
-          style="max-width: 1000px"
+          style="max-width: 1000px;"
           :model="form"
           :rules="rules"
           label-width="auto"
@@ -28,6 +28,7 @@
             label="指定人员:"
             required
             prop="designatedUserList.value"
+            style="width: 660px;"
             :rules="{ required: true, message: '请选择推送人员', trigger: ['change'] }"
           >
             <el-col :span="18">
@@ -42,7 +43,7 @@
             >
               <el-tooltip :visible="weekVisible" placement="top">
                 <template #content>
-                  <span>自然周数据(周一至周日),<br />每次将推送上一周数据</span>
+                  <span>每次推送上个自然周数据</span><br /><div style="text-align: center;">(每周一至周日)</div>
                 </template>
                 <el-radio
                   :value="1"
@@ -54,7 +55,7 @@
 
               <el-tooltip :visible="monthVisible" placement="top">
                 <template #content>
-                  <span>自然月数据(每月第一天至最后一天),<br />每次将推送上个月数据</span>
+                  <span>每次推送上个自然月数据</span><br /><div style="text-align: center;">(每月第一天至最后一天)</div>
                 </template>
                 <el-radio
                   :value="2"
@@ -66,7 +67,7 @@
 
               <el-tooltip :visible="seasonVisible" placement="top">
                 <template #content>
-                  <span>自然季数据,<br />每次将推送上个季度数据</span>
+                  <span>每次将推送上个自然季度数据</span>
                 </template>
                 <el-radio
                   :value="3"
@@ -78,7 +79,7 @@
 
               <el-tooltip :visible="yearVisible" placement="top">
                 <template #content>
-                  <span>整年数据,<br />每次将推送上一年数据</span>
+                  <span>每次推送上一整年的数据</span>
                 </template>
                 <el-radio
                   :value="4"
@@ -115,7 +116,7 @@
             <YearReport :form="form" :disableType="disableType"></YearReport>
           </div>
 
-          <div v-if="form.statisticType === 5">
+          <div v-if="form.statisticType === 5" class="custom-report">
             <CustomReport
               ref="CustomReportComponent"
               :form="form"
@@ -135,11 +136,12 @@
             </el-checkbox-group>
           </el-form-item>
 
-          <el-form-item label="操作人：">
-            <el-input style="width: 425px" disabled :placeholder="operater" />
+          <el-form-item label="操作人：" style="margin-left: 10px;">
+            <el-input style="width: 425px; margin-left: -10px ;" disabled :placeholder="operater" />
           </el-form-item>
         </el-form>
         <div class="two-btns">
+          <el-button @click="clickBack">取消</el-button>
           <el-button
             type="primary"
             @click="submitForm(ruleFormRef)"
@@ -147,7 +149,6 @@
           >
             确定
           </el-button>
-          <el-button @click="clickBack">取消</el-button>
         </div>
       </div>
       <div class="right">
@@ -355,6 +356,7 @@ onBeforeMount(() => {
     }
     .topRight {
       margin-left: 20px;
+
     }
   }
   .content {
@@ -365,9 +367,13 @@ onBeforeMount(() => {
       flex-direction: column;
       position: relative;
       padding: 20px 0 0 32px;
-      width: 669px;
+      width: 769px;
       border-right: 1px solid rgba(0, 0, 0, 0.06);
       overflow-y: auto;
+      .custom-report{
+        max-height: calc(100vh - 450px);
+        overflow-y: auto;
+      }
       .two-btns {
         position: absolute;
         right: 33px;
@@ -376,7 +382,7 @@ onBeforeMount(() => {
     }
     .right {
       height: 299px;
-      width: 448px;
+      width: 363px;
       margin-left: 31px;
       margin-top: 20px;
       background: #ffffff;

src/views/message/reportmessage/TemplateExample.vue

@@ -22,11 +22,11 @@
                     【报表周期】 xxxx-xx-xx - xxxx-xx-xx <br />
                     【累计报警次数】 XX次 <br />
                     【报警类型排行TOP5】 <br />
-                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(1) 报警问题： 发生XX次 <br />
-                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(2) 报警问题： 发生XX次 <br />
-                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(3) 报警问题： 发生XX次 <br />
-                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(4) 报警问题： 发生XX次 <br />
-                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(5) 报警问题： 发生XX次 <br />
+                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(1) 报警问题： 发生xx次 <br />
+                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(2) 报警问题： 发生xx次 <br />
+                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(3) 报警问题： 发生xx次 <br />
+                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(4) 报警问题： 发生xx次 <br />
+                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(5) 报警问题： 发生xx次 <br />
                 </div>
             </div>
         </div>
@@ -56,11 +56,11 @@
                     【报表周期】 xxxx-xx-xx - xxxx-xx-xx <br />
                     【平台累计访问次数】 XX次 <br />
                     【车间访问数量排行TOP5】 <br />
-                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(1) 车间一:  被访问XX次 <br />
-                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(2) 车间二:  被访问XX次 <br />
-                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(3) 车间三:  被访问XX次 <br />
-                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(4) 车间四:  被访问XX次 <br />
-                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(5) 车间五:  被访问XX次 <br />
+                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(1) 车间一:  被访问xx次 <br />
+                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(2) 车间二:  被访问xx次 <br />
+                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(3) 车间三:  被访问xx次 <br />
+                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(4) 车间四:  被访问xx次 <br />
+                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(5) 车间五:  被访问xx次 <br />
                 </div>
             </div>
         </div>
@@ -89,11 +89,11 @@
                 <div class="reportTitle">
                     【报表周期】 xxxx-xx-xx - xxxx-xx-xx <br />
                     【人员平台访问数据】 <br />
-                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(1) 人员1:  访问XX次, 其中访问车间1XX次<br />
-                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(2) 人员2:  访问XX次, 其中访问车间1XX次 <br />
-                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(3) 人员3:  访问XX次, 其中访问车间1XX次 <br />
-                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(4) 人员4:  访问XX次, 其中访问车间1XX次 <br />
-                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(5) 人员5:  访问XX次, 其中访问车间1XX次 <br />
+                    (1) 人员1:  访问xx次, 其中访问车间xx次<br />
+                    (2) 人员2:  访问xx次, 其中访问车间xx次 <br />
+                    (3) 人员3:  访问xx次, 其中访问车间xx次 <br />
+                    (4) 人员4:  访问xx次, 其中访问车间xx次 <br />
+                    (5) 人员5:  访问xx次, 其中访问车间xx次 <br />
                 </div>
             </div>
         </div>
@@ -111,14 +111,16 @@
 
 .exampleTitleDiv{
     /* width: 448px; */
+    width: 100%;
     height: 44px;
     background: #FAFAFA;
     border-radius: 3px 3px 0px 0px;
-    border: 1px solid #E9E9E9;
+    border-bottom: 1px solid #E9E9E9;
   }
 
   .exampleTitle{
     display: inline-block;
+      
     height: 22px;
     font-family: PingFangSC, PingFang SC;
     font-weight: 500;
@@ -146,6 +148,7 @@
     text-transform: none;
     margin-left: 24px;
     margin-top: 16px;
+    margin-bottom: 12px;
   }
 
   .reportblock {
@@ -156,13 +159,13 @@
 
   .reportTitle {
     display: inline-block;
-    width: 245;
+    width: 245px;
     height: 22px;
     font-family: PingFangSC, PingFang SC;
     font-weight: 400;
     font-size: 14px;
     color: rgba(0,0,0,0.45);
-    line-height: 22px;
+    line-height: 24px;
     text-align: left;
     font-style: normal;
   }

src/views/message/reportmessage/WeekReport.vue

@@ -21,7 +21,7 @@
         </el-col>
       </el-form-item>
 
-      <el-col class="text-center" :span="2">
+      <el-col class="text-center" :span="2"  style="padding-bottom: 10px;">
         <span class="text-gray-500">—</span>
       </el-col>
 
@@ -47,13 +47,13 @@
         <el-radio :value="3">自定义</el-radio>
       </el-radio-group>
     </el-form-item>
-    <el-form-item v-if="form.recipientType === 2" label="选择分组:" required prop="userGroupList">
+    <el-form-item v-if="form.recipientType === 2" label="选择分组:" required prop="userGroupList" style=" margin-top: 10px;">
       <el-col :span="10">
         <el-select
           v-model="form.userGroupList"
           multiple
           placeholder="请选择分组"
-          style="width: 330px"
+          style="width: 326px;"
           :disabled="disableType.contentDisable"
         >
           <el-option
@@ -70,7 +70,7 @@
       label="选择人员:"
       required
       prop="customUserList.value"
-      style="width: 530px"
+      style="width: 526px; margin-top: 10px;"
       :rules="{ required: true, message: '请选择推送人员', trigger: ['change'] }"
     >
       <el-col :span="18">
@@ -100,15 +100,25 @@ onMounted(() => {
 <style scoped>
 .reportCard {
   margin-left: 87px;
-  padding: 12px 12px 12px 12px;
+  padding: 12px 0px 0px 12px;
+  margin-bottom: 16px;
   background-color: #fafafa;
   width: 530px;
   box-sizing: border-box;
 }
-.el-form-item:nth-child() {
-  margin: 0px;
-}
-.el-form-item:nth-child() {
-  margin-top: 16px;
+ 
+.el-form-item--default {
+    /* margin-bottom: 8px; */
+    margin-bottom: 0px;
+    padding-bottom: 10px;
 }
+
+.reportCard > .el-form-item:last-child{
+  /* background:#ff0000; */
+    padding-bottom: 16px;
+  }
+
+ ::v-deep .el-select__selection{
+    min-height: 25px;
+  }
 </style>

src/views/message/reportmessage/YearReport.vue

@@ -12,14 +12,14 @@
               :options="yearArray"
               @change="handleChange"
               placeholder="每年1月1日"
-              style="width: 145.5px;"
+              style="width: 146.5px; height: 32px;"
              :disabled="disableType.contentDisable"
             />
           </el-col>
         </el-form-item>
 
-        <el-col class="text-center" :span="2">
-          <span class="text-gray-500">-</span>
+        <el-col class="text-center" :span="2" style="padding-bottom: 10px;"   >
+          <span class="text-gray-500">—</span>
         </el-col>
 
         <el-form-item 
@@ -31,7 +31,7 @@
                v-model="prop.form.pushTimeList[0]"
                   placeholder="09:00"
                   value-format="HH:mm:ss"
-                  style="width: 126.5px; height: 32px;"
+                  style="width: 146.5px; height: 32px;"
                   :disabled="disableType.contentDisable"
                   />
             </el-col>
@@ -53,6 +53,7 @@
       v-if="prop.form.recipientType === 2"
       label="选择分组:"
       required
+      style="margin-top: 10px;"
       prop="userGroupList"
       >
         <el-col :span="10">
@@ -60,7 +61,7 @@
             v-model="prop.form.userGroupList"
             multiple
             placeholder="请选择分组"
-            style="width: 240px"
+            style="width: 326px;"
             :disabled="disableType.contentDisable"
           >
             <el-option
@@ -78,6 +79,7 @@
       label="选择人员:"
       required
       prop="customUserList.value"
+      style="width: 526px; margin-top: 10px;"
       :rules="{ required: true, message: '请选择推送人员', trigger: ['change'] }"
       >
         <el-col :span="18">
@@ -134,15 +136,27 @@
 </script>
 
 <style scoped>
-  .reportCard{
-    margin-left: 87px;
-    background-color: #FAFAFA;
-    padding-top: 12px;
-    width: 530px;
-    .el-sellect{
-
-    }
-  }
+.reportCard {
+  margin-left: 87px;
+  padding: 12px 0px 0px 12px;
+  margin-bottom: 16px;
+  background-color: #fafafa;
+  width: 530px;
+  box-sizing: border-box;
+}
+ 
+.el-form-item--default {
+    /* margin-bottom: 8px; */
+    margin-bottom: 0px;
+    padding-bottom: 10px;
+}
 
+.reportCard > .el-form-item:last-child{
+  /* background:#ff0000; */
+    padding-bottom: 16px;
+  }  
 
+ ::v-deep .el-select__selection{
+    min-height: 25px;
+  }
 </style>

src/views/message/reportmessage/class.ts

@@ -75,6 +75,7 @@ export interface computeCustom {
 interface UserList {
     id: string;
     userNickname: string;
+    userLoginName: string;
     userId: number;
   }
 
@@ -114,12 +115,12 @@ export const toReportMessage = (form: reportMessage, receivedData: finalReportMe
     
     if(form.customUserList.value.length > 0){
         form.customUserList.value = form.customUserList.value.map((user) => {
-            return {"id": `u${user.userId}`, "name": user.userNickname, "userId": user.userId}
+            return {"id": `u${user.userId}`, "name": user.userLoginName + '-' + user.userNickname, "userId": user.userId}
         })
     }
     if(form.designatedUserList.value.length > 0){
         form.designatedUserList.value = form.designatedUserList.value.map((user) => {
-            return {"id": `u${user.userId}`, "name": user.userNickname, "userId": user.userId}
+            return {"id": `u${user.userId}`, "name": user.userLoginName + '-' + user.userNickname, "userId": user.userId}
         })
     }
     if(receivedData.statisticType === 2){
@@ -151,7 +152,7 @@ export const toReportMessage = (form: reportMessage, receivedData: finalReportMe
             tempconfig['recipientType'] = config.recipientType.toString()
             tempconfig['userGroupList'] = config.userGroupList
             tempconfig['customUserList'] = config.customUserList.map((user:UserList) => {
-                return {"id": `u${user.userId}`, "name": user.userNickname, "userId": user.userId}
+                return {"id": `u${user.userId}`, "name": user.userLoginName + '-' + user.userNickname, "userId": user.userId}
             })
             tempconfig['userGroupList'] = config.userGroupList?.map((user:any) => user.id)
             customPushConfigList.push(tempconfig)

src/views/message/reportmessage/components/Form.vue

@@ -116,6 +116,7 @@ const handleDelete = (record: Recordable) => {
   ElMessageBox.confirm('删除之后，这条数据无法恢复', '请确认是否删除', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
+    type: 'warning',
   })
     .then(() => {
       deleteReportConfig(type.value, record.statisticType).then(() => {