提交页面

plus-ui-ts/src/assets/images/expand.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 81" class="design-iconfont">
+  <defs>
+    <clipPath id="znc8uu9dp__cd7y4d0pha">
+      <rect y="31" width="20" height="20" rx="0"/>
+    </clipPath>
+  </defs>
+  <path d="M0,68C0,75.1797,5.8203,81,13,81L20,81L20,0L13,0C5.8203,0,0,5.8203,0,13L0,68Z" fill="#FFF"/>
+  <g clip-path="url(#znc8uu9dp__cd7y4d0pha)">
+    <path d="M7.83333,40.999955976562504L13.75,46.9166259765625L12.58333,48.0833259765625L6.66667,42.1666259765625L5.5,40.999955976562504L6.66667,39.833295976562496L12.58333,33.9166259765625L13.75,35.0832959765625L7.83333,40.999955976562504Z" fill="#1890FF" style="mix-blend-mode:passthrough"/>
+  </g>
+</svg>

plus-ui-ts/src/assets/images/fold.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 81" class="design-iconfont">
+  <defs>
+    <clipPath id="lle4pn1q7__40eg9wr3ba">
+      <rect x="20" y="31" width="20" height="20" rx="0"/>
+    </clipPath>
+  </defs>
+  <path d="M0,68C0,75.1797,5.8203,81,13,81L20,81L20,0L13,0C5.8203,0,0,5.8203,0,13L0,68Z" fill="#FFF"/>
+  <g transform="matrix(-1 0 0 1 40 0)" clip-path="url(#lle4pn1q7__40eg9wr3ba)">
+    <path d="M27.83333,40.999955976562504L33.75,46.9166259765625L32.583330000000004,48.0833259765625L26.66667,42.1666259765625L25.5,40.999955976562504L26.66667,39.833295976562496L32.583330000000004,33.9166259765625L33.75,35.0832959765625L27.83333,40.999955976562504Z" fill="#1890FF" style="mix-blend-mode:passthrough"/>
+  </g>
+</svg>

plus-ui-ts/src/views/index.vue

@@ -37,19 +37,19 @@
         </template>
         <div class="custom-card week-card">
           <div class="card-item">
-            <span>{{ statData.monthCount }}</span>
+            <span>{{ statData.weekCount }}</span>
             <span>所有数量</span>
           </div>
           <div class="card-item">
-            <span>{{ statData.monthAlready }}</span>
+            <span>{{ statData.weekAlready }}</span>
             <span>已解决</span>
           </div>
           <div class="card-item">
-            <span>{{ statData.monthNot }}</span>
+            <span>{{ statData.weekNot }}</span>
             <span>未解决</span>
           </div>
           <div class="card-item">
-            <span>{{ statData.monthReport }}</span>
+            <span>{{ statData.weekReport }}</span>
             <span>已上报</span>
           </div>
         </div>
@@ -63,19 +63,19 @@
         </template>
         <div class="custom-card day-card">
           <div class="card-item">
-            <span>{{ statData.monthCount }}</span>
+            <span>{{ statData.dayCount }}</span>
             <span>所有数量</span>
           </div>
           <div class="card-item">
-            <span>{{ statData.monthAlready }}</span>
+            <span>{{ statData.dayAlready }}</span>
             <span>已解决</span>
           </div>
           <div class="card-item">
-            <span>{{ statData.monthNot }}</span>
+            <span>{{ statData.dayNot }}</span>
             <span>未解决</span>
           </div>
           <div class="card-item">
-            <span>{{ statData.monthReport }}</span>
+            <span>{{ statData.dayReport }}</span>
             <span>已上报</span>
           </div>
         </div>
@@ -90,7 +90,11 @@
         <BaseChart width="100%" height="100%" :option="pieOptions" />
       </el-card>
     </div>
-    <div class="right-part">
+    <div class="expandOrFold" :style="{ 'right': showList ? '550px' : '0' }" @click="showList = !showList">
+      <img v-if="showList" src="@/assets/images/fold.svg" alt="" />
+      <img v-else src="@/assets/images/expand.svg" alt="" />
+    </div>
+    <div class="right-part" v-show="showList">
       <div class="event-title">
         <div>
           <el-select style="width: 100px" v-model="queryParams.level" clearable placeholder="事件等级">
