From 86161f1a07537a440aa869a666f8c9fe2c41e953 Mon Sep 17 00:00:00 2001
From: bb_pan <max_163email@163.com>
Date: Tue, 25 Mar 2025 13:22:58 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E8=AF=95=E5=B9=B3=E8=A1=A1=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/card-model.vue                 |  89 ++++++
 src/views/home/maintain-balance/index.vue     | 261 ++++++++++++++++++
 src/views/material/archives/index.vue         |  18 +-
 vue.config.js                                 |   4 +-
 4 files changed, 361 insertions(+), 11 deletions(-)
 create mode 100644 src/views/home/maintain-balance/components/card-model.vue
 create mode 100644 src/views/home/maintain-balance/index.vue

diff --git a/src/views/home/maintain-balance/components/card-model.vue b/src/views/home/maintain-balance/components/card-model.vue
new file mode 100644
index 00000000..1e1dafa0
--- /dev/null
+++ b/src/views/home/maintain-balance/components/card-model.vue
@@ -0,0 +1,89 @@
+<template>
+  <div class="card-model" :style="{ backgroundColor: state.theme }" @click="onHandleViewDetails">
+    <div class="f-14">
+      <svg-icon :icon-class="state.icon" class="icon-box" />
+      {{ state.title }}
+    </div>
+    <div class="f-count">{{ state.count }}</div>
+    <div class="f-14">
+      <span v-if="state.isReduce">
+        较上月降低
+        <span style="color: #f56c6c">{{ state.num || 0 }}</span>
+        %
+      </span>
+      <span v-else>较上月增长 {{ state.num || 0 }} %</span>
+
+      <svg-icon v-if="state.isReduce" icon-class="down_arrow" />
+      <svg-icon v-else icon-class="up_arrow" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    state: {
+      type: Object,
+      default: {}
+    }
+  },
+  mounted() {
+    console.log('card-model', this.state)
+  },
+
+  methods: {
+    onHandleViewDetails() {
+      // console.log('查询二级页面', this.cardTitle)
+      // 使用自定义事件 通知父组件打开二级页面
+      // this.$emit('onOpenLevelTwoPages', this.cardTitle)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.card-model {
+  width: 100%;
+  height: 100%;
+  padding: 6px 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+  color: #fff;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 初始阴影 */
+  transition: transform 0.3s ease; /* 添加过渡效果 */
+
+  & div {
+    width: 100%;
+    // padding-left: 40px;
+    transform: translateX(40px);
+  }
+
+  .f-14 {
+    position: relative;
+    font-size: 14px;
+    letter-spacing: 1px;
+
+    .icon-box {
+      font-size: 18px;
+      position: absolute;
+      transform: translateX(-120%);
+    }
+  }
+
+  .f-count {
+    margin: 4px 0;
+    font-size: 18px;
+    font-weight: bold;
+    letter-spacing: 2px;
+  }
+}
+
+.card-model:hover {
+  cursor: pointer;
+  transform: scale(1.03);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* 鼠标移入时更明显的阴影 */
+}
+</style>
diff --git a/src/views/home/maintain-balance/index.vue b/src/views/home/maintain-balance/index.vue
new file mode 100644
index 00000000..cafe8f56
--- /dev/null
+++ b/src/views/home/maintain-balance/index.vue
@@ -0,0 +1,261 @@
+<template>
+  <div class="app-container">
+    <!-- 机具供应展示 -->
+    <el-form v-show="showSearch" size="small" :model="queryParams" ref="queryFormRef" inline @submit.native.prevent>
+      <el-row>
+        <el-col :span="6">
+          <el-form-item>
+            <el-date-picker
+              v-model="queryDate"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              value-format="yyyy-MM-dd"
+              style="width: 100%"
+              :picker-options="pickerOptions"
+            />
+          </el-form-item>
+        </el-col>
+        <el-form-item prop="keyWord">
+          <el-input
+            v-model="queryParams.keyWord"
+            placeholder="请输入关键词检索"
+            clearable
+            style="width: 250px"
+            @keyup.enter.native="onHandleSearch"
+          />
+        </el-form-item>
+
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" @click="onHandleSearch">查询</el-button>
+          <el-button icon="el-icon-refresh" @click="onHandleReset">重置</el-button>
+        </el-form-item>
+      </el-row>
+    </el-form>
+
+    <div class="card-box">
+      <div class="card-box-content">
+        <div v-for="(card, index) in cardList_2" :key="index">
+          <CardModel :state="card" />
+        </div>
+      </div>
+    </div>
+
+    <el-row :gutter="10" class="mb8">
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table :data="tableList" fit highlight-current-row style="width: 100%">
+      <!-- 多选 -->
+      <!-- <el-table-column type="selection" width="55" align="center" /> -->
+      <el-table-column
+        type="index"
+        width="55"
+        label="序号"
+        align="center"
+        :index="indexContinuation(queryParams.pageNum, queryParams.pageSize)"
+      />
+      <el-table-column
+        v-for="(column, index) in tableColumns"
+        show-overflow-tooltip
+        :key="column.prop"
+        :label="column.label"
+        :prop="column.prop"
+        align="center"
+      ></el-table-column>
+    </el-table>
+
+    <!-- 分页 -->
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script>
+import CardModel from './components/card-model' // 卡片组件
+export default {
+  components: {
+    CardModel
+  },
+  data() {
+    return {
+      showSearch: true,
+      total: 0,
+      // 表单查询条件
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        startTime: '',
+        endTime: '',
+        keyWord: ''
+      },
+      // 日期查询条件
+      queryDate: this.getDefaultDateRange(), // 默认时间范围
+      cardList_2: [
+        {
+          title: '总接收量',
+          theme: '#5ad55a',
+          icon: 'In_the_library',
+          isReduce: false,
+          num: '19.5',
+          count: 185483
+        },
+        {
+          title: '已修数量',
+          theme: '#0099ff',
+          icon: 'In_use',
+          isReduce: true,
+          num: '15.5',
+          count: 473892
+        },
+        {
+          title: '在修数量',
+          theme: '#8167f5',
+          icon: 'In_repair',
+          isReduce: false,
+          num: '10.5',
+          count: 293874
+        },
+        {
+          title: '报废数量',
+          theme: '#bfbf00',
+          icon: 'penning_store',
+          isReduce: true,
+          num: '16.5',
+          count: 842390
+        },
+        {
+          title: '试验数量',
+          theme: '#b8741a',
+          icon: 'repair_store',
+          isReduce: true,
+          num: '10.5',
+          count: 184324
+        }
+      ],
+      pickerOptions: {
+        // disabledDate 禁用日期
+        disabledDate(time) {
+          return time.getTime() > Date.now()
+        }
+      },
+      tableList: [{ name: 'name' }],
+      tableColumns: [
+        { label: '类型名称', prop: 'typeName' },
+        { label: '规格型号', prop: '' },
+        { label: '维修单号', prop: 'code' },
+        { label: '单位', prop: 'unitName' },
+        { label: '总接收数量', prop: 'preNum' },
+        { label: '已修数量', prop: 'num' },
+        { label: '在修数量', prop: '' },
+        { label: '报废数量', prop: '' },
+        { label: '试验数量', prop: '' },
+        { label: '更换配件量', prop: '' },
+        { label: '收费配件金额(元)', prop: '' },
+        { label: '不收费配件金额(元)', prop: '' }
+      ]
+    }
+  },
+  methods: {
+    async getList() {
+      const params = {
+        pageNum: this.queryParams.pageNum,
+        pageSize: this.queryParams.pageSize,
+        keyWord: this.queryParams.keyWord
+      }
+      if (this.queryDate) {
+        params.startTime = this.queryDate[0]
+        params.endTime = this.queryDate[1]
+      } else {
+        params.startTime = ''
+        params.endTime = ''
+      }
+      console.log('🚀 ~ getList ~ params:', params)
+      try {
+        // const res = await (params)
+      } catch (error) {
+        console.log('🚀 ~ getList ~ error:', error)
+      }
+    },
+    // 查询
+    onHandleSearch() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    // 重置
+    onHandleReset() {
+      this.queryDate = this.getDefaultDateRange()
+      this.$refs.queryFormRef.resetFields()
+      this.getList()
+    },
+    // 默认日期范围
+    getDefaultDateRange() {
+      const today = new Date()
+      const lastMonth = new Date()
+
+      // 设置为前一个月
+      lastMonth.setMonth(today.getMonth() - 1)
+
+      // 处理跨年情况
+      if (today.getMonth() === 0) {
+        lastMonth.setFullYear(today.getFullYear() - 1)
+        lastMonth.setMonth(11)
+      }
+
+      const formatDate = date => {
+        const y = date.getFullYear()
+        const m = String(date.getMonth() + 1).padStart(2, '0')
+        const d = String(date.getDate()).padStart(2, '0')
+        return `${y}-${m}-${d}`
+      }
+
+      // 返回从前一个月到今天的日期范围
+      return [formatDate(lastMonth), formatDate(today)]
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+// 卡片区样式
+.card-box {
+  display: flex;
+  height: 110px;
+  .title-card {
+    padding: 16px 0;
+    margin-right: 14px;
+    writing-mode: vertical-rl;
+    letter-spacing: 4px;
+    font-size: 14px;
+  }
+
+  .card-box-content-1 {
+    flex: 1;
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 12px;
+    margin-right: -12px;
+
+    .card-box-space-last {
+      grid-column: span 2;
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      align-items: center;
+      gap: 6px;
+    }
+  }
+  .card-box-content {
+    flex: 1;
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 12px;
+    margin-right: -12px;
+  }
+}
+</style>
diff --git a/src/views/material/archives/index.vue b/src/views/material/archives/index.vue
index 4cf3cc6f..f5972679 100644
--- a/src/views/material/archives/index.vue
+++ b/src/views/material/archives/index.vue
@@ -187,12 +187,12 @@
                  :action="upload.url" style="width: 100%;" :file-list="fileList"
                  :on-success="handleSuccess" :on-error="handleError" :on-remove="handleFileRemove"
                  :before-upload="beforeUpload"
-                 accept="image/*,.pdf,.doc,.docx"
+                 accept="image/*,.pdf,.doc,.docx,video/*"
       >
         <i class="el-icon-upload"></i>
         <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
         <div class="el-upload__tip text-center" slot="tip">  
-          <span>按住Ctrl可同时多选，支持上传图、PDF、Word格式文件，单个文件不能超过5M</span> 
+          <span>按住Ctrl可同时多选，支持上传图片、视频、PDF、Word格式文件，单个文件不能超过20MB</span> 
         </div>
       </el-upload>
       <div slot="footer" class="dialog-footer">
@@ -598,14 +598,14 @@ export default {
     },
 
     beforeUpload(file) {
-      const isRarOrZip = ['.rar', '.zip'].some(ext => file.name.toLowerCase().endsWith(ext));
-      if (!isRarOrZip) {
-        this.$message.error('仅支持上传 rar 或 zip 格式的文件');
-        return false;
-      }
-      const isLt5M = file.size / 1024 / 1024 < 5;
+      // const isRarOrZip = ['.rar', '.zip'].some(ext => file.name.toLowerCase().endsWith(ext));
+      // if (!isRarOrZip) {
+      //   this.$message.error('仅支持上传 rar 或 zip 格式的文件');
+      //   return false;
+      // }
+      const isLt5M = file.size / 1024 / 1024 < 20;
       if (!isLt5M) {
-        this.$message.error('单个文件大小不能超过 5MB');
+        this.$message.error('单个文件大小不能超过 20MB');
         return false;
       }
       return true;
diff --git a/vue.config.js b/vue.config.js
index cee0b504..03688218 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -36,8 +36,8 @@ module.exports = {
             // detail: https://cli.vuejs.org/config/#devserver-proxy
             [process.env.VUE_APP_BASE_API]: {
                 // target: `http://36.33.26.201:19988/prod-api`,
-                target: `http://192.168.0.96:18080`,//马
-                // target: `http://192.168.0.244:18580`,//测试
+                // target: `http://192.168.0.96:18080`,//马
+                target: `http://192.168.0.244:18580`,//测试
                 // target: `http://192.168.2.223:18080`,//山
                 // target: `http://192.168.2.23:18080`,//洪
                 // target: `http://192.168.0.234:18080`, //阮