调试条码管理、物资统计的接口

src/api/comprehensiveGuarantee/materialReserveManagement/BarcodeManagement.ts

@@ -0,0 +1,9 @@
+import request from '@/utils/request';
+// 查询
+export function getBarcodeManagementList(params?: any) {
+  return request({
+    url: '/api/resource_provison/material/material/barcode/list',
+    method: 'get',
+    params: params
+  });
+}

src/api/comprehensiveGuarantee/materialReserveManagement/MaterialStatistics.ts

@@ -0,0 +1,23 @@
+import request from '@/utils/request';
+// 查询
+export function getCountDate(params?: any) {
+  return request({
+    url: '/api/resource_provison/material/count/data',
+    method: 'get',
+    params: params
+  });
+}
+export function getMaterialDate(params?: any) {
+  return request({
+    url: '/api/resource_provison/material/count/count_room_material',
+    method: 'get',
+    params: params
+  });
+}
+export function getMaterialList(params?: any) {
+  return request({
+    url: '/api/resource_provison/material/material/list',
+    method: 'get',
+    params: params
+  });
+}

src/types/components.d.ts

@@ -28,17 +28,10 @@ declare module 'vue' {
     ElBadge: typeof import('element-plus/es')['ElBadge']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
-    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
-    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCol: typeof import('element-plus/es')['ElCol']
-    ElCollapse: typeof import('element-plus/es')['ElCollapse']
-    ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
-    ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
-    ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
-    ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
@@ -48,44 +41,24 @@ declare module 'vue' {
     ElEmpty: typeof import('element-plus/es')['ElEmpty']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
-    ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
-    ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
-    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
-    ElLink: typeof import('element-plus/es')['ElLink']
-    ElMain: typeof import('element-plus/es')['ElMain']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElPopover: typeof import('element-plus/es')['ElPopover']
-    ElRadio: typeof import('element-plus/es')['ElRadio']
-    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
-    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
-    ElSegmented: typeof import('element-plus/es')['ElSegmented']
     ElSelect: typeof import('element-plus/es')['ElSelect']
-    ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
-    ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']
-    ElSlider: typeof import('element-plus/es')['ElSlider']
-    ElSpace: typeof import('element-plus/es')['ElSpace']
-    ElStep: typeof import('element-plus/es')['ElStep']
-    ElSteps: typeof import('element-plus/es')['ElSteps']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
-    ElTag: typeof import('element-plus/es')['ElTag']
     ElText: typeof import('element-plus/es')['ElText']
-    ElTimeline: typeof import('element-plus/es')['ElTimeline']
-    ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
-    ElTree: typeof import('element-plus/es')['ElTree']
-    ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     ExcelEditor: typeof import('./../components/ExcelEditor/index.vue')['default']
     FileUpload: typeof import('./../components/FileUpload/index.vue')['default']
@@ -97,9 +70,6 @@ declare module 'vue' {
     HikvisionPlayer: typeof import('./../components/HKVideo/hikvision-player.vue')['default']
     HKVideo: typeof import('./../components/HKVideo/index.vue')['default']
     IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
-    IEpCaretBottom: typeof import('~icons/ep/caret-bottom')['default']
-    IEpCaretTop: typeof import('~icons/ep/caret-top')['default']
-    IEpUploadFilled: typeof import('~icons/ep/upload-filled')['default']
     IFrame: typeof import('./../components/iFrame/index.vue')['default']
     ImagePreview: typeof import('./../components/ImagePreview/index.vue')['default']
     ImageUpload: typeof import('./../components/ImageUpload/index.vue')['default']

src/views/comprehensiveGuarantee/MaterialReserveManagement/BarcodeManagement.vue

@@ -1,52 +1,59 @@
 <!--条码管理-->
 <template>
   <div>
-    <div v-show="!BussinessAddState.show && !BussinessEditState.show " class="app-container">
+    <div class="app-container">
       <div>
         <transition name="fade">
           <div v-show="showSearch" class="mb-[10px]">
             <el-row :gutter="10" class="mb8">
               <el-col :span="1.5">
-                <el-button type="primary" icon="Plus" >导出</el-button>
-<!--                @click="handleAdd"-->
+                <el-button type="primary" icon="Plus">导出</el-button>
               </el-col>
             </el-row>
           </div>
         </transition>
-        <el-table ref="multipleTable" v-loading="loading" :data="tableData" border :max-height="maxHeight" style="width: 96%" @selection-change="handleSelectionChange">
+        <el-table
+          ref="multipleTable"
+          v-loading="loading"
+          :data="tableData"
+          border
+          :max-height="maxHeight"
+          style="width: 96%"
+          @selection-change="handleSelectionChange"
+        >
           <el-table-column type="selection" width="55" align="center" fixed />
-          <el-table-column label="物资名称" align="center" prop="material_name" fixed show-overflow-tooltip/>
-          <el-table-column label="物资编号" align="center" prop="material_code" show-overflow-tooltip/>
+          <el-table-column label="物资名称" align="center" prop="material_name" fixed show-overflow-tooltip />
+          <el-table-column label="物资编号" align="center" prop="material_code" show-overflow-tooltip />
           <el-table-column label="条形码" align="center" prop="bar_code" show-overflow-tooltip>
-          <template #default="scope">
-            <el-button type="text" class="common-btn-text-primary" @click="showQRCode(scope.row.bar_code)">查看</el-button>
-          </template>
+            <template #default="scope">
+              <el-button type="text" class="common-btn-text-primary" @click="showQRCode(scope.row.barcode)">查看</el-button>
+            </template>
           </el-table-column>
-          <el-table-column label="二维码" align="center" prop="QR_code" show-overflow-tooltip>
+          <el-table-column label="二维码" align="center" prop="qr_code" show-overflow-tooltip>
             <template #default="scope">
-              <el-button type="text" class="common-btn-text-primary" @click="showQRCode(scope.row.QR_code)">查看</el-button>
+              <el-button type="text" class="common-btn-text-primary" @click="showQRCode(scope.row.qr_code)">查看</el-button>
             </template>
           </el-table-column>
-          <el-table-column label="条码状态" align="center" prop="barcode_status" show-overflow-tooltip>
+          <el-table-column label="条码状态" align="center" prop="status" show-overflow-tooltip>
             <template #default="scope">
               <div>
-                <span  v-if="Number(scope.row.barcode_status) === 0">禁用</span>
-                <span   v-if="Number(scope.row.barcode_status) === 1">启用</span>
+                <span v-if="Number(scope.row.status) === 0">禁用</span>
+                <span v-if="Number(scope.row.status) === 1">启用</span>
               </div>
             </template>
           </el-table-column>
           <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
             <template #default="scope">
               <div>
-                <span class="common-btn-text-primary"  v-if="Number(scope.row.barcode_status) === 1">禁用</span>
-                <span  class="common-btn-text-primary"  v-if="Number(scope.row.barcode_status) === 0">启用</span>
+                <span v-if="Number(scope.row.status) === 1" class="common-btn-text-primary">禁用</span>
+                <span v-if="Number(scope.row.status) === 0" class="common-btn-text-primary">启用</span>
               </div>
             </template>
           </el-table-column>
         </el-table>
-        <el-dialog :visible.sync="dialogVisible" title="二维码">
+        <el-dialog v-model="dialogVisible.visible" title="二维码">
           <div class="flex justify-center items-center h-[400px]">
-            <img :src="dialogVisible.QR_code" alt="二维码" class="w-[300px] h-[300px]">
+            <img :src="baseUrl + downLoadApi + dialogVisible.qr_code" alt="二维码" class="w-[300px] h-[300px]" />
           </div>
         </el-dialog>
         <pagination
@@ -54,28 +61,24 @@
           v-model:page="queryParams.page"
           v-model:limit="queryParams.pageSize"
           :total="total"
-          @pagination="tableData"
+          @pagination="fetchListData"
         />
       </div>
     </div>
-    <BussinessAdd v-if="BussinessAddState.show"  @close="handleCancel" />
-    <BussinessEdit v-if="BussinessEditState.show" :event-id="BussinessEditState.eventId"  @close="handleCancel" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref,reactive, onMounted, onBeforeUnmount } from "vue";
-import {companyDelete, getCompanyList} from "@/api/riskPrevention/BusinessPortraits";
-import BussinessAdd from "@/views/riskPrevention/SafetyProductionManagement/BussinessAdd.vue";
-// import BussinessEdit from "./BussinessEdit.vue";
-import {to} from "await-to-js";
-
+import { ref, reactive, onMounted, onBeforeUnmount } from 'vue';
+import { getBarcodeManagementList } from '@/api/comprehensiveGuarantee/MaterialReserveManagement/BarcodeManagement';
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const baseUrl = import.meta.env.VITE_APP_BASE_API;
+const downLoadApi = import.meta.env.VITE_APP_BASE_DOWNLOAD_API;
 const showSearch = ref(true);
-// const tableData = ref();
 const multiple = ref(true);
 const ids = ref<Array<number | string>>([]);
 const single = ref(true);
+const tableData = ref();
 // 定义响应式变量
 const loading = ref(false);
 const maxHeight = ref(window.innerHeight * 0.8);
@@ -87,135 +90,38 @@ const handleResize = () => {
 const initFormData = reactive({
   material_name: '',
   material_code: '',
-  bar_code: '',
-  QR_code: '',
-  barcode_status: ''
+  barcode: '',
+  qr_code: '',
+  status: ''
 });
-const data =reactive({
-  form: {...initFormData},
-  queryParams:{
+const data = reactive({
+  form: { ...initFormData },
+  queryParams: {
     page: '1',
-    pageSize: '10',
-    area_code: '',
-    keycode: ''
+    pageSize: '10'
   }
-})
+});
 
 const { queryParams, form } = toRefs(data);
-
-const county = [
-  { value: '', label: '全部' },
-  { value: '0', label: '茂南区' },
-  { value: '1', label: '电白区' },
-  { value: '2', label: '高州市' },
-  { value: '3', label: '化州市' },
-  { value: '4', label: '信宜市' },
-];
-const tableData = [
-  {
-    "material_name": "螺丝刀套装",
-    "material_code": "SC001",
-    "bar_code": "1234567890123",
-    "QR_code": "https://example.com/qrcode1.png",
-    "barcode_status": "1",
-    "operation": "编辑"
-  },
-  {
-    "material_name": "A4 打印纸",
-    "material_code": "PAPER001",
-    "bar_code": "9876543210987",
-    "QR_code": "https://example.com/qrcode2.png",
-    "barcode_status": "0",
-    "operation": "删除"
-  },
-  {
-    "material_name": "USB 存储器",
-    "material_code": "USB001",
-    "bar_code": "6543219876543",
-    "QR_code": "qrcode://usb001",
-    "barcode_status": "0",
-    "operation": "查看"
-  },
-  {
-    "material_name": "签字笔",
-    "material_code": "PEN001",
-    "bar_code": "3456781234567",
-    "QR_code": "qrcode://pen001",
-    "barcode_status": "1",
-    "operation": "编辑"
-  },
-  {
-    "material_name": "笔记本",
-    "material_code": "NOTEBOOK001",
-    "bar_code": "7654329876543",
-    "QR_code": "qrcode://notebook001",
-    "barcode_status": "0",
-    "operation": "重新生成条码"
-  }
-];
 const dialogVisible = ref({
   visible: false,
-  QR_code: ''
+  qr_code: ''
 });
 
-const showQRCode = (QR_code) => {
-  dialogVisible.value = { QR_code };
-  dialogVisible.visible = true;
+const showQRCode = (qr_code) => {
+  dialogVisible.value = { qr_code };
+  dialogVisible.value.visible = true;
 };
-const handleQuery = () => {
-  queryParams.value.page = 1;
-  fetchWorkrData();
-};
-const resetQuery = () => {
-  queryParams.value = { page: 1, pageSize: 10, area_code: '', keycode: '' };
-  handleQuery();
-};
-const BussinessAddState = reactive({
-  show: false, // 初始化show为false
-});
-
-const BussinessEditState = reactive({
-  show:false
-});
-
-const handleAdd = () => {
-  BussinessAddState.show = true;
-};
-
-const handleDelete = async (row) => {
-  let id = [];
-  if (row) {
-    id = [row.id];
-  } else {
-    id = ids.value;
-  }
-  const [err] = await to(proxy?.$modal.confirm('是否确认删除选择的数据项？') as any);
-  if (!err) {
-    await companyDelete(id);
-    proxy.$modal.msgSuccess('删除成功');
-    fetchWorkrData();
-  }
-};
-const handleedit = (row) => {
-  BussinessEditState.eventId = row.id + "";
-  BussinessEditState.show = true;
-};
-
-const handleCancel = () => {
-  BussinessAddState.show = false;
-  BussinessEditState.show =false;
-};
-
-const fetchWorkrData = () => {
-  // loading.value = true;
-  // getCompanyList(queryParams.value)
-  //   .then((res) => {
-  //     tableData.value = res.data;
-  //     total.value = res.total;
-  //   })
-  //   .finally(() => {
-  //     loading.value = false;
-  //   });
+const fetchListData = () => {
+  loading.value = true;
+  getBarcodeManagementList(queryParams.value)
+    .then((res) => {
+      tableData.value = res.data;
+      total.value = res.total;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
 };
 
 const handleSelectionChange = (selection) => {
@@ -227,15 +133,13 @@ const handleSelectionChange = (selection) => {
 
 onMounted(() => {
   window.addEventListener('resize', handleResize);
-  fetchWorkrData();
+  fetchListData();
 });
 
 // 在组件卸载前移除窗口大小变化监听器
 onBeforeUnmount(() => {
   window.removeEventListener('resize', handleResize);
-
 });
 </script>
 
 <style lang="scss" scoped></style>
-

src/views/comprehensiveGuarantee/MaterialReserveManagement/MaterialStatistics.vue

@@ -53,7 +53,7 @@
 </template>
 <script lang="ts" setup>
 import { graphic } from 'echarts';
-
+import { getCountDate, getMaterialDate, getMaterialList } from '@/api/comprehensiveGuarantee/MaterialReserveManagement/MaterialStatistics';
 let totalData = ref({
   'warehouseNum': '',
   'goodsNum': ''
@@ -272,64 +272,104 @@ let option4 = ref({
     }
   ]
 });
-const initData = () => {
-  totalData.value = {
-    warehouseNum: '21',
-    goodsNum: '28179'
-  };
-  // 各区县物资统计
-  option1.value.xAxis.data = ['茂南区', '电白区', '高州市', '化州市', '信宜市', '高新区', '滨海新区'];
-  option1.value.series[0].data = [569, 251, 264, 187, 663, 649, 247];
-  // 各区县物资统计
-  option2.value.xAxis.data = ['茂南区应急仓库', '粤西救灾仓库', '森防仓库', '三防仓库'];
-  option2.value.series[0].data = [569, 264, 663, 247];
-  // 物资类型
-  option3.value.legend.data = ['生活类救灾物资', '应急通信物资', '防汛抗旱物资', '工矿事故应急处置'];
-  option3.value.series[0].data = [
-    { name: '生活类救灾物资', value: 274 },
-    { name: '应急通信物资', value: 144 },
-    { name: '防汛抗旱物资', value: 228 },
-    { name: '工矿事故应急处置', value: 853 }
-  ];
+// 获取数据的异步函数
+const fetchData = async () => {
+  try {
+    const response = await getCountDate(); // 使用已导入的接口
 
-  options.value = [
-    {
-      label: '茂南区应急仓库',
-      value: '1'
-    },
-    {
-      label: '粤西救灾仓库',
-      value: '2'
-    },
-    {
-      label: '森防仓库',
-      value: '3'
-    },
-    {
-      label: '三防仓库',
-      value: '4'
+    if (response.code === 200) {
+      const { warehouse_num, material_num, area_material_count, warehouse_material_count, type_material_count } = response.data;
+
+      // 更新totalData
+      totalData.value = {
+        warehouseNum: warehouse_num.toString(),
+        goodsNum: material_num.toString()
+      };
+
+      // 更新各区县物资统计
+      option1.value.xAxis.data = area_material_count.map((item) => item.name);
+      option1.value.series[0].data = area_material_count.map((item) => item.value);
+
+      // 更新各仓库物资统计
+      option2.value.xAxis.data = warehouse_material_count.map((item) => item.name);
+      option2.value.series[0].data = warehouse_material_count.map((item) => item.value);
+
+      // 更新物资类型
+      option3.value.legend.data = type_material_count.map((item) => item.name);
+      option3.value.series[0].data = type_material_count.map((item) => ({
+        name: item.name,
+        value: item.value
+      }));
+
+      // 更新仓库选项
+      options.value = warehouse_material_count.map((item, index) => ({
+        label: item.name,
+        value: (index + 1).toString()
+      }));
+
+      // 默认选择第一个仓库的数据
+      storeroom.value = '1';
+      getStoreroomData();
+    } else {
+      console.error('Failed to fetch data:', response.msg);
     }
-  ];
-  storeroom.value = '1';
-  getStoreroomData();
+  } catch (error) {
+    console.error('Error fetching data:', error);
+  }
 };
-const getStoreroomData = () => {
-  if (storeroom.value === '1') {
-    option4.value.xAxis.data = ['库房1', '库房2', '库房3', '库房4'];
-    option4.value.series[0].data = [54, 186, 145, 184];
-  } else if (storeroom.value === '2') {
-    option4.value.xAxis.data = ['库房1', '库房2', '库房3'];
-    option4.value.series[0].data = [98, 42, 124];
-  } else if (storeroom.value === '3') {
-    option4.value.xAxis.data = ['库房1', '库房2', '库房3', '库房4'];
-    option4.value.series[0].data = [243, 136, 102, 182];
-  } else if (storeroom.value === '4') {
-    option4.value.xAxis.data = ['库房1', '库房2', '库房3'];
-    option4.value.series[0].data = [112, 56, 79];
+
+const fetchList = async () => {
+  try {
+    // 获取仓库列表
+    const materialListResponse = await getMaterialList();
+    if (materialListResponse.code === 200) {
+      // 提取唯一的仓库名称和ID
+      const uniqueWarehouses = Array.from(new Set(materialListResponse.data.map((item) => item.warehouse_id + item.warehouse_name))).map((idName) =>
+        materialListResponse.data.find((item) => item.warehouse_id + item.warehouse_name === idName)
+      );
+
+      // 更新仓库选项
+      options.value = uniqueWarehouses.map((item) => ({
+        label: item.warehouse_name,
+        value: item.warehouse_id
+      }));
+
+      // 默认选择第一个仓库的数据（如果有）
+      if (options.value.length > 0) {
+        storeroom.value = options.value[0].value;
+        fetchStoreroomData(storeroom.value);
+      }
+    } else {
+      console.error('Failed to fetch material list:', materialListResponse.msg);
+    }
+  } catch (error) {
+    console.error('Error fetching material list:', error);
   }
 };
+// 根据所选仓库ID获取库房数据
+const fetchStoreroomData = async (warehouseId) => {
+  try {
+    const response = await getMaterialDate({ warehouseId });
+    if (response.code === 200) {
+      option4.value.xAxis.data = response.data.map((item) => item.name);
+      option4.value.series[0].data = response.data.map((item) => item.value);
+    } else {
+      console.error('Failed to fetch storeroom data:', response.msg);
+    }
+  } catch (error) {
+    console.error('Error fetching storeroom data:', error);
+  }
+};
+
+// 监听storeroom的变化，当用户选择不同的仓库时更新数据
+watch(storeroom, async (newVal) => {
+  if (newVal) {
+    await fetchStoreroomData(newVal);
+  }
+});
 onMounted(() => {
-  initData();
+  fetchData();
+  fetchList();
 });
 </script>
 <style lang="scss" scoped>