Merge branch 'CC' into 'dev'

完成一期消息报表功能

See merge request skyeye/skyeye_frontend/skyeye-admin!96

src/views/message/constant.ts

@@ -9,4 +9,7 @@ export const statisticTypeName = [
     { value: 3, label: "季报" },
     { value: 4, label: "年报" },
     { value: 5, label: "自定义" },
-];
+];
+export const messageTypeName = [
+    { value: 1, label: "报表消息" }
+]

src/views/message/persongroup/UserGroup.vue

@@ -52,7 +52,7 @@
             :key="index"
             style="display: flex; align-items: center"
           >
-            <span class="dot"></span>{{ getLabel(item.type, item.statisticType) }}
+            <span class="dot"></span>{{ getLabel(item.type, item.statisticType, item.messageType) }}
           </div>
         </div>
         <div v-if="refGroup && refGroup.length > 3" @click="showAll = !showAll" class="more-button">
@@ -90,21 +90,22 @@ import viewIcon from '@/assets/images/reportmessage/view.png';
 import editIcon from '@/assets/images/reportmessage/edit.png';
 import deleteIcon from '@/assets/images/reportmessage/delete.png';
 import { ElMessage, ElMessageBox } from 'element-plus';
-import { typeName, statisticTypeName } from '@/views/message/constant';
+import { typeName, statisticTypeName, messageTypeName } from '@/views/message/constant';
 const drawer = ref(false);
 const drawerTitle = ref<string>('新建人员分组');
 const handleCreateGroup = () => {
   drawer.value = true;
   drawerTitle.value = '新建人员分组';
 };