@@ -278,7 +282,6 @@ const editorConfig = { placeholder: '请输入内容...' };
 // 内容 HTML
 const valueHtml = ref('');
 const handleCreated = (editor) => {
-  console.log('created', editor);
   editorRef.value = editor; // 记录 editor 实例，重要！
 };
 const fileType = ref(1);
@@ -335,6 +338,7 @@ const statData = reactive({
   not: undefined,
   report: undefined
 });
+const showList = ref(true);
 const shortcuts = [
   {
     text: '最近一周',
@@ -383,21 +387,21 @@ const pieOptions = computed(() => {
         center: ['50%', '60%'],
         data: [
           {
-            value: statData.monthAlready,
+            value: statData.already,
             name: '已解决',
             itemStyle: {
               color: '#FAC858'
             }
           },
           {
-            value: statData.monthNot,
+            value: statData.not,
             name: '未解决',
             itemStyle: {
               color: '#93BEFF'
             }
           },
           {
-            value: statData.monthReport,
+            value: statData.report,
             name: '已上报',
             itemStyle: {
               color: '#507AFC'
@@ -452,27 +456,159 @@ const getList = async () => {
   total.value = res.total;
 };
 const getStat = async () => {
+  const monthRange = getTimeRange('month');
+  const monthRes = await listEvent({
+    params: {
+      beginCreateTime: monthRange.start,
+      endCreateTime: monthRange.end
+    }
+  });
+  statData.monthCount = monthRes.total;
+  statData.monthAlready = monthRes.rows.filter((item) => item.status == '1').length;
+  statData.monthNot = monthRes.rows.filter((item) => item.status == '2' || item.status === null).length;
+  statData.monthReport = monthRes.rows.filter((item) => item.status == '3').length;
+  const weekRange = getTimeRange('week', { firstDayOfWeek: 0 });
+  const weekRes = await listEvent({
+    params: {
+      beginCreateTime: weekRange.start,
+      endCreateTime: weekRange.end
+    }
+  });
+  statData.weekCount = weekRes.total;
+  statData.weekAlready = weekRes.rows.filter((item) => item.status == '1').length;
+  statData.weekNot = weekRes.rows.filter((item) => item.status == '2' || item.status === null).length;
+  statData.weekReport = weekRes.rows.filter((item) => item.status == '3').length;
+  const todayRange = getTimeRange('day');
+  const todayRes = await listEvent({
+    params: {
+      beginCreateTime: todayRange.start,
+      endCreateTime: todayRange.end
+    }
+  });
+  statData.dayCount = todayRes.total;
+  statData.dayAlready = todayRes.rows.filter((item) => item.status == '1').length;
+  statData.dayNot = todayRes.rows.filter((item) => item.status == '2' || item.status === null).length;
+  statData.dayReport = todayRes.rows.filter((item) => item.status == '3').length;
   const res = await listEvent({});
-  statData.monthCount = res.total;
-  statData.monthAlready = res.rows.filter((item) => item.status == '1').length;
-  statData.monthNot = res.rows.filter((item) => item.status == '2' || item.status === null).length;
-  statData.monthReport = res.rows.filter((item) => item.status == '3').length;
+  statData.already = res.rows.filter((item) => item.status == '1').length;
+  statData.not = res.rows.filter((item) => item.status == '2' || item.status === null).length;
+  statData.report = res.rows.filter((item) => item.status == '3').length;
+};
+const getTimeRange = (unit = 'day', options: any = {}) => {
+  const now = new Date();
+  const { firstDayOfWeek = 1 } = options;
+
+  // 定义结果容器
+  const result = {
+    unit,
+    startDate: null,
+    endDate: null,
+    start: '',
+    end: '',
+    description: '',
+    duration: 0
+  };
+
+  // 内部工具函数：格式化日期时间为字符串
+  const format = (date) => {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    const seconds = String(date.getSeconds()).padStart(2, '0');
+
+    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+  };
+
+  // 处理不同类型的时间范围
+  switch (unit.toLowerCase()) {
+    case 'day':
+      // 当天范围 (00:00:00.000 - 23:59:59.999)
+      const dayStart = new Date(now);
+      dayStart.setHours(0, 0, 0, 0);
+
+      const dayEnd = new Date(now);
+      dayEnd.setHours(23, 59, 59, 999);
+
+      result.startDate = dayStart;
+      result.endDate = dayEnd;
+      result.start = format(dayStart);
+      result.end = format(dayEnd);
+      result.description = `当天范围: ${result.start} 至 ${result.end}`;
+      result.duration = 1;
+      break;
+
+    case 'week':
+      // 计算周起始日偏移
+      const dayOfWeek = now.getDay();
+      const diffToFirstDay = (dayOfWeek < firstDayOfWeek ? 7 : 0) + dayOfWeek - firstDayOfWeek;
+
+      // 本周开始 (周一 00:00:00.000)
+      const weekStart = new Date(now);
+      weekStart.setDate(now.getDate() - diffToFirstDay);
+      weekStart.setHours(0, 0, 0, 0);
+
+      // 本周结束 (周日 23:59:59.999)
+      const weekEnd = new Date(weekStart);
+      weekEnd.setDate(weekStart.getDate() + 6);
+      weekEnd.setHours(23, 59, 59, 999);
+
+      // 设置结果
+      result.startDate = weekStart;
+      result.endDate = weekEnd;
+      result.start = format(weekStart);
+      result.end = format(weekEnd);
+      result.duration = 7;
+
+      // 生成描述信息
+      const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
+      const startDayName = weekDays[firstDayOfWeek];
+      const endDayName = weekDays[(firstDayOfWeek + 6) % 7];
+      result.description = `本周范围 (${startDayName}至${endDayName}): ${result.start} 至 ${result.end}`;
+      break;
+
+    case 'month':
+      // 本月第一天 (1号 00:00:00.000)
+      const monthStart = new Date(now.getFullYear(), now.getMonth(), 1);
+      monthStart.setHours(0, 0, 0, 0);
+
+      // 本月最后一天 (月末日 23:59:59.999)
+      const monthEnd = new Date(now.getFullYear(), now.getMonth() + 1, 0);
+      monthEnd.setHours(23, 59, 59, 999);
+
+      // 设置结果
+      result.startDate = monthStart;
+      result.endDate = monthEnd;
+      result.start = format(monthStart);
+      result.end = format(monthEnd);
+
+      // 计算天数
+      const dayDiff = Math.floor((monthEnd - monthStart) / (1000 * 60 * 60 * 24)) + 1;
+      result.duration = dayDiff;
+
+      // 获取月份名称
+      const monthNames = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
+      result.description = `${monthNames[now.getMonth()]}范围 (共${dayDiff}天): ${result.start} 至 ${result.end}`;
+      break;
+
+    default:
+      throw new Error(`无效的时间单位: "${unit}". 请使用 'day', 'week' 或 'month'`);
+  }
+
+  return result;
 };
 const resetQuery = () => {
   queryParams.value = {
     pageNum: 1,
     pageSize: 15,
     level: undefined,
-    ext2: {
-      lx: undefined
-    },
     dateRange: undefined,
-    addr: undefined,
     params: {
       lx: undefined,
       key: undefined,
-      beginTime: undefined,
-      endTime: undefined
+      beginCreateTime: '',
+      endCreateTime: ''
     }
   };
   getList();
@@ -584,15 +720,26 @@ const formSubmit = async (field) => {
     position: absolute;
     background: #fff;
     border-radius: 4px;
-    top: 10px;
+    top: 0;
     width: 550px;
-    right: 20px;
-    bottom: 10px;
+    right: 0;
+    bottom: 0px;
     z-index: 10;
     box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
     display: flex;
     flex-direction: column;
   }
+  .expandOrFold {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 550px;
+    cursor: pointer;
+    z-index: 10;
+    img {
+      height: 50px;
+    }
+  }
 }
 
 .custom-title {

plus-ui-ts/vite.config.ts

@@ -25,7 +25,7 @@ export default defineConfig(({ mode, command }) => {
       proxy: {
         [env.VITE_APP_BASE_API]: {
           // target: 'http://localhost:8080',
-          target: 'http://200.200.19.121:30112/api',
+          target: 'http://jtjai.xt.wenhq.top:8083//api',
           changeOrigin: true,
           ws: true,
           rewrite: (path) => path.replace(new RegExp('^' + env.VITE_APP_BASE_API), '')