update

src/api/casm/quality.js

@@ -42,3 +42,10 @@ export function delQuality(id) {
     method: 'delete'
   })
 }
+// 获取合格率
+export function qualitystandardRate() {
+  return request({
+    url: '/casm/qualitystandardRate',
+    method: 'get'
+  })
+}

src/api/home.js

@@ -3,7 +3,7 @@ import request from '@/utils/request'
 // 获取首页数据
 export function getHomeDeviceInfoVO() {
   return request({
-    url: '/home',
+    url: '/casm/device/getHomeDeviceInfo',
     method: 'get'
   })
 }

src/assets/iconfont/iconfont.css

@@ -0,0 +1,23 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 4503445 */
+  src: url('iconfont.woff2?t=1712819070350') format('woff2'),
+       url('iconfont.woff?t=1712819070350') format('woff'),
+       url('iconfont.ttf?t=1712819070350') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-shengchanxiaoshuai:before {
+  content: "\e612";
+}
+
+.icon-zhinengjiaju:before {
+  content: "\e61c";
+}
+

src/layout/components/AppMain.vue

@@ -2,11 +2,14 @@
   <section class="app-main">
     <router-view v-slot="{ Component, route }">
       <transition name="fade-transform" mode="out-in">
+        <div :key="route.path">
           <keep-alive :include="tagsViewStore.cachedViews">
             <component v-if="!route.meta.link" :is="Component" :key="route.path" />
           </keep-alive>
+        </div>
       </transition>
     </router-view>
+
     <iframe-toggle />
   </section>
 </template>
@@ -65,4 +68,3 @@ const tagsViewStore = useTagsViewStore()
   border-radius: 3px;
 }
 </style>
-

src/main.js

@@ -56,19 +56,22 @@ import {
   CanvasRenderer
 } from 'echarts/renderers'
 import {
-  PieChart
+  PieChart,LineChart
 } from 'echarts/charts'
 import {
   TitleComponent,
   TooltipComponent,
-  LegendComponent
+  LegendComponent,
+  GridComponent 
 } from 'echarts/components'
 use([
   CanvasRenderer,
-  PieChart,
   TitleComponent,
   TooltipComponent,
-  LegendComponent
+  LegendComponent,
+  GridComponent,
+  PieChart,
+  LineChart,
 ]);
 
 

src/views/device/device/index.vue

@@ -2,43 +2,51 @@
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item :label="tLang('device', '设备名称')" prop="name">
-        <el-input v-model="queryParams.name" :placeholder="tLang('common','请输入') + tLang('device','设备名称')" clearable @keyup.enter="handleQuery" />
+        <el-input v-model="queryParams.name" :placeholder="tLang('common', '请输入') + tLang('device', '设备名称')" clearable
+          @keyup.enter="handleQuery" />
       </el-form-item>
       <el-form-item :label="tLang('device', '设备编码')" prop="code">
-        <el-input v-model="queryParams.code" :placeholder="tLang('common','请输入') + tLang('device','设备编码')" clearable @keyup.enter="handleQuery" />
+        <el-input v-model="queryParams.code" :placeholder="tLang('common', '请输入') + tLang('device', '设备编码')" clearable
+          @keyup.enter="handleQuery" />
       </el-form-item>
       <el-form-item :label="tLang('device', '车间名称')" prop="workShop">
-        <el-input v-model="queryParams.workShop" :placeholder="tLang('common','请输入') + tLang('device','车间名称')" clearable @keyup.enter="handleQuery" />
+        <el-input v-model="queryParams.workShop" :placeholder="tLang('common', '请输入') + tLang('device', '车间名称')" clearable
+          @keyup.enter="handleQuery" />
       </el-form-item>
       <el-form-item :label="tLang('device', '产线名称')" prop="lineName">
-        <el-input v-model="queryParams.lineName" :placeholder="tLang('common','请输入') + tLang('device','产线名称')" clearable @keyup.enter="handleQuery" />
+        <el-input v-model="queryParams.lineName" :placeholder="tLang('common', '请输入') + tLang('device', '产线名称')" clearable
+          @keyup.enter="handleQuery" />
       </el-form-item>
       <el-form-item :label="tLang('device', '保养周期')" prop="maintenance">
-        <el-input v-model="queryParams.maintenance" :placeholder="tLang('common','请输入') + tLang('device','保养周期')" clearable @keyup.enter="handleQuery" />
+        <el-input v-model="queryParams.maintenance" :placeholder="tLang('common', '请输入') + tLang('device', '保养周期')"
+          clearable @keyup.enter="handleQuery" />
       </el-form-item>
       <el-form-item :label="tLang('device', '供货商名称')" prop="supplier">
-        <el-input v-model="queryParams.supplier" :placeholder="tLang('common','请输入') + tLang('device','供货商名称')" clearable @keyup.enter="handleQuery" />
+        <el-input v-model="queryParams.supplier" :placeholder="tLang('common', '请输入') + tLang('device', '供货商名称')"
+          clearable @keyup.enter="handleQuery" />
       </el-form-item>
       <el-form-item :label="tLang('device', '供货商联络人')" prop="supplierContactPerson">