-const getLabel = (type, statisticType) => {
+const getLabel = (type, statisticType, messageType) => {
   const typeLabel = typeName.find((item) => item.value === type)?.label;
   const statisticTypeLabel = statisticTypeName.find((item) => item.value === statisticType)?.label;
-  return `${typeLabel} - ${statisticTypeLabel}`;
+  const messageTypeLabel = messageTypeName.find((item) => item.value === messageType)?.label;
+  return `${messageTypeLabel}-${typeLabel} - ${statisticTypeLabel}`;
 };
 const errorVisible = ref<boolean>(false);
 const showAll = ref<boolean>(false);
-const refGroup = ref<Array<{ type: number; statisticType: number }>>();
+const refGroup = ref<Array<{ type: number; statisticType: number; messageType: number }>>();
 const actionColumn: BasicColumn = reactive({
   width: 224,
   title: '操作',

src/views/message/persongroup/components/GroupBoard.vue

@@ -75,7 +75,7 @@
           v-model="ruleForm.userList"
           value-key="id"
           multiple
-          placeholder="请选择人员"
+          placeholder="请添加组内人员"
           @click="dialogVisible = true"
         >
           <el-option v-for="user in selectedUser" :key="user.id" :label="user.name" :value="user">

src/views/message/persongroup/components/Search.vue

@@ -10,11 +10,11 @@
     </el-space>
     <div class="flex-1 flex">
       <el-button type="primary" style="margin-left: 15px" @click="getUserGroup">
-        <img src="../img/search.png" style="margin-right: 8px;" />搜索
+        搜索
       </el-button>
-      <el-button style="margin-left: 15px" @click="resetSearch"
+      <!-- <el-button style="margin-left: 15px" @click="resetSearch"
         ><img src="../img/refresh.png" style="margin-right: 8px;" />重置
-      </el-button>
+      </el-button> -->
     </div>
   </div>
 </template>
@@ -26,10 +26,10 @@ import { storeToRefs } from 'pinia';
 const userGroup = userGroupList();
 const { queryStr } = storeToRefs(userGroup);
 const { getUserGroup } = userGroup;
-const resetSearch = () => {
-  queryStr.value = '';
-  getUserGroup();
-};
+// const resetSearch = () => {
+//   queryStr.value = '';
+//   getUserGroup();
+// };
 </script>
 
 <style lang="scss" scoped>

src/views/message/persongroup/components/SelectTree.vue

@@ -15,6 +15,7 @@
         node-key="id"
         :props="defaultProps"
         :default-expand-all="true"
+        @node-click="handleNodeClick"
         @check-change="handleCheckChange"
       />
     </div>
@@ -110,7 +111,7 @@ const total = ref<number>(0);
 const selected = ref<number>(0);
 const selectedPeople = ref<treeSelected[]>([]);
 const handleCheckChange = (node, checked) => {
-  if (!node.children || node.children.length === 0 && node.userId) {
+  if (!node.children || (node.children.length === 0 && node.userId)) {
     if (checked) {
       selectedPeople.value.push({
         id: node.id,
@@ -142,6 +143,10 @@ const handleCancle = () => {
 const handleSubmit = () => {
   emit('submit', selectedPeople.value);
 };
+const handleNodeClick = (node) => {
+  const isChecked = treeRef.value!.getCheckedKeys().includes(node.id);
+  treeRef.value!.setChecked(node.id,!isChecked,true);
+};
 const props = defineProps<{
   selectedUser: treeSelected[];
 }>();

src/views/message/reportmessage/MonthReport.vue

@@ -97,7 +97,7 @@
   const dayArray = Array.from({ length: 31 }, (_, index) => ({
     id: index + 1,
     value: `${index + 1}`,
-    label: `${index + 1} 日`
+    label: `每月${index + 1} 日`
   }));
 
   onMounted(()=>{

src/views/message/reportmessage/ReportMessage.vue

@@ -17,7 +17,7 @@
   
   <script setup lang="ts">
 import Form from './components/Form.vue';
-import { typeName } from '@/views/message/constant'
+import { typeName } from '@/views/message/constant';
 import { storeToRefs } from 'pinia';
 import useFormList from './store/useFormList';
 const formStore = useFormList();

src/views/message/reportmessage/ReportOperation.vue

@@ -2,354 +2,382 @@
 <template>
   <div class="page">
     <div class="top">
-      <div class="topLeft">
-        <a style="color: #303133;" @click="clickBack"><el-icon><Back /></el-icon><span>返回</span></a>
+      <div class="topLeft" @click="clickBack">
+        <img src="./img/rollback.png" style="margin-right: 8px"/><span
+          >返回</span
+        >
       </div>
       <div class="topRight">
-        <span class="topText" v-if="pageType === 1">新建报表配置</span>
-        <span class="topText" v-if="pageType === 2">查看报表配置</span>
-        <span class="topText" v-if="pageType === 3">编辑报表配置</span>
+        <span v-if="pageType === 1">新建报表配置</span>
+        <span v-if="pageType === 2">查看报表配置</span>
+        <span v-if="pageType === 3">编辑报表配置</span>
       </div>
     </div>
-
-    
-    <div class="right">
-      <TemplateExample :form="form" :disableType="disableType"></TemplateExample>
-    </div>
-
-
-    <div class="left">
-      <el-form
-        ref="ruleFormRef"
-        style="max-width: 1000px"
-        :model="form"
-        :rules="rules"
-        label-width="auto"
-        class="demo-ruleForm"
-        :size="formSize"
-        status-icon
-      >
-        <el-form-item 
-          v-if="form.type === 3"
-          label="选择人员:"
-          required
-          prop="designatedUserList.value"
-          :rules="{ required: true, message: '请选择推送人员', trigger: ['change'] }"
+    <div class="content">
+      <div class="left">
+        <el-form
+          ref="ruleFormRef"
+          style="max-width: 1000px"
+          :model="form"
+          :rules="rules"
+          label-width="auto"
+          class="demo-ruleForm"
+          :size="formSize"
+          :label-position="labelPosition"
+        >
+          <el-form-item
+            v-if="form.type === 3"
+            label="指定人员:"
+            required
+            prop="designatedUserList.value"
+            :rules="{ required: true, message: '请选择推送人员', trigger: ['change'] }"
           >
             <el-col :span="18">
-              <DesignatedUserList :form="form" :disableType="disableType"/>
-            </el-col>
-        </el-form-item>
-
-        <el-form-item label="统计时间段" prop="statisticType" required>
-          <el-radio-group v-model="form.statisticType"  :disabled="disableType.statisticTypeDisable">
-            <el-tooltip :visible="weekVisible" placement="top">
-              <template #content>
-                <span>自然周数据(周一至周日),<br>每次将推送上一周数据</span>
-              </template>
-              <el-radio :value="1" @mouseenter="weekVisible = true" @mouseleave="weekVisible = false">周报</el-radio>
-            </el-tooltip>
-
-            <el-tooltip :visible="monthVisible" placement="top">
-              <template #content>
-                <span>自然月数据(每月第一天至最后一天),<br>每次将推送上个月数据</span>
-              </template>
-              <el-radio :value="2" @mouseenter="monthVisible = true" @mouseleave="monthVisible = false">月报</el-radio>
-            </el-tooltip>
-
-            <el-tooltip :visible="seasonVisible" placement="top">
-              <template #content>
-                <span>自然季数据,<br>每次将推送上个季度数据</span>
-              </template>
-              <el-radio :value="3" @mouseenter="seasonVisible = true" @mouseleave="seasonVisible = false">季报</el-radio>
-            </el-tooltip>
-
-            <el-tooltip :visible="yearVisible" placement="top">
-              <template #content>
-                <span>整年数据,<br>每次将推送上一年数据</span>
-              </template>
-              <el-radio :value="4" @mouseenter="yearVisible = true" @mouseleave="yearVisible = false">年报</el-radio>
-            </el-tooltip>
-
-            <el-tooltip :visible="customVisible" placement="top">
-              <template #content>
-                <span>根据个人需求按开始和结束日期进行统计</span>
-              </template>
-              <el-radio el-radio :value="5" @mouseenter="customVisible = true" @mouseleave="customVisible = false">自定义</el-radio>
-            </el-tooltip>
-
-          </el-radio-group>
-        </el-form-item>
- 
-
-        <div v-if="form.statisticType === 1">
-          <WeekReport :form="form" :disableType="disableType"></WeekReport>
-        </div>
-
-        <div v-if="form.statisticType === 2">
-          <MonthReport :form="form" :disableType="disableType"></MonthReport>
-        </div>
-
-        <div v-if="form.statisticType === 4">
-          <YearReport :form="form" :disableType="disableType"></YearReport>
-        </div>
-
-        <div v-if="form.statisticType === 5">
-        
-          <CustomReport ref="CustomReportComponent" :form="form" :disableType="disableType" :ruleFormRef="ruleFormRef"></CustomReport>
-        </div>
-
-        <el-form-item label="推送渠道" prop="pushChannel" required>
-          <el-checkbox-group v-model="form.pushChannel" :disabled="disableType.contentDisable">
-            <el-col :span="2">
-              <el-checkbox :value="1" name="channel"> 蓝信推送 </el-checkbox>
+              <DesignatedUserList :form="form" :disableType="disableType" />
             </el-col>
-            <el-col :span="2">
-              <el-checkbox :value="2" name="channel"> 平台推送 </el-checkbox>
-            </el-col>
-          </el-checkbox-group>
-        </el-form-item>
-
-        <el-form-item label="操作人">
-          <el-input
-            style="width: 240px"
-            disabled
-            :placeholder="operater"
-          />
-        </el-form-item>
-
-        <el-form-item>
-          <el-button type="primary" @click="submitForm(ruleFormRef)" :disabled="disableType.contentDisable"> 确定 </el-button>
-          <!-- <el-button @click="resetForm(ruleFormRef)" :disabled="disableType.contentDisable">重置</el-button> -->
-          <el-button @click="clickBack">取消</el-button>
-        </el-form-item>
-      </el-form>
+          </el-form-item>
+
+          <el-form-item label="报表周期：" prop="statisticType" required>
+            <el-radio-group
+              v-model="form.statisticType"
+              :disabled="disableType.statisticTypeDisable"
+            >
+              <el-tooltip :visible="weekVisible" placement="top">
+                <template #content>
+                  <span>自然周数据(周一至周日),<br />每次将推送上一周数据</span>
+                </template>
+                <el-radio
+                  :value="1"
+                  @mouseenter="weekVisible = true"
+                  @mouseleave="weekVisible = false"
+                  >周报</el-radio
+                >
+              </el-tooltip>
+
+              <el-tooltip :visible="monthVisible" placement="top">
+                <template #content>
+                  <span>自然月数据(每月第一天至最后一天),<br />每次将推送上个月数据</span>
+                </template>
+                <el-radio
+                  :value="2"
+                  @mouseenter="monthVisible = true"
+                  @mouseleave="monthVisible = false"
+                  >月报</el-radio
+                >
+              </el-tooltip>
+
+              <el-tooltip :visible="seasonVisible" placement="top">
+                <template #content>
+                  <span>自然季数据,<br />每次将推送上个季度数据</span>
+                </template>
+                <el-radio
+                  :value="3"
+                  @mouseenter="seasonVisible = true"
+                  @mouseleave="seasonVisible = false"
+                  >季报</el-radio
+                >
+              </el-tooltip>
+
+              <el-tooltip :visible="yearVisible" placement="top">
+                <template #content>
+                  <span>整年数据,<br />每次将推送上一年数据</span>
+                </template>
+                <el-radio
+                  :value="4"
+                  @mouseenter="yearVisible = true"
+                  @mouseleave="yearVisible = false"
+                  >年报</el-radio
+                >
+              </el-tooltip>
+
+              <el-tooltip :visible="customVisible" placement="top">
+                <template #content>
+                  <span>根据个人需求按开始和结束日期进行统计</span>
+                </template>
+                <el-radio
+                  el-radio
+                  :value="5"
+                  @mouseenter="customVisible = true"
+                  @mouseleave="customVisible = false"
+                  >自定义</el-radio
+                >
+              </el-tooltip>
+            </el-radio-group>
+          </el-form-item>
+
+          <div v-if="form.statisticType === 1">
+            <WeekReport :form="form" :disableType="disableType"></WeekReport>
+          </div>
+
+          <div v-if="form.statisticType === 2">
+            <MonthReport :form="form" :disableType="disableType"></MonthReport>
+          </div>
+
+          <div v-if="form.statisticType === 4">
+            <YearReport :form="form" :disableType="disableType"></YearReport>
+          </div>
+
+          <div v-if="form.statisticType === 5">
+            <CustomReport
+              ref="CustomReportComponent"
+              :form="form"
+              :disableType="disableType"
+              :ruleFormRef="ruleFormRef"
+            ></CustomReport>
+          </div>
+
+          <el-form-item label="推送渠道：" prop="pushChannel" required>
+            <el-checkbox-group v-model="form.pushChannel" :disabled="disableType.contentDisable">
+              <el-col :span="2">
+                <el-checkbox :value="1" name="channel"> 蓝信推送 </el-checkbox>
+              </el-col>
+              <el-col :span="2">
+                <el-checkbox :value="2" name="channel"> 平台推送 </el-checkbox>
+              </el-col>
+            </el-checkbox-group>
+          </el-form-item>
+
+          <el-form-item label="操作人：">
+            <el-input style="width: 425px" disabled :placeholder="operater" />
+          </el-form-item>
+          <div class="two-btns">
+            <el-button
+              type="primary"
+              @click="submitForm(ruleFormRef)"
+              :disabled="disableType.contentDisable"
+            >
+              确定
+            </el-button>
+            <el-button @click="clickBack">取消</el-button>
+          </div>
+        </el-form>
+      </div>
+      <div class="right">
+        <TemplateExample :form="form" :disableType="disableType"></TemplateExample>
+      </div>
     </div>
   </div>
-
 </template>
 
 <script lang="ts" setup>
-  import { reactive, ref, watch, onBeforeMount } from 'vue';
-  import type { FormInstance } from 'element-plus';
-  import TemplateExample from './TemplateExample.vue';
-  import WeekReport from './WeekReport.vue';
-  import MonthReport from './MonthReport.vue';
-  import YearReport from './YearReport.vue';
-  import CustomReport from './CustomReport.vue';
-  import { reportMessage, toReportMessage, reportMessageToFinal } from './class.ts';
-  import { addMassage, searchMassage, editMassage } from '@/api/sendMessage/sendMessage';
-  import { ElMessage } from 'element-plus';
-  import { storeToRefs } from 'pinia';
-  import {useUserStore} from '@/store/modules/user';
-  import { useRoute, useRouter } from 'vue-router';
-  import DesignatedUserList from '@/views/message/designatedUserSelectTree.vue';
-  import { Back } from '@element-plus/icons-vue'
-
-  
-  const useUser = useUserStore();
-  const {info} = storeToRefs(useUser)
-  let operater = info.value.nickname
-
-
-  const weekVisible = ref(false)  // 控制Tooltip显示
-  const monthVisible = ref(false)  // 控制Tooltip显示
-  const seasonVisible = ref(false)  // 控制Tooltip显示
-  const yearVisible = ref(false)  // 控制Tooltip显示
-  const customVisible = ref(false)  // 控制Tooltip显示
-
-
-  let disableType = ref({"statisticTypeDisable": false, "contentDisable": false})  // 控制是否可编辑
-
-
-  const formSize = ref('default'); // 校验表单
-  const ruleFormRef = ref();
-  
-
-  // let pageType = 3  // 功能类型：1是新增，2是查询，3是编辑
-  // let reportType = 1  // 报表类型：1是违规报警，2是平台访问，3是指定人员访问
-  const route = useRoute()
-  const router = useRouter()
-  const pageType = ref<number>(route.query.operationType ? Number(route.query.operationType) : 0);
-  const reportType = ref<number>(route.query.type ? Number(route.query.type) : 0);
-  const statisticType = ref<number>(route.query.statisticType ? Number(route.query.statisticType) : 0)
-  let queryType = {"type": reportType.value, "statisticType": statisticType.value}
-  
-
-  const form = reactive<reportMessage>({
-    configIdList: null,
-    type: 0,
-    statisticType: 0,
-    monthAndDayList: ['1', '1'],
-    dayOfWeek: 1,
-    monthList: [''],
-    dayOfMonthList: ['1'],
-    pushTimeList: ['09:00:00'],
-    pushChannel: [],
-    userGroupList: [],
-    designatedUserList: [],
-    recipientType: undefined,
-    customPushConfigList: [],
-    customUserList: []
-  });
-
-  form.customUserList.value = []  // 防止进入页面开始就显示校验错误
-  form.designatedUserList.value = []
-
-  const rules = reactive({
-    statisticType: [{ required: true, message: '请选择统计时间段', trigger: 'change, blur' }],
-    pushChannel: [{ required: true, message: '请选择推送渠道', trigger: 'change' }],
-    dayOfWeek: [{ required: true, message: '请选择推送日期', trigger: 'change' }],
-    dayOfMonthList: [{ required: true, message: '请选择推送日', trigger: 'change' }],
-    recipientType: [{ required: true, message: '请选择推送对象', trigger: ['blur', 'change'] }],
-    userGroupList: [{ required: true, message: '请选择推送分组', trigger: 'change' }],
-    // customUserList: [{ required: true, message: '请选择推送人员', trigger: 'change, blur' }],
-  });
-
-  const submitForm = async (formEl: FormInstance | undefined) => {
-    if (!formEl) return
-    await formEl.validate((valid, fields) => {
-      if (valid) {
-        console.log('submit!')
-        let submitForm = reportMessageToFinal(form)
-        console.log("submitForm", submitForm);
-        if (pageType.value != 3){
-          addMassage(submitForm).then((res) => {
-            console.log("新增res", res);
-            
-            ElMessage.success('新增成功');
-            router.back()
-            return res;
-          });
-        }
-        else{
-          editMassage(submitForm).then((res) => {
-            console.log("修改res", res);
-            
-            ElMessage.success('修改成功');
-            router.back()
-            return res;
-          });
-        }
-        
+import { reactive, ref, watch, onBeforeMount } from 'vue';
+import type { FormInstance } from 'element-plus';
+import TemplateExample from './TemplateExample.vue';
+import WeekReport from './WeekReport.vue';
+import MonthReport from './MonthReport.vue';
+import YearReport from './YearReport.vue';
+import CustomReport from './CustomReport.vue';
+import { reportMessage, toReportMessage, reportMessageToFinal } from './class.ts';
+import { addMassage, searchMassage, editMassage } from '@/api/sendMessage/sendMessage';
+import { ElMessage } from 'element-plus';
+import { storeToRefs } from 'pinia';
+import { useUserStore } from '@/store/modules/user';
+import { useRoute, useRouter } from 'vue-router';
+import DesignatedUserList from '@/views/message/designatedUserSelectTree.vue';
+import type { FormProps } from 'element-plus';
+const labelPosition = ref<FormProps['labelPosition']>('left');
+
+const useUser = useUserStore();
+const { info } = storeToRefs(useUser);
+let operater = info.value.nickname;
+
+const weekVisible = ref(false); // 控制Tooltip显示
+const monthVisible = ref(false); // 控制Tooltip显示
+const seasonVisible = ref(false); // 控制Tooltip显示
+const yearVisible = ref(false); // 控制Tooltip显示
+const customVisible = ref(false); // 控制Tooltip显示
+
+let disableType = ref({ statisticTypeDisable: false, contentDisable: false }); // 控制是否可编辑
+
+const formSize = ref('default'); // 校验表单
+const ruleFormRef = ref();
+
+// let pageType = 3  // 功能类型：1是新增，2是查询，3是编辑
+// let reportType = 1  // 报表类型：1是违规报警，2是平台访问，3是指定人员访问
+const route = useRoute();
+const router = useRouter();
+const pageType = ref<number>(route.query.operationType ? Number(route.query.operationType) : 0);
+const reportType = ref<number>(route.query.type ? Number(route.query.type) : 0);
+const statisticType = ref<number>(
+  route.query.statisticType ? Number(route.query.statisticType) : 0,
+);
+let queryType = { type: reportType.value, statisticType: statisticType.value };
+
+const form = reactive<reportMessage>({
+  type: 0,
+  statisticType: 0,
+  monthAndDayList: ['1', '1'],
+  dayOfWeek: 1,
+  monthList: [''],
+  dayOfMonthList: ['1'],
+  pushTimeList: ['09:00:00'],
+  pushChannel: [],
+  userGroupList: [],
+  designatedUserList: [],
+  recipientType: undefined,
+  customPushConfigList: [],
+  customUserList: [],
+});
+
+form.customUserList.value = []; // 防止进入页面开始就显示校验错误
+form.designatedUserList.value = [];
+
+const rules = reactive({
+  statisticType: [{ required: true, message: '请选择统计时间段', trigger: 'change, blur' }],
+  pushChannel: [{ required: true, message: '请选择推送渠道', trigger: 'change' }],
+  dayOfWeek: [{ required: true, message: '请选择推送日期', trigger: 'change' }],
+  dayOfMonthList: [{ required: true, message: '请选择推送日', trigger: 'change' }],
+  recipientType: [{ required: true, message: '请选择推送对象', trigger: ['blur', 'change'] }],
+  userGroupList: [{ required: true, message: '请选择推送分组', trigger: 'change' }],
+  // customUserList: [{ required: true, message: '请选择推送人员', trigger: 'change, blur' }],
+});
+
+  // const form = reactive<reportMessage>({
+  //   configIdList: null,
+  //   type: 0,
+  //   statisticType: 0,
+  //   monthAndDayList: ['1', '1'],
+  //   dayOfWeek: 1,
+  //   monthList: [''],
+  //   dayOfMonthList: ['1'],
+  //   pushTimeList: ['09:00:00'],
+  //   pushChannel: [],
+  //   userGroupList: [],
+  //   designatedUserList: [],
+  //   recipientType: undefined,
+  //   customPushConfigList: [],
+  //   customUserList: []
+  // });
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!');
+      let submitForm = reportMessageToFinal(form);
+      console.log('submitForm', submitForm);
+      if (pageType.value != 3) {
+        addMassage(submitForm).then((res) => {
+          console.log('新增res', res);
+          ElMessage.success('新增成功');
+          router.back();
+          return res;
+        });
       } else {
-        console.log('error submit!', fields)
-      }
-    })
-  };
-
-  const resetForm = (formEl: FormInstance | undefined) => {
-    if (!formEl) return;
-    formEl.resetFields();
-  };
-
-  const clickBack = () => {
-    router.back()
-  };
-
-  watch(form, () => {
-    console.log(`form newvalue:`, form);
-})
+        editMassage(submitForm).then((res) => {
+          console.log('修改res', res);
 
-  const getDisableType = (pageType) => {
-      if (pageType === 1){  // 新增
-        disableType.value.statisticTypeDisable = false
-        disableType.value.contentDisable = false
+          ElMessage.success('修改成功');
+          router.back();
+          return res;
+        });
       }
-      else if (pageType === 2){  // 查询
-        disableType.value.statisticTypeDisable = true
-        disableType.value.contentDisable = true
-      }
-      else if (pageType === 3){  // 编辑
-        disableType.value.statisticTypeDisable = true
-        disableType.value.contentDisable = false
-      }
-  };
-
-
-  onBeforeMount(()=>{
-    if (pageType.value === 1){  // 新增
-      getDisableType(1)
+    } else {
+      console.log('error submit!', fields);
     }
-    if (pageType.value === 2){  // 查询
-      getDisableType(2)
-      searchMassage(queryType).then((res) => {
-        console.log("res", res);
-        toReportMessage(form, res)
-        return res;
-      });
-    }
-    if (pageType.value === 3){  // 编辑
-      getDisableType(3)
-      searchMassage(queryType).then((res) => {
-        console.log("res", res);
-        toReportMessage(form, res)
-        return res;
-      });
-    }
-    form.type = reportType.value
-  })
-
-</script>
-
-<style scoped>
-  .page {
-    position: relative;
-    /* height: calc(100vh - 64px - 12px); */
-    height: calc(100vh - 64px - 12px);
-    background-color: #ffffff;
-  }
-
-  .left{
-    float: left;
-    height: calc(100vh - 111px);
-    width: 50%;
-    margin-left: 41px;
-    padding-top: 20px;
-    border-right: 1px solid rgba(0,0,0,0.06);
-    overflow: auto;
+  });
+};
+
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.resetFields();
+};
+
+const clickBack = () => {
+  router.back();
+};
+
+watch(form, () => {
+  console.log(`form newvalue:`, form);
+});
+
+const getDisableType = (pageType) => {
+  if (pageType === 1) {
+    // 新增
+    disableType.value.statisticTypeDisable = false;
+    disableType.value.contentDisable = false;
+  } else if (pageType === 2) {
+    // 查询
+    disableType.value.statisticTypeDisable = true;
+    disableType.value.contentDisable = true;
+  } else if (pageType === 3) {
+    // 编辑
+    disableType.value.statisticTypeDisable = true;
+    disableType.value.contentDisable = false;
   }
+};
 
-  .right{
-    float: right;
-    height: 294px;
-    width: 30%;
-    /* margin-right: 59px; */
-    margin-right: 12%;
-    margin-top: 20px;
-    background: #FFFFFF;
-    border-radius: 4px 4px 0px 0px;
-    border: 1px solid #E9E9E9;
+onBeforeMount(() => {
+  if (pageType.value === 1) {
+    // 新增
+    getDisableType(1);
   }
-
-  .top{
-    height: 34.5px;
-    border-bottom: 1px solid #E9E9E9;
+  if (pageType.value === 2) {
+    // 查询
+    getDisableType(2);
+    searchMassage(queryType).then((res) => {
+      console.log('res', res);
+      toReportMessage(form, res);
+      return res;
+    });
   }
-
-  .topLeft{
-    display: inline-block;
-    height: 34.5px;
-    margin-left: 20px;
-    margin-top: 7px;
+  if (pageType.value === 3) {
+    // 编辑
+    getDisableType(3);
+    searchMassage(queryType).then((res) => {
+      console.log('res', res);
+      toReportMessage(form, res);
+      return res;
+    });
   }
+  form.type = reportType.value;
+});
+</script>
 
-  .topRight{
-    display: inline-block;
-    height: 34.5px;
-
+<style lang="scss" scoped>
+.page {
+  height: calc(100vh - 64px - 18px);
+  background-color: rgba(255, 255, 255, 1);
+  .top {
+    display: flex;
+    padding: 16px 0 15px 20px;
+    border-bottom: 1px solid #e9e9e9;
+    .topLeft {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      a {
+        display: flex;
+        align-items: center;
+      }
+    }
+    .topRight {
+      margin-left: 20px;
+    }
   }
-
-  .topText{
-    display: inline-block;
-    width: 245;
-    height: 34px;
-    font-family: PingFangSC, PingFang SC;
-    font-weight: 400;
-    font-size: 14px;
-    color: #303133;
-    text-align: left;
-    font-style: normal;
-    margin-left: 20px;
+  .content {
+    display: flex;
+    height: calc(100vh - 130px);
+    .left {
+      position: relative;
+      padding: 20px 0 0 32px;
+      width: 669px;
+      border-right: 1px solid rgba(0, 0, 0, 0.06);
+      overflow-y: auto;
+      .two-btns {
+        position: absolute;
+        right: 33px;
+        bottom: 32px;
+      }
+    }
+    .right {
+      height: 299px;
+      width: 448px;
+      margin-left: 31px;
+      margin-top: 20px;
+      background: #ffffff;
+      border-radius: 4px 4px 0px 0px;
+      border: 1px solid #e9e9e9;
+    }
   }
+}
 </style>

src/views/message/reportmessage/TemplateExample.vue

@@ -19,7 +19,7 @@
             <div style="height: 189px;">
                 <div class="exampleContentTitle" style="float: left; margin-top: 0px;">内容示例:</div>
                 <div class="reportTitle">
-                    【统计时间段】 xxxx-xx-xx - xxxx-xx-xx <br />
+                    【报表周期】 xxxx-xx-xx - xxxx-xx-xx <br />
                     【累计报警次数】 XX次 <br />
                     【报警类型排行TOP5】 <br />
                     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(1) 报警问题： 发生XX次 <br />
@@ -53,7 +53,7 @@
             <div style="height: 189px;">
                 <div class="exampleContentTitle" style="float: left; margin-top: 0px;">内容示例:</div>
                 <div class="reportTitle">
-                    【统计时间段】 xxxx-xx-xx - xxxx-xx-xx <br />
+                    【报表周期】 xxxx-xx-xx - xxxx-xx-xx <br />
                     【平台累计访问次数】 XX次 <br />
                     【车间访问数量排行TOP5】 <br />
                     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(1) 车间一:  被访问XX次 <br />
@@ -87,7 +87,7 @@
             <div style="height: 189px;">
                 <div class="exampleContentTitle" style="float: left; margin-top: 0px;">内容示例:</div>
                 <div class="reportTitle">
-                    【统计时间段】 xxxx-xx-xx - xxxx-xx-xx <br />
+                    【报表周期】 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 />

src/views/message/reportmessage/WeekReport.vue

@@ -1,116 +1,114 @@
 <template>
   <div class="reportCard">
     <el-form-item label="推送时间:" required>
-      <el-form-item 
-        prop="dayOfWeek"
-        >
-          <el-col :span="22">
-            <el-select 
-              v-model="form.dayOfWeek" 
-              placeholder="每周一" 
-              style="width: 146.5px; height: 32px;"
-              :disabled="disableType.contentDisable"
-            >
-              <el-option label="周一" :value="1" />
-              <el-option label="周二" :value="2" />
-              <el-option label="周三" :value="3" />
-              <el-option label="周四" :value="4" />
-              <el-option label="周五" :value="5" />
-              <el-option label="周六" :value="6" />
-              <el-option label="周日" :value="7" />
-            </el-select>
-          </el-col>
+      <el-form-item prop="dayOfWeek">
+        <el-col :span="22">
+          <el-select
+            v-model="form.dayOfWeek"
+            placeholder="每周一"
+            style="width: 146.5px; height: 32px"
+            :disabled="disableType.contentDisable"
+            prop="dayOfWeek"
+          >
+            <el-option label="周一" :value="1" />
+            <el-option label="周二" :value="2" />
+            <el-option label="周三" :value="3" />
+            <el-option label="周四" :value="4" />
+            <el-option label="周五" :value="5" />
+            <el-option label="周六" :value="6" />
+            <el-option label="周日" :value="7" />
+          </el-select>
+        </el-col>
       </el-form-item>
 
       <el-col class="text-center" :span="2">
         <span class="text-gray-500">—</span>
       </el-col>
 
-      <el-form-item 
-        prop="pushTimeList[0]" 
+      <el-form-item
+        prop="pushTimeList[0]"
         :rules="{ required: true, message: '请选择时间', trigger: 'blur' }"
-        >
-          <el-col :span="22">
-            <el-time-picker 
-              v-model="form.pushTimeList[0]" 
-              placeholder="09:00" 
-              value-format="HH:mm:ss" 
-              style="width: 146.5px; height: 32px;" 
-              :disabled="disableType.contentDisable"
-            />
-          </el-col>
+      >
+        <el-col :span="22">
+          <el-time-picker
+            v-model="form.pushTimeList[0]"
+            placeholder="09:00"
+            value-format="HH:mm:ss"
+            style="width: 146.5px; height: 32px"
+            :disabled="disableType.contentDisable"
+          />
+        </el-col>
       </el-form-item>
     </el-form-item>
-
     <el-form-item label="推送对象:" required prop="recipientType">
-      <el-radio-group 
-        v-model="form.recipientType" 
-        :disabled="disableType.contentDisable"
-      >
+      <el-radio-group v-model="form.recipientType" :disabled="disableType.contentDisable">
         <el-radio :value="1">全员</el-radio>
         <el-radio :value="2">分组</el-radio>
         <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-col :span="10">
-          <el-select
-            v-model="form.userGroupList"
-            multiple
-            placeholder="请选择分组"
-            style="width: 240px"
-            :disabled="disableType.contentDisable"
-          >
-            <el-option
-              v-for="item in options"
-              :key="item.userGroupId"
-              :label="item.name"
-              :value="item.userGroupId"
-            />
-          </el-select>
-        </el-col>
+    <el-form-item v-if="form.recipientType === 2" label="选择分组:" required prop="userGroupList">
+      <el-col :span="10">
+        <el-select
+          v-model="form.userGroupList"
+          multiple
+          placeholder="请选择分组"
+          style="width: 330px"
+          :disabled="disableType.contentDisable"
+        >
+          <el-option
+            v-for="item in options"
+            :key="item.userGroupId"
+            :label="item.name"
+            :value="item.userGroupId"
+          />
+        </el-select>
+      </el-col>
     </el-form-item>
-
-    <el-form-item 
+    <el-form-item
       v-if="form.recipientType === 3"
       label="选择人员:"
       required
       prop="customUserList.value"
+      style="width: 530px"
       :rules="{ required: true, message: '请选择推送人员', trigger: ['change'] }"
-      >
-        <el-col :span="18">
-          <SelectTree :form="form" :disableType="disableType"/>
-        </el-col>
+    >
+      <el-col :span="18">
+        <SelectTree :form="form" :disableType="disableType" />
+      </el-col>
     </el-form-item>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { ref, onMounted } from 'vue';
-  import { searchGroup } from '@/api/sendMessage/sendMessage';
-  import SelectTree from '../SelectTree.vue';
+import { ref, onMounted } from 'vue';
+import { searchGroup } from '@/api/sendMessage/sendMessage';
+import SelectTree from '../SelectTree.vue';
 
-  const prop = defineProps(['form', 'disableType'])
-  const options =  ref()
+const prop = defineProps(['form', 'disableType']);
+const options = ref();
 
-  onMounted(()=>{
-    searchGroup().then(res => {
-      options.value = res.groupVOList
-    }).catch(error => {});
-  })
+onMounted(() => {
+  searchGroup()
+    .then((res) => {
+      options.value = res.groupVOList;
+    })
+    .catch((error) => {});
+});
 </script>
 
 <style scoped>
-  .reportCard{
-    margin-left: 87px;
-    background-color: #FAFAFA;
-    padding-top: 12px;
-    width: 530px;
-  }
+.reportCard {
+  margin-left: 87px;
+  padding: 12px 12px 12px 12px;
+  background-color: #fafafa;
+  width: 530px;
+  box-sizing: border-box;
+}
+.el-form-item:nth-child() {
+  margin: 0px;
+}
+.el-form-item:nth-child() {
+  margin-top: 16px;
+}
 </style>

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

@@ -75,4 +75,9 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
+::v-deep .s-table {
+  .el-table__body-wrapper {
+    overflow-y: auto;
+  }
+}
 </style>