-        <el-input v-model="queryParams.supplierContactPerson" :placeholder="tLang('common','请输入') + tLang('device','供货商联络人')" clearable
+        <el-input v-model="queryParams.supplierContactPerson"
-          @keyup.enter="handleQuery" />
+          :placeholder="tLang('common', '请输入') + tLang('device', '供货商联络人')" clearable @keyup.enter="handleQuery" />
       </el-form-item>
       <el-form-item :label="tLang('device', '生产厂家')" prop="manufacturer">
-        <el-input v-model="queryParams.manufacturer" :placeholder="tLang('common','请输入') + tLang('device','生产厂家')" clearable
+        <el-input v-model="queryParams.manufacturer" :placeholder="tLang('common', '请输入') + tLang('device', '生产厂家')"
-          @keyup.enter="handleQuery" />
+          clearable @keyup.enter="handleQuery" />
       </el-form-item>
       <el-form-item :label="tLang('device', '联系电话')" prop="contactPhone">
-        <el-input v-model="queryParams.contactPhone" :placeholder="tLang('common','请输入') + tLang('device','联系电话')" clearable
+        <el-input v-model="queryParams.contactPhone" :placeholder="tLang('common', '请输入') + tLang('device', '联系电话')"
-          @keyup.enter="handleQuery" />
+          clearable @keyup.enter="handleQuery" />
       </el-form-item>
       <el-form-item :label="tLang('device', '品牌')" prop="brand">
-        <el-input v-model="queryParams.brand" :placeholder="tLang('common','请输入') + tLang('device','品牌')" clearable @keyup.enter="handleQuery" />
+        <el-input v-model="queryParams.brand" :placeholder="tLang('common', '请输入') + tLang('device', '品牌')" clearable
+          @keyup.enter="handleQuery" />
       </el-form-item>
       <!-- <el-form-item :label="针数" prop="needleNum">
         <el-input v-model="queryParams.needleNum" :placeholder="tLang('common','请输入') + 针数" clearable @keyup.enter="handleQuery" />
       </el-form-item> -->
       <el-form-item :label="tLang('device', '设备型号')" prop="model">
-        <el-input v-model="queryParams.model" :placeholder="tLang('common','请输入') + tLang('device','设备型号')" clearable @keyup.enter="handleQuery" />
+        <el-input v-model="queryParams.model" :placeholder="tLang('common', '请输入') + tLang('device', '设备型号')" clearable
+          @keyup.enter="handleQuery" />
       </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="search" size="mini" @click="handleQuery">{{ tLang('common', '搜索') }}</el-button>
@@ -48,8 +56,8 @@
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button type="primary" plain icon="plus" size="mini" @click="handleAdd"
+        <el-button type="primary" plain icon="plus" size="mini" @click="handleAdd" v-hasPermi="['device:device:add']">{{
-          v-hasPermi="['device:device:add']">{{ $t('common.新增') }}</el-button>
+      $t('common.新增') }}</el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button type="success" plain icon="edit" size="mini" :disabled="single" @click="handleUpdate"
@@ -76,7 +84,8 @@
       <el-table-column :label="tLang('device', '产线名称')" align="center" v-if="columns[4].visible" prop="lineName" />
       <el-table-column :label="tLang('device', '保养周期')" align="center" v-if="columns[5].visible" prop="maintenance" />
       <el-table-column :label="tLang('device', '供货商名称')" align="center" v-if="columns[6].visible" prop="supplier" />
-      <el-table-column :label="tLang('device','供货商联络人')" align="center" v-if="columns[7].visible" prop="supplierContactPerson" />
+      <el-table-column :label="tLang('device', '供货商联络人')" align="center" v-if="columns[7].visible"
+        prop="supplierContactPerson" />
       <el-table-column :label="tLang('device', '生产厂家')" align="center" v-if="columns[8].visible" prop="manufacturer" />
       <el-table-column :label="tLang('device', '联系电话')" align="center" v-if="columns[9].visible" prop="contactPhone" />
       <el-table-column :label="tLang('device', '品牌')" align="center" v-if="columns[10].visible" prop="brand" />
@@ -100,8 +109,12 @@
       </el-table-column>
     </el-table>
 
-    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+    <div class="pagination">
-      @pagination="getList" />
+      <el-pagination :hide-on-single-page="true" v-model:current-page="queryParams.pageNum"
+        v-model:page-size="queryParams.pageSize" :page-sizes="[25, 50, 100, 150]"
+        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="getList"
+        @current-change="getList" />
+    </div>
 
     <!-- 添加或修改设备信息对话框 -->
     <el-dialog :title="title" v-model="open" width="800px" append-to-body>
@@ -128,7 +141,8 @@
           <el-input v-model="form.supplier" :placeholder="tLang('common', '请输入') + tLang('device', '供货商名称')" />
         </el-form-item>
         <el-form-item :label="tLang('device', '供货商联络人')" prop="supplierContactPerson">
-          <el-input v-model="form.supplierContactPerson" :placeholder="tLang('common','请输入') + tLang('device','供货商联络人')" />
+          <el-input v-model="form.supplierContactPerson"
+            :placeholder="tLang('common', '请输入') + tLang('device', '供货商联络人')" />
         </el-form-item>
         <el-form-item :label="tLang('device', '生产厂家')" prop="manufacturer">
           <el-input v-model="form.manufacturer" :placeholder="tLang('common', '请输入') + tLang('device', '生产厂家')" />
@@ -378,4 +392,12 @@ onMounted(() => {
 .demo-form-inlinee :deep(.el-select) {
   --el-select-width: 220px;
 }
+
+.pagination {
+  width: 100%;
+  margin: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 </style>

src/views/index.vue

@@ -1,53 +1,298 @@
 <template>
+  <div class="app-container">
     <el-row :gutter="10" class="mb8">
-    
+      <el-col :span="3">
+        <div class="card-box">
+          员工总数：200人
+        </div>
+      </el-col>
+      <el-col :span="3">
+        <div class="card-box">
+          产出进度：60%
+        </div>
+      </el-col>
     </el-row>
-  <v-chart class="chart" :option="option" />
+    <div class="chart-content">
+      <div class="chart-content-card">
+        <v-chart class="line-chart" :option="line_option" />
+      </div>
+      <div class="chart-content-card">
+        <v-chart class="line-chart" :option="pie_option" />
+      </div>
+      <div class="right-content-card">
+        <div>20台/70台</div>
+        <div>设备：使用中/总数</div>
+      </div>
+    </div>
+    <div class="bottom">
+      <div class="device-item" v-for="(item, index) in produceList" :style="{'background-color':item_bgcolor[item.state]}">
+        <span class="iconfont icon-shengchanxiaoshuai icon-style" :style="{color:item_color[item.progressSignal],borderColor:item_color[item.progressSignal]}"></span>
+        <div class="device-item-content">
+          <div class="device-item-content-flex left">
+            <img class="frj-img" :src="item.file" alt="">
+            <span>设备编号：{{ item.deviceCode }}</span>
+          </div>
+          <div class="device-item-content-flex right">
+            <ul class="produce-list">
+              <li>工作人员：{{ item.userName }}</li>
+              <li>加工信息：{{ item.productionCode }}</li>
+              <li>产量：{{item.output}}/{{ item.planOutput }}</li>
+              <li>稼动率：{{ item.activation }}</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="pagination">
+      <el-pagination :hide-on-single-page="false" v-model:current-page="queryParams.pageNum"
+        v-model:page-size="queryParams.pageSize" layout="total, prev, pager, next, jumper" :total="total"
+        @size-change="getList" @current-change="getList" />
+    </div>
+  </div>
+
 </template>
 
 <script setup>
+import { getHomeDeviceInfoVO } from "@/api/home";
 
-const option = ref({
+let loading = ref(true)
+// 查询参数
+let queryParams = reactive({
+  pageNum: 1,
+  pageSize: 10,
+})
+const baseUrl = import.meta.env.VITE_APP_BASE_API;
+let total = ref(0)
+let produceList = ref([])
+let item_bgcolor = {
+  0: '#E8E8E8',
+  1: '#E9E5C9',
+  2: '#C9F6CC',
+  3: '#E9E5C9',
+  4: '#EFCAC5',
+}
+
+let item_color = {
+  0: '#5EF417',
+  1: '#176AF4',
+  2: '#DACB71',
+  3: '#D81E06',
+  4: '#CCCCCC',
+
+}
+
+const line_option = ref({
   title: {
-    text: "Traffic Sources",
+    text: '产量'
-    left: "center"
   },
-  tooltip: {
+  xAxis: {
-    trigger: "item",
+    type: 'category',
-    formatter: "{a} <br/>{b} : {c} ({d}%)"
+    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
   },
-  legend: {
+  yAxis: {
-    orient: "vertical",
+    type: 'value'
-    left: "left",
-    data: ["Direct", "Email", "Ad Networks", "Video Ads", "Search Engines"]
   },
   series: [
     {
-      name: "Traffic Sources",
+      data: [820, 932, 901, 934, 1290, 1330, 1320],
-      type: "pie",
+      type: 'line',
-      radius: "55%",
+      smooth: true
-      center: ["50%", "60%"],
-      data: [
-        { value: 335, name: "Direct" },
-        { value: 310, name: "Email" },
-        { value: 234, name: "Ad Networks" },
-        { value: 135, name: "Video Ads" },
-        { value: 1548, name: "Search Engines" }
-      ],
-      emphasis: {
-        itemStyle: {
-          shadowBlur: 10,
-          shadowOffsetX: 0,
-          shadowColor: "rgba(0, 0, 0, 0.5)"
-        }
-      }
     }
   ]
 });
+
+const pie_option = ref({
+  "title": {
+    "text": "设备利用率：60%",
+    "left": "0",
+    "top": 0,
+    "textStyle": {
+      "color": "#333",
+      "fontSize": 24
+    }
+  },
+  tooltip: {
+    trigger: 'item'
+  },
+  legend: {
+    bottom: '5%',
+  },
+  series: [
+    {
+      name: 'Access From',
+      type: 'pie',
+      radius: ['40%', '70%'],
+      avoidLabelOverlap: false,
+      padAngle: 5,
+      itemStyle: {
+        borderRadius: 10
+      },
+      label: {
+        show: true,
+      },
+      data: [
+        { value: 1048, name: 'Search Engine' },
+        { value: 735, name: 'Direct' },
+        { value: 580, name: 'Email' },
+        { value: 484, name: 'Union Ads' },
+        { value: 300, name: 'Video Ads' }
+      ]
+    }
+  ]
+})
+
+function getList() {
+  loading.value = true;
+  getHomeDeviceInfoVO().then(response => {
+    produceList.value = response.rows.map((item, index) => {
+      item.file = baseUrl + item.file;
+      return item;
+    });
+    total.value = response.total;
+    // loading.value = false;
+  });
+}
+onMounted(() => {
+  getList();
+})
 </script>
 
-<style scoped>
+<style scoped lang="scss">
-.chart {
+@import '@/assets/iconfont/iconfont.css';
-  height: 400px;
+
+.card-box {
+  background-color: #C8EAF4;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  padding: 5px 5px;
+  text-align: center;
+  font-size: 18px;
+  font-weight: 700;
+  color: #333333;
+}
+
+.chart-content {
+  width: 100%;
+  height: 310px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .chart-content-card {
+    width: 40%;
+    height: 100%;
+
+    .line-chart {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .right-content-card {
+    width: 200px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    font-size: 18px;
+    font-weight: 700;
+    color: #333333;
+
+    div {
+      margin-bottom: 10px;
+    }
+  }
+
+}
+
+.bottom {
+  width: 100%;
+  height: calc(100vh - 310px - 110px);
+  display: grid;
+  grid-template-columns: 16.66% 16.66% 16.66% 16.66% 16.66% 16.66%;
+  grid-template-rows: 50% 50%;
+  /* 设置网格项目间间隙 */
+  gap: 10px 10px;
+
+  .device-item {
+    width: 100%;
+    height: 100%;
+    background-color: #fff;
+    border-radius: 10px;
+    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
+    text-align: center;
+    padding:8px 2px 2px 2px;
+    box-sizing: border-box;
+
+    .icon-style {
+      font-size: 30px;
+      border: 2px solid;
+      border-radius: 50%;
+      padding: 10px;
+      line-height: 50px;
+      /*color: #bfc;*/
+    }
+
+    .device-item-content {
+      width: calc(100% - 4px);
+      height: calc(100% - 50px - 4px);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 14px;
+
+      .left {
+        width: 50%;
+      }
+
+      .right {
+        flex: 1;
+        font-size: 12px;
+      }
+
+      .device-item-content-flex {
+        height: 100%;
+        box-sizing: border-box;
+        padding: 10px 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        align-items: center;
+        overflow: hidden;
+
+        .frj-img {
+          max-width: 100%;
+          max-height: 70%;
+          margin-bottom: 5px;
+        }
+
+        .produce-list {
+          padding: 0;
+          margin: 0 0 0 15px;
+          width: 100%;
+          height: 100%;
+          display: flex;
+          justify-content: space-around;
+          align-items: flex-start;
+          flex-direction: column;
+
+          li {
+            list-style: none;
+          }
+        }
+      }
+
+    }
+  }
+}
+
+.pagination {
+  width: 100%;
+  margin: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 </style>

src/views/produce/index.vue

@@ -3,24 +3,28 @@
         <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
             label-width="68px">
             <el-form-item :label="tLang('produce', '产品编码')" prop="productionCode">
-                <el-input v-model="queryParams.productionCode" :placeholder="tLang('common','请输入') + tLang('produce','产品编码')" clearable
+                <el-input v-model="queryParams.productionCode"
+                    :placeholder="tLang('common', '请输入') + tLang('produce', '产品编码')" clearable
                     @keyup.enter="handleQuery" />
             </el-form-item>
             <el-form-item :label="tLang('produce', '设备编码')" prop="deviceCode">
-                <el-input v-model="queryParams.deviceCode" :placeholder="tLang('common','请输入') + tLang('produce','设备编码')" clearable
+                <el-input v-model="queryParams.deviceCode"
+                    :placeholder="tLang('common', '请输入') + tLang('produce', '设备编码')" clearable
                     @keyup.enter="handleQuery" />
             </el-form-item>
             <el-form-item :label="tLang('produce', '员工编号')" prop="persionCode">
-                <el-input v-model="queryParams.persionCode" :placeholder="tLang('common','请输入') + tLang('produce','员工编号')" clearable
+                <el-input v-model="queryParams.persionCode"
+                    :placeholder="tLang('common', '请输入') + tLang('produce', '员工编号')" clearable
                     @keyup.enter="handleQuery" />
             </el-form-item>
             <el-form-item :label="tLang('produce', '目标产量')" prop="planOutput">
-                <el-input v-model="queryParams.planOutput" :placeholder="tLang('common','请输入') + tLang('produce','目标产量')" clearable
+                <el-input v-model="queryParams.planOutput"
+                    :placeholder="tLang('common', '请输入') + tLang('produce', '目标产量')" clearable
                     @keyup.enter="handleQuery" />
             </el-form-item>
             <el-form-item :label="tLang('produce', '当前产量')" prop="output">
-                <el-input v-model="queryParams.output" :placeholder="tLang('common','请输入') + tLang('produce','当前产量')" clearable
+                <el-input v-model="queryParams.output" :placeholder="tLang('common', '请输入') + tLang('produce', '当前产量')"
-                    @keyup.enter="handleQuery" />
+                    clearable @keyup.enter="handleQuery" />
             </el-form-item>
             <el-form-item :label="tLang('produce', '开始时间')" prop="starttime">
                 <el-date-picker clearable v-model="queryParams.starttime" type="datetime" format="YYYY-MM-DD hh:mm:ss"
@@ -33,10 +37,12 @@
                 </el-date-picker>
             </el-form-item>
             <el-form-item label="tLang('produce','批次')" prop="batch">
-                <el-input v-model="queryParams.batch" :placeholder="tLang('common','请输入') + tLang('produce','批次')" clearable @keyup.enter="handleQuery" />
+                <el-input v-model="queryParams.batch" :placeholder="tLang('common', '请输入') + tLang('produce', '批次')"
+                    clearable @keyup.enter="handleQuery" />
             </el-form-item>
             <el-form-item>
-                <el-button type="primary" icon="search" size="mini" @click="handleQuery">{{tLang('common','搜索')}}</el-button>
+                <el-button type="primary" icon="search" size="mini"
+                    @click="handleQuery">{{ tLang('common', '搜索') }}</el-button>
                 <el-button icon="refresh" size="mini" @click="resetQuery">{{ tLang('common', '重置') }}</el-button>
             </el-form-item>
         </el-form>
@@ -62,17 +68,23 @@
         <el-table v-loading="loading" :data="produceList" @selection-change="handleSelectionChange">
             <el-table-column type="selection" width="55" align="center" />
             <el-table-column type="index" :label="tLang('common', '序号')" width="60" align="center" />
-            <el-table-column :label="tLang('produce','产品编码')" v-if="columns[0].visible" align="center" prop="productionCode" />
+            <el-table-column :label="tLang('produce', '产品编码')" v-if="columns[0].visible" align="center"
-            <el-table-column :label="tLang('produce','设备编码')" v-if="columns[1].visible" align="center" prop="deviceCode" />
+                prop="productionCode" />
-            <el-table-column :label="tLang('produce','员工编号')" v-if="columns[2].visible" align="center" prop="persionCode" />
+            <el-table-column :label="tLang('produce', '设备编码')" v-if="columns[1].visible" align="center"
-            <el-table-column :label="tLang('produce','目标产量')" v-if="columns[3].visible" align="center" prop="planOutput" />
+                prop="deviceCode" />
+            <el-table-column :label="tLang('produce', '员工编号')" v-if="columns[2].visible" align="center"
+                prop="persionCode" />
+            <el-table-column :label="tLang('produce', '目标产量')" v-if="columns[3].visible" align="center"
+                prop="planOutput" />
             <el-table-column :label="tLang('produce', '当前产量')" v-if="columns[4].visible" align="center" prop="output" />
-            <el-table-column :label="tLang('produce','开始时间')" v-if="columns[5].visible" align="center" prop="starttime" width="180">
+            <el-table-column :label="tLang('produce', '开始时间')" v-if="columns[5].visible" align="center" prop="starttime"
+                width="180">
                 <template #default="scope">
                     <span>{{ parseTime(scope.row.starttime, '{y}-{m}-{d} {hh}:{mm}:{ss}') }}</span>
                 </template>
             </el-table-column>
-            <el-table-column :label="tLang('produce','结束时间')" v-if="columns[6].visible" align="center" prop="endtime" width="180">
+            <el-table-column :label="tLang('produce', '结束时间')" v-if="columns[6].visible" align="center" prop="endtime"
+                width="180">
                 <template #default="scope">
                     <span>{{ parseTime(scope.row.endtime, '{y}-{m}-{d} {hh}:{mm}:{ss}') }}</span>
                 </template>
@@ -97,8 +109,12 @@
             </el-table-column>
         </el-table>
 
-        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
+        <div class="pagination">
-            :limit.sync="queryParams.pageSize" @pagination="getList" />
+            <el-pagination :hide-on-single-page="true" v-model:current-page="queryParams.pageNum"
+                v-model:page-size="queryParams.pageSize" :page-sizes="[25, 50, 100, 150]"
+                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="getList"
+                @current-change="getList" />
+        </div>
         <AddEdit :title="title" v-model="open" :form="form" @submitForm="submitForm"></AddEdit>
         <InfoVue v-model="infoDialog" :info="produceinfo" />
 
@@ -241,8 +257,10 @@ function reset() {
 
 /**详情按钮操作 */
 function handleInfo(row) {
-  produceinfo.value = row
+    getOutputInfo(row.id).then(response => {
-  infoDialog.value = true
+        produceinfo.value = response.data;
+        infoDialog.value = true;
+    });
 }
 
 /** 修改按钮操作 */
@@ -271,4 +289,12 @@ onMounted(() => {
 })
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.pagination {
+    width: 100%;
+    margin: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+</style>

src/views/product/needle/index.vue

@@ -2,22 +2,24 @@
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item :label="tLang('product', '产品编码')" prop="code">
-        <el-input v-model="queryParams.code" :placeholder="tLang('common','请输入') + tLang('product','产品编码')" clearable @keyup.enter="handleQuery" />
+        <el-input v-model="queryParams.code" :placeholder="tLang('common', '请输入') + tLang('product', '产品编码')" clearable
+          @keyup.enter="handleQuery" />
       </el-form-item>
       <el-form-item :label="tLang('product', '针号')" prop="needleNum">
-        <el-input v-model="queryParams.needleNum" :placeholder="tLang('common','请输入') + tLang('product','针号')" clearable @keyup.enter="handleQuery" />
+        <el-input v-model="queryParams.needleNum" :placeholder="tLang('common', '请输入') + tLang('product', '针号')" clearable
+          @keyup.enter="handleQuery" />
       </el-form-item>
       <el-form-item :label="tLang('product', '面线信息')" prop="surfacelineId">
-        <el-input v-model="queryParams.surfacelineId" :placeholder="tLang('common','请输入') + tLang('product','面线信息')" clearable
+        <el-input v-model="queryParams.surfacelineId" :placeholder="tLang('common', '请输入') + tLang('product', '面线信息')"
-          @keyup.enter="handleQuery" />
+          clearable @keyup.enter="handleQuery" />
       </el-form-item>
       <el-form-item :label="tLang('product', '底线信息')" prop="bottomlineId">
-        <el-input v-model="queryParams.bottomlineId" :placeholder="tLang('common','请输入') + tLang('product','底线信息')" clearable
+        <el-input v-model="queryParams.bottomlineId" :placeholder="tLang('common', '请输入') + tLang('product', '底线信息')"
-          @keyup.enter="handleQuery" />
+          clearable @keyup.enter="handleQuery" />
       </el-form-item>
       <el-form-item :label="tLang('product', '梭芯信息')" prop="shuttlecoreId">
-        <el-input v-model="queryParams.shuttlecoreId" :placeholder="tLang('common','请输入') + tLang('product','梭芯信息')" clearable
+        <el-input v-model="queryParams.shuttlecoreId" :placeholder="tLang('common', '请输入') + tLang('product', '梭芯信息')"
-          @keyup.enter="handleQuery" />
+          clearable @keyup.enter="handleQuery" />
       </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="search" size="mini" @click="handleQuery">{{ tLang('common', '搜索') }}</el-button>
@@ -50,7 +52,8 @@
       <el-table-column :label="tLang('product', '产品编码')" align="center" v-if="columns[0].visible" prop="code" />
       <el-table-column :label="tLang('product', '针号')" align="center" v-if="columns[1].visible" prop="needleNum" />
       <el-table-column :label="tLang('product', '面线信息')" align="center" v-if="columns[2].visible" prop="surfacelineId" />
-      <el-table-column :label="tLang('product','底线信息')" align="center" width="80" v-if="columns[3].visible" prop="bottomlineId" />
+      <el-table-column :label="tLang('product', '底线信息')" align="center" width="80" v-if="columns[3].visible"
+        prop="bottomlineId" />
       <el-table-column :label="tLang('product', '梭芯信息')" align="center" v-if="columns[4].visible" prop="shuttlecoreId" />
       <el-table-column :label="tLang('product', '排序')" align="center" v-if="columns[5].visible" prop="sort" />
       <el-table-column :label="tLang('product', '最小值')" align="center" v-if="columns[6].visible" prop="min" />
@@ -71,8 +74,12 @@
       </el-table-column>
     </el-table>
 
-    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+    <div class="pagination">
-      @pagination="getList" />
+      <el-pagination :hide-on-single-page="true" v-model:current-page="queryParams.pageNum"
+        v-model:page-size="queryParams.pageSize" :page-sizes="[25, 50, 100, 150]"
+        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="getList"
+        @current-change="getList" />
+    </div>
     <AddEdit :title="title" v-model="open" :form="form" @submitForm="submitForm"></AddEdit>
   </div>
 </template>
@@ -248,4 +255,12 @@ onMounted(() => {
 })
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.pagination {
+  width: 100%;
+  margin: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

src/views/product/product/index.vue

@@ -45,9 +45,7 @@
       <el-table-column :label="tLang('product', '产品编码')" align="center" v-if="columns[2].visible" prop="code" />
       <el-table-column :label="tLang('product', '二维码')" align="center" v-if="columns[2].visible" prop="code">
         <template #default="scope">
-          <el-button type="primary" @click="getProductQRCode(scope.row.code)">{{ tLang('product', '查看')
+          <el-button type="primary" @click="getProductQRCode(scope.row.code)">{{ tLang('product', '下载')
-            }}</el-button>
-          <el-button type="warning" @click="downloadQRCode(scope.row.code)">{{ tLang('product', '下载')
             }}</el-button>
         </template>
       </el-table-column>
@@ -69,14 +67,19 @@
       </el-table-column>
     </el-table>
 
-    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+    <div class="pagination">
-      @pagination="getList" />
+      <el-pagination :hide-on-single-page="true" v-model:current-page="queryParams.pageNum"
+        v-model:page-size="queryParams.pageSize" :page-sizes="[25, 50, 100, 150]"
+        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="getList"
+        @current-change="getList" />
+    </div>
     <AddEdit :title="title" v-model="open" :form="form" @submitForm="submitForm"></AddEdit>
     <InfoVue v-model="infoDialog" :info="productinfo" />
 
     <el-image-viewer v-if="showImagePreview" :url-list="showsrcListref" hide-on-click-modal teleported
       @close="closePreview" style="z-index: 3000" />
   </div>
+  <canvas ref="myCanvas" width="350" height="250" style="display: none;"></canvas>
 </template>
 
 <script setup>
@@ -123,48 +126,52 @@ let showImagePreview = ref(false)
 function closePreview() {
   showImagePreview.value = false
 }
-
+let myCanvas = ref(null)
+let ctx = null
 function getProductQRCode(code) {
   getQRCode({ code }).then(response => {
     if (response.code == 200) {
-      let base64Image = response.data      
+      const qrCodeURL = response.data.base64
-      // 打开新标签页
+      let list = JSON.parse(response.data.content)
-      var newWindow = window.open('', '_blank');
+      console.log(list);
-      // 在新标签页中写入图片
+      ctx = myCanvas.value.getContext('2d');
-      if (newWindow) {
+
-        newWindow.href = base64Image
+      // 绘制二维码
-        newWindow.document.write(`
+      const qrImage = new Image();
-        <div style="width:100%;height:100%;display:flex;flex-direction: column;justify-content:center;align-items:center;">
+      qrImage.onload = function () {
-          <img src="${base64Image}" alt="Image" style="align:center;" />
+        ctx.drawImage(qrImage, 30, 10, 200, 200); // 根据需要调整二维码的位置
-          <button style="width: 100px;height: 40px;border-radius: 10px;background: #67c23a;border: none;color: #fff;" onclick="window.print()">打印</button>
+        addListInfo(list);
-          </div>
+      };
-        `);
+      qrImage.src = qrCodeURL;
-      } else {
-        alert('无法打开新窗口。请允许弹出窗口。');
-      }
-      // showsrcListref.value = [response.data]
-      // showImagePreview.value = true
     }
   });
+
+  
+// 添加列表信息
+function addListInfo(list) {
+  ctx.font = "12px Arial";
+  ctx.fillStyle = "black";
+  
+  Object.keys(list).forEach((key,index) => {
+    ctx.fillText(key +':'+ list[key], 240, 30 + index * 20); // 调整文本的位置和行间距
+  });
+  downloadImage();
 }
 
-//二维码下载
+// 下载图片
-function downloadQRCode(code) {
+function downloadImage() {
-  getQRCode({ code }).then(response => {
+  const image = myCanvas.value.toDataURL("image/png").replace("image/png", "image/octet-stream");
-    if (response.code == 200) {
+  const link = document.createElement('a');
-      let base64Image = response.data
+  link.download = code + '.png';
-      // 创建a标签
+  link.href = image;
-      var a = document.createElement('a');
+  link.click();
-      a.href = base64Image;
-      // 创建一个单击事件
-      var event = new MouseEvent('click');
-      // 设置a标签的下载链接
-      a.download = code + '.png';
-      // 触发a标签的单击事件
-      a.dispatchEvent(event);
 }
-  });
 }
+
+
+
+
+
 // 列显隐信息
 const columns = ref([
   { key: 0, label: proxy.tLang('product', '产品名称'), visible: true },
@@ -283,4 +290,12 @@ onMounted(() => {
 })
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.pagination {
+  width: 100%;
+  margin: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

src/views/product/working/index.vue

@@ -2,10 +2,12 @@
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item :label="tLang('product', '产品编码')" prop="code">
-        <el-input v-model="queryParams.code" :placeholder="tLang('common','请输入') + tLang('product','产品编码')" clearable @keyup.enter.native="handleQuery" />
+        <el-input v-model="queryParams.code" :placeholder="tLang('common', '请输入') + tLang('product', '产品编码')" clearable
+          @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item :label="tLang('product', '步骤')" prop="step">
-        <el-input v-model="queryParams.step" :placeholder="tLang('common','请输入') + tLang('product','步骤')" clearable @keyup.enter.native="handleQuery" />
+        <el-input v-model="queryParams.step" :placeholder="tLang('common', '请输入') + tLang('product', '步骤')" clearable
+          @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="search" size="mini" @click="handleQuery">{{ tLang('common', '搜索') }}</el-button>
@@ -51,8 +53,12 @@
       </el-table-column>
     </el-table>
 
-    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+    <div class="pagination">
-      @pagination="getList" />
+      <el-pagination :hide-on-single-page="true" v-model:current-page="queryParams.pageNum"
+        v-model:page-size="queryParams.pageSize" :page-sizes="[25, 50, 100, 150]"
+        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="getList"
+        @current-change="getList" />
+    </div>
     <AddEdit :title="title" v-model="open" :form="form" @submitForm="submitForm"></AddEdit>
   </div>
 </template>
@@ -210,4 +216,12 @@ onMounted(() => {
 })
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.pagination {
+  width: 100%;
+  margin: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

src/views/quality/index.vue

@@ -49,12 +49,12 @@
         </el-form>
         <el-row :gutter="20" class="mb8">
             <el-col :span="2">
-                <el-statistic :title="tLang('quality', '产品合格率')" :value="66" :value-style="{ color: 'green' }"
+                <el-statistic :title="tLang('quality', '产品合格率')" :value="qualifiedRate" :precision="1" :value-style="{ color: 'green' }"
-                    :formatter="(val) => { return val + '%' }" />
+                    :formatter="(val) => { return ((val/total)*100).toFixed(1) + '%' }" />
             </el-col>
             <el-col :span="2">
-                <el-statistic :title="tLang('quality', '产品不合格率')" :value="66" :value-style="{ color: 'red' }"
+                <el-statistic :title="tLang('quality', '产品不合格率')" :value="unqualifiedRate" :precision="1" :value-style="{ color: 'red' }"
-                    :formatter="(val) => { return val + '%' }" />
+                    :formatter="(val) => { return ((val/total)*100).toFixed(1) + '%' }" />
             </el-col>
             <el-col :span="2">
                 <el-statistic :title="tLang('quality', '产品完成量')" :value="total" />
@@ -90,7 +90,7 @@
                     <span>{{ parseTime(scope.row.endtime, '{y}-{m}-{d} {hh}:{mm}:{ss}') }}</span>
                 </template>
             </el-table-column>
-            <el-table-column :label="tLang('quality', '状态')" v-if="columns[7].visible" align="center" prop="batch" />
+            <el-table-column :label="tLang('quality', '状态')" v-if="columns[7].visible" align="center" prop="state" />
             <!-- <el-table-column :label="tLang('quality','')操作" align="center" class-name="small-padding fixed-width">
                 <template #default="scope">
                     <el-tooltip content="详情" placement="top" v-if="scope.row.userId !== 1">
@@ -109,8 +109,12 @@
             </el-table-column> -->
         </el-table>
 
-        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
+        <div class="pagination">
-            :limit.sync="queryParams.pageSize" @pagination="getList" />
+            <el-pagination :hide-on-single-page="true" v-model:current-page="queryParams.pageNum"
+                v-model:page-size="queryParams.pageSize" :page-sizes="[25, 50, 100, 150]"
+                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="getList"
+                @current-change="getList" />
+        </div>
 
 
     </div>
@@ -118,7 +122,7 @@
 
 <script setup>
 import { ref, reactive, watch, onMounted } from 'vue'
-import { listQuality } from "@/api/casm/quality";
+import { listQuality,qualitystandardRate } from "@/api/casm/quality";
 const { proxy } = getCurrentInstance();
 
 // 遮罩层
@@ -162,10 +166,17 @@ const columns = ref([
     { key: 7, label: proxy.tLang('quality', '状态'), visible: true },
 ]);
 
-
+let qualifiedRate = ref(1)
+let unqualifiedRate = ref(1)
 /** 查询设备信息列表 */
 function getList() {
     loading.value = true;
+    qualitystandardRate().then(response => {
+        if (response.code === 200) {
+            qualifiedRate.value = response.data.on
+            unqualifiedRate.value = response.data.off
+        }
+    })
     listQuality(queryParams).then(response => {
         qualityList.value = response.rows;
         total.value = response.total;
@@ -202,4 +213,12 @@ onMounted(() => {
 })
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.pagination {
+    width: 100%;
+    margin: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+</style>