经编机静态页80%，供应商维护静态页

src/components/form-test/index.vue

@@ -218,7 +218,14 @@
         搜索与重置操作按钮:
          query: 搜索方法
        -->
-      <el-col v-if="this.formConfig['operation'] !== undefined" :span="6">
+      <el-col
+        v-if="this.formConfig['operation'] !== undefined"
+        :span="
+          24 / this.formConfig['operation'].span
+            ? 24 / this.formConfig['operation'].span
+            : 6
+        "
+      >
         <div style="margin-left: 15px; line-height: 38px">
           <el-button
             type="primary"

src/components/label-title/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="title-info">
+    <div class="vertical-bar"></div>
+    <div class="content">{{ content }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    content: String,
+    default: "",
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.title-info {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  height: 24px;
+  line-height: 24px;
+  .vertical-bar {
+    width: 2px;
+    height: 12px;
+    background-color: #0084ff;
+    margin-right: 7px;
+    margin-top: 3px;
+  }
+  .content {
+    font-size: 13px;
+    font-weight: 600;
+    color: #333333;
+  }
+}
+</style>

src/lang/zh.js

@@ -19,6 +19,10 @@ export default {
   create_time: "创建时间",
   update_time: "更新时间",
   keyword: "关键词",
+  excelImport: 'Excel导入',
+  pleaseSelect: '请选择',
+  pleaseInput: '请输入',
+
   wel: {
     info: '早安，Smallwei，Avuex一款超乎你想象的框架！',
     dept: '我是avue团队下的一个部门-哈皮部门-哈皮职位',
@@ -256,5 +260,63 @@ export default {
       other: '其他',
 
     },
+    spu: {
+      spuCode: "spu编码",
+      spuName: 'spu名称',
+      spuDescription: "spu说明",
+      spuAdd: 'spu添加',
+      spuEdit: 'spu编辑',
+      spuNameRules: '请输入spu名称'
+
+    },
+    supply: {
+      supplyAdd: '添加供应商',
+      supplyEdit: "编辑供应商",
+      priceMaintenance: "价格维护",
+      supplyType: '供应商类型',
+      supplyCode: "供应商编码",
+      supplyName: '供应商名称',
+      city: '所在城市',
+      accountingPeriod: '账期',
+      contacts: '联系人',
+      contactNumber: '联系电话',
+      returnAndReplacementPeriod: '退换货期限',
+      enclosure: '附件',
+      address: "详细地址",
+      accountName: '户名',
+      bankAccount: '银行账户',
+      bankOfDeposit: '开户银行',
+      bankNo: '银行号',
+      supplyTypeRules: '请选择供应商类型',
+      supplyNameRules: '请输入供应商名称',
+      contactsRules: '请输入联系人',
+      contactNumberRules: '请输入联系电话',
+      accountingPeriodRules: '请输入账期',
+      returnAndReplacementPeriodRules: '请输入退换货期限',
+      supplyPriceMaintain: "供应商价格维护",
+      priceMaintenance: {
+        supplyPriceAdd: "添加供应商价格",
+        supplyPriceEdit: "编辑供应商价格",
+
+        back: "返回",
+        goodCode: '物品编码',
+        goodName: '物品名称',
+        goodType: '物品类型',
+        supplyPrice: '供应单价',
+
+      },
+
+
+
+    },
+  },
+  equipment: {
+    deviceInterface: '设备界面',
+    realTimeDataList: "实时数据列表",
+    name: '名称',
+    realTimeData: "实时数据",
+    keyword: "关键字",
+    infoCategory: '信息分类',
+    interfaceData: 'API接口数据'
   },
 }

src/router/page/index.js

@@ -188,6 +188,59 @@ export default [
     ],
   },
   {
+    path: '/product-material/spu',
+    component: Layout,
+    redirect: '/product-material/spu/index',
+    children: [
+      {
+        path: 'index',
+        name: 'spu管理',
+        component: () => import(/* webpackChunkName: "page" */ '@/views/product-material/spu/index'),
+        props: true,
+      },
+    ],
+  },
+  {
+    path: '/product-material/supply',
+    component: Layout,
+    redirect: '/product-material/supply/index',
+    children: [
+      {
+        path: 'index',
+        name: '供应商维护',
+        component: () => import(/* webpackChunkName: "page" */ '@/views/product-material/supply/index'),
+        props: true,
+      },
+    ],
+  },
+  {
+    path: '/product-material/supply',
+    component: Layout,
+    redirect: '/product-material/supply/priceMaintenance',
+    children: [
+      {
+        path: 'priceMaintenance',
+        name: '供应商价格维护',
+        component: () => import(/* webpackChunkName: "page" */ '@/views/product-material/supply/priceMaintenance'),
+        props: true,
+      },
+    ],
+  },
+
+  {
+    path: '/equipment',
+    component: Layout,
+    redirect: '/equipment/index',
+    children: [
+      {
+        path: 'index',
+        name: '设备',
+        component: () => import(/* webpackChunkName: "page" */ '@/views/equipment/index'),
+        props: true,
+      },
+    ],
+  },
+  {
     path: '*',
     redirect: '/404',
   },

src/views/Internet-of-things/equipment-management/index.vue

@@ -3,87 +3,137 @@
     <test v-model="queryParams" :form-config="queryForm"></test>
 
     <el-table :data="tableList" v-loading="loading">
-      <el-table-column :label="$t('Internet_of_things.equipment.applicationName')" align="center" prop="applicationName" />
-      <el-table-column :label="$t('Internet_of_things.equipment.productName')" align="center" prop="productName" />
-      <el-table-column :label="$t('Internet_of_things.equipment.deviceName')" align="center" prop="deviceName" />
-      <el-table-column :label="$t('Internet_of_things.equipment.nodeId')" align="center" prop="nodeId" width="120" />
-      <el-table-column :label="$t('Internet_of_things.equipment.deviceStatus')" align="center" prop="" width="120" />
-      <el-table-column :label="$t('Internet_of_things.equipment.deviceId')" align="center" prop="deviceId" />
-      <el-table-column :label="$t('Internet_of_things.equipment.secret')" align="center" prop="secret" width="120" />
+      <el-table-column
+        :label="$t('Internet_of_things.equipment.applicationName')"
+        align="center"
+        prop="applicationName"
+      />
+      <el-table-column
+        :label="$t('Internet_of_things.equipment.productName')"
+        align="center"
+        prop="productName"
+      />
+      <el-table-column
+        :label="$t('Internet_of_things.equipment.deviceName')"
+        align="center"
+        prop="deviceName"
+      />
+      <el-table-column
+        :label="$t('Internet_of_things.equipment.nodeId')"
+        align="center"
+        prop="nodeId"
+        width="120"
+      />
+      <el-table-column
+        :label="$t('Internet_of_things.equipment.deviceStatus')"
+        align="center"
+        prop=""
+        width="120"
+      />
+      <el-table-column
+        :label="$t('Internet_of_things.equipment.deviceId')"
+        align="center"
+        prop="deviceId"
+      />
+      <el-table-column
+        :label="$t('Internet_of_things.equipment.secret')"
+        align="center"
+        prop="secret"
+        width="120"
+      />
       <el-table-column :label="$t('operation')" align="center" width="80">
         <template slot-scope="scope">
-          <el-button type="text" @click="handleDelete(scope.row)">{{ $t('delete') }} </el-button>
+          <el-button type="text" @click="handleDelete(scope.row)"
+            >{{ $t("delete") }}
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
 
-    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
 
     <el-dialog title="添加设备" v-if="open" :visible.sync="open" width="30%">
-      <test ref="test" v-model="dialogParams" :form-config="dialogForm" :insideRules="dialogRules"></test>
+      <test
+        ref="test"
+        v-model="dialogParams"
+        :form-config="dialogForm"
+        :insideRules="dialogRules"
+      ></test>
     </el-dialog>
   </el-card>
 </template>
 
 <script>
-import * as API from '@/api/Internet-of-things/equipment-management.js'
-import * as APISelect from '@/api/Internet-of-things/select.js'
-import test from '@/components/form-test/index.vue'
+import * as API from "@/api/Internet-of-things/equipment-management.js";
+import * as APISelect from "@/api/Internet-of-things/select.js";
+import test from "@/components/form-test/index.vue";
 
 export default {
-  name: 'equipment-management',
+  name: "equipment-management",
   components: { test },
   data() {
     return {
       queryParams: {
         pageNum: 1,
         pageSize: 10,
-        keyword: '',
-        tdaApplicationId: '',
-        tdaProductId: '',
+        keyword: "",
+        tdaApplicationId: "",
+        tdaProductId: "",
       },
       queryForm: {
         keyword: {
-          label: this.$t('Internet_of_things.equipment.keyword'),
+          label: this.$t("Internet_of_things.equipment.keyword"),
           span: 6,
         },
         tdaApplicationId: {
-          label: this.$t('Internet_of_things.equipment.tdaApplicationId'),
+          label: this.$t("Internet_of_things.equipment.tdaApplicationId"),
           span: 6,
-          type: 'select',
+          type: "select",
           data: [],
-          keyName: 'id',
-          labelName: 'appName',
+          keyName: "id",
+          labelName: "appName",
         },
         tdaProductId: {
-          label: this.$t('Internet_of_things.equipment.tdaProductId'),
+          label: this.$t("Internet_of_things.equipment.tdaProductId"),
           span: 6,
-          type: 'select',
+          type: "select",
           data: [],
-          keyName: 'id',
-          labelName: 'name',
+          keyName: "id",
+          labelName: "name",
         },
         operation: {
           // 搜索按钮操作
           query: () => {
-            this.queryParams.pageNum = 1
-            this.getList()
+            this.queryParams.pageNum = 1;
+            this.getList();
           },
           // 重置按钮操作
           reset: () => {
-            this.queryParams = { pageNum: 1, pageSize: 10, keyword: '', tdaApplicationId: '', name: '' }
-            this.queryParams.pageNum = 1
-            this.getList()
+            this.queryParams = {
+              pageNum: 1,
+              pageSize: 10,
+              keyword: "",
+              tdaApplicationId: "",
+              name: "",
+            };
+            this.queryParams.pageNum = 1;
+            this.getList();
           },
         },
         otherButton: {
           list: [
             {
-              name: this.$t('Internet_of_things.equipment.addEquipment'),
-              methodsText: 'add',
-              type: 'primary',
+              name: this.$t("Internet_of_things.equipment.addEquipment"),
+              methodsText: "add",
+              type: "primary",
               add: () => {
-                this.handleAdd()
+                this.handleAdd();
               },
             },
           ],
@@ -93,89 +143,121 @@ export default {
       total: 0,
       loading: false,
       open: false,
-      title: '',
+      title: "",
       dialogParams: {
-        tdaApplicationId: '',
-        tdaProductId: '',
-        nodeId: '',
-        deviceName: '',
-        secret: 'Fjhx@2012#',
+        tdaApplicationId: "",
+        tdaProductId: "",
+        nodeId: "",
+        deviceName: "",
+        secret: "Fjhx@2012#",
       },
       dialogForm: {
         loadingStatus: false,
         tdaApplicationId: {
-          label: this.$t('Internet_of_things.equipment.applicationName'),
-          type: 'select',
+          label: this.$t("Internet_of_things.equipment.applicationName"),
+          type: "select",
           data: [],
-          keyName: 'id',
-          labelName: 'appName',
+          keyName: "id",
+          labelName: "appName",
         },
         tdaProductId: {
-          label: this.$t('Internet_of_things.equipment.productName'),
-          type: 'select',
+          label: this.$t("Internet_of_things.equipment.productName"),
+          type: "select",
           data: [],
-          keyName: 'id',
-          labelName: 'name',
+          keyName: "id",
+          labelName: "name",
         },
         deviceName: {
-          label: this.$t('Internet_of_things.equipment.deviceName'),
+          label: this.$t("Internet_of_things.equipment.deviceName"),
         },
         nodeId: {
-          label: this.$t('Internet_of_things.equipment.nodeId'),
+          label: this.$t("Internet_of_things.equipment.nodeId"),
           span: 2,
         },
         secret: {
-          label: this.$t('Internet_of_things.equipment.secret'),
+          label: this.$t("Internet_of_things.equipment.secret"),
           disabled: true,
           span: 2,
         },
         otherButton: {
-          align: 'center',
+          align: "center",
           list: [
             {
-              name: this.$t('cancelText'),
-              methodsText: 'cancel',
+              name: this.$t("cancelText"),
+              methodsText: "cancel",
               cancel: () => {
-                this.open = false
+                this.open = false;
               },
             },
             {
-              name: this.$t('submitText'),
-              methodsText: 'submit',
-              type: 'primary',
+              name: this.$t("submitText"),
+              methodsText: "submit",
+              type: "primary",
               submit: () => {
-                this.handleSubmit()
+                this.handleSubmit();
               },
             },
           ],
         },
       },
       dialogRules: {
-        tdaApplicationId: [{ required: true, message: this.$t('Internet_of_things.equipment.tdaApplicationIdRules'), trigger: 'change' }],
-        tdaProductId: [{ required: true, message: this.$t('Internet_of_things.equipment.tdaProductIdRules'), trigger: 'change' }],
-        deviceName: [{ required: true, message: this.$t('Internet_of_things.equipment.deviceNameRules'), trigger: 'blur' }],
-        nodeId: [{ required: true, message: this.$t('Internet_of_things.equipment.nodeIdRules'), trigger: 'blur' }],
-        secret: [{ required: true, message: this.$t('Internet_of_things.equipment.secretRules'), trigger: 'blur' }],
+        tdaApplicationId: [
+          {
+            required: true,
+            message: this.$t(
+              "Internet_of_things.equipment.tdaApplicationIdRules"
+            ),
+            trigger: "change",
+          },
+        ],
+        tdaProductId: [
+          {
+            required: true,
+            message: this.$t("Internet_of_things.equipment.tdaProductIdRules"),
+            trigger: "change",
+          },
+        ],
+        deviceName: [
+          {
+            required: true,
+            message: this.$t("Internet_of_things.equipment.deviceNameRules"),
+            trigger: "blur",
+          },
+        ],
+        nodeId: [
+          {
+            required: true,
+            message: this.$t("Internet_of_things.equipment.nodeIdRules"),
+            trigger: "blur",
+          },
+        ],
+        secret: [
+          {
+            required: true,
+            message: this.$t("Internet_of_things.equipment.secretRules"),
+            trigger: "blur",
+          },
+        ],
       },
-    }
+    };
   },
   created() {
-    this.getSelectList()
+    this.getSelectList();
   },
   mounted() {
-    this.getList()
+    this.getList();
   },
   watch: {
-    'dialogParams.tdaApplicationId': {
+    "dialogParams.tdaApplicationId": {
       handler(val) {
         if (val) {
           APISelect.tdaProductList({ tdaApplicationId: val }).then((res) => {
-            this.dialogForm.tdaProductId.data = res.data.data
-          })
+            this.dialogForm.tdaProductId.data = res.data.data;
+          });
         } else {
-          this.dialogForm.tdaProductId.data = []
+          this.dialogForm.tdaProductId.data = [];
         }
-        this.dialogParams.tdaProductId = ''
+        this.dialogParams.tdaProductId = "";
       },
       immediate: true,
     },
@@ -183,75 +265,75 @@ export default {
   methods: {
     getSelectList() {
       APISelect.tdaApplicationList().then((res) => {
-        this.queryForm.tdaApplicationId.data = res.data.data
-        this.dialogForm.tdaApplicationId.data = res.data.data
-      })
+        this.queryForm.tdaApplicationId.data = res.data.data;
+        this.dialogForm.tdaApplicationId.data = res.data.data;
+      });
       APISelect.tdaProductList().then((res) => {
-        this.queryForm.tdaProductId.data = res.data.data
-      })
+        this.queryForm.tdaProductId.data = res.data.data;
+      });
     },
     getList() {
-      this.loading = true
+      this.loading = true;
       API.tdaDevicePage(this.queryParams).then(
         (res) => {
-          this.total = res.data.data.total
-          this.tableList = res.data.data.records
-          this.loading = false
+          this.total = res.data.data.total;
+          this.tableList = res.data.data.records;
+          this.loading = false;
         },
         (err) => {
-          console.log('tdaDevicePage: ' + err)
-          this.loading = false
-        },
-      )
+          console.log("tdaDevicePage: " + err);
+          this.loading = false;
+        }
+      );
     },
     handleAdd() {
       this.dialogParams = {
-        tdaApplicationId: '',
-        tdaProductId: '',
-        nodeId: '',
-        deviceName: '',
-        secret: 'Fjhx@2012#',
-      }
-      this.open = true
+        tdaApplicationId: "",
+        tdaProductId: "",
+        nodeId: "",
+        deviceName: "",
+        secret: "Fjhx@2012#",
+      };
+      this.open = true;
     },
     handleSubmit() {
-      this.$refs.test.$refs['form'].validate((valid) => {
+      this.$refs.test.$refs["form"].validate((valid) => {
         if (valid) {
-          this.dialogForm.loadingStatus = true
+          this.dialogForm.loadingStatus = true;
           API.tdaDeviceAdd(this.dialogParams).then(
             () => {
-              this.msgSuccess(this.$t('addSuccess'))
-              this.open = false
-              this.dialogForm.loadingStatus = false
-              this.getList()
+              this.msgSuccess(this.$t("addSuccess"));
+              this.open = false;
+              this.dialogForm.loadingStatus = false;
+              this.getList();
             },
             (err) => {
-              console.log('tdaDeviceAdd: ' + err)
-              this.dialogForm.loadingStatus = false
-            },
-          )
+              console.log("tdaDeviceAdd: " + err);
+              this.dialogForm.loadingStatus = false;
+            }
+          );
           // } else {
           //   setTimeout(() => {
           //     const errorDiv = document.getElementsByClassName('is-error')
           //     errorDiv[0].scrollIntoView()
           //   }, 0)
         }
-      })
+      });
     },
     handleDelete(row) {
-      this.$confirm(this.$t('askDeleteData'), {
-        confirmButtonText: this.$t('submitText'),
-        cancelButtonText: this.$t('cancelText'),
-        type: 'warning',
+      this.$confirm(this.$t("askDeleteData"), {
+        confirmButtonText: this.$t("submitText"),
+        cancelButtonText: this.$t("cancelText"),
+        type: "warning",
       }).then(() => {
         API.tdaDeviceDelete({ id: row.id }).then(() => {
-          this.msgSuccess(this.$t('deleteSuccess'))
-          this.getList()
-        })
-      })
+          this.msgSuccess(this.$t("deleteSuccess"));
+          this.getList();
+        });
+      });
     },
   },
-}
+};
 </script>
 
 <style lang="scss" scoped>

src/views/equipment/first.vue

@@ -0,0 +1,220 @@
+<template>
+  <div class="first">
+    <div class="top">
+      <input
+        type="text"
+        disabled
+        v-model="att"
+        style="margin-left: 110px; width: 90px"
+      />
+      <input
+        type="text"
+        disabled
+        v-model="att"
+        style="margin-left: 110px; width: 90px"
+      />
+      <input
+        type="text"
+        disabled
+        v-model="att"
+        style="margin-left: 146px; width: 124px"
+      />
+      <input
+        type="text"
+        disabled
+        v-model="att"
+        style="margin-left: 158px; width: 150px"
+      />
+      <div class="ql" style="width: 80px; margin-left: 100px">
+        <img src="/img/warpKnittingMachine/1/btn_ql.png" alt="" />
+      </div>
+    </div>
+    <div class="center">
+      <div class="line" style="top: 190px">
+        <input
+          type="text"
+          v-for="item in 5"
+          :key="item"
+          v-model="att"
+          style="margin-left: 20px"
+          disabled
+        />
+      </div>
+      <div class="line" style="top: 215px">
+        <input
+          type="text"
+          v-for="item in 5"
+          :key="item"
+          v-model="att"
+          style="margin-left: 20px"
+          disabled
+        />
+      </div>
+      <div class="line" style="top: 240px">
+        <input
+          type="text"
+          v-for="item in 5"
+          :key="item"
+          v-model="att"
+          style="margin-left: 20px"
+          disabled
+        />
+      </div>
+      <div class="line" style="top: 265px">
+        <input
+          type="text"
+          v-for="item in 5"
+          :key="item"
+          v-model="att"
+          style="margin-left: 20px"
+          disabled
+        />
+      </div>
+    </div>
+    <div class="bottom">
+      <div style="display: flex">
+        <div v-for="item in 12" :style="getStyle(item)" :key="item">
+          <img
+            v-if="true"
+            src="/img/warpKnittingMachine/1/img_lamp1.png"
+            alt=""
+          />
+          <img
+            v-else-if="false"
+            src="/img/warpKnittingMachine/1/img_lamp2.png"
+            alt=""
+          />
+          <img v-else src="/img/warpKnittingMachine/1/img_lamp3.png" alt="" />
+        </div>
+      </div>
+
+      <div style="display: flex; justify-content: space-between">
+        <div style="display: flex; margin-top: 45px">
+          <div v-for="item in 4" :style="getStyle(item)" :key="item">
+            <img
+              v-if="true"
+              src="/img/warpKnittingMachine/1/img_lamp1.png"
+              alt=""
+            />
+            <img
+              v-else-if="false"
+              src="/img/warpKnittingMachine/1/img_lamp2.png"
+              alt=""
+            />
+            <img v-else src="/img/warpKnittingMachine/1/img_lamp3.png" alt="" />
+          </div>
+        </div>
+        <div class="btn" style="display: flex; margin-top: 20px">
+          <button>设置</button>
+          <button>手动</button>
+          <button>班组</button>
+          <button>布面</button>
+          <button>信息</button>
+        </div>
+      </div>
+    </div>
+    <div class="side">
+      <div>
+        <button>{{ next }}</button>
+      </div>
+      <div style="margin-top: 190px">
+        <button>{{ last }}</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      att: "sss",
+      next: ">>",
+      last: "<<",
+    };
+  },
+  methods: {
+    getStyle(index) {
+      if (index === 1) {
+        return { "margin-left": "105px" };
+      } else if (index % 2 === 0) {
+        return { "margin-left": "66px" };
+      } else {
+        return { "margin-left": "68px" };
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.first {
+  width: 1200px;
+  height: 625px;
+  background: url("/img/warpKnittingMachine/1/jbj1.png") no-repeat;
+  background-size: 1200px 625px;
+  position: relative;
+  input {
+    background-color: #000;
+    height: 30px;
+    line-height: 30px;
+    color: aquamarine;
+  }
+
+  .top {
+    display: flex;
+    position: relative;
+    top: 105px;
+
+    .ql {
+      height: 36px;
+      line-height: 36px;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  .center {
+    .line {
+      display: flex;
+      position: relative;
+      padding-left: 182px;
+      input {
+        width: 155px;
+        border: none;
+        outline: none;
+      }
+    }
+  }
+  .bottom {
+    position: relative;
+    top: 330px;
+    img {
+      width: 26px;
+      height: 26px;
+    }
+    .btn {
+      button {
+        margin-right: 10px;
+        width: 88px;
+        height: 48px;
+      }
+    }
+  }
+  .side {
+    position: absolute;
+    top: 169px;
+    right: 10px;
+    button {
+      width: 60px;
+      height: 40px;
+      font-size: 16px;
+    }
+  }
+}
+img {
+  cursor: pointer;
+}
+</style>

src/views/equipment/five.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="five">
+    <div class="top">
+      <div class="compute">
+        <!-- <img src="/img/warpKnittingMachine/4/btn_js.png" alt="" /> -->
+      </div>
+      <div class="back">
+        <img src="/img/warpKnittingMachine/5/btn_back.png" alt="" />
+      </div>
+    </div>
+    <div class="body">
+      <div class="line" style="margin-top: 135px">
+        <div class="item" v-for="item in 4" :key="item" :style="getStyle(item)">
+          <div>
+            <input type="text" disabled />
+          </div>
+          <div class="btn">
+            <img src="/img/warpKnittingMachine/5/btn_add1.png" alt="" />
+            <img src="/img/warpKnittingMachine/5/btn_reduce1.png" alt="" />
+          </div>
+        </div>
+      </div>
+      <div class="line" style="margin-top: 70px">
+        <div class="item" v-for="item in 4" :key="item" :style="getStyle(item)">
+          <div>
+            <input type="text" disabled />
+          </div>
+          <div class="btn">
+            <img src="/img/warpKnittingMachine/5/btn_add1.png" alt="" />
+            <img src="/img/warpKnittingMachine/5/btn_reduce1.png" alt="" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      att: "sss",
+      next: ">>",
+      last: "<<",
+    };
+  },
+  methods: {
+    getStyle(index) {
+      switch (index) {
+        case 2:
+          return { "margin-left": "165px" };
+        case 3:
+          return { "margin-left": "138px" };
+        case 4:
+          return { "margin-left": "119px" };
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.five {
+  width: 1200px;
+  height: 625px;
+  background: url("/img/warpKnittingMachine/5/jbj5.png") no-repeat;
+  background-size: 1200px 625px;
+  position: relative;
+  input {
+    height: 50px;
+    width: 150px;
+    background: #000;
+    line-height: 50px;
+  }
+  .top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: 35px;
+    .compute {
+      padding-left: 20px;
+    }
+    .back {
+      padding-right: 20px;
+    }
+  }
+
+  .line {
+    display: flex;
+    padding-left: 55px;
+    .item {
+      .btn {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 10px;
+      }
+    }
+  }
+}
+img {
+  cursor: pointer;
+}
+</style>

src/views/equipment/four.vue

@@ -0,0 +1,189 @@
+<template>
+  <div class="four">
+    <div class="top">
+      <div class="compute">
+        <img src="/img/warpKnittingMachine/4/btn_js.png" alt="" />
+      </div>
+      <div class="back">
+        <img src="/img/warpKnittingMachine/4/btn_back.png" alt="" />
+      </div>
+    </div>
+    <div class="body">
+      <div class="line" style="margin-top: 68px">
+        <input
+          v-for="item in 5"
+          :key="item"
+          type="text"
+          disabled
+          :style="getStyle(item)"
+        />
+        <img
+          style="margin-left: 50px"
+          src="/img/warpKnittingMachine/4/btn_gx.png"
+          alt=""
+        />
+      </div>
+      <div class="line" style="margin-top: 15px">
+        <input
+          v-for="item in 5"
+          :key="item"
+          type="text"
+          disabled
+          :style="getStyle(item)"
+        />
+        <img
+          style="margin-left: 50px"
+          src="/img/warpKnittingMachine/4/btn_gx.png"
+          alt=""
+        />
+      </div>
+      <div class="line" style="margin-top: 15px">
+        <input
+          v-for="item in 5"
+          :key="item"
+          type="text"
+          disabled
+          :style="getStyle(item)"
+        />
+        <img
+          style="margin-left: 50px"
+          src="/img/warpKnittingMachine/4/btn_gx.png"
+          alt=""
+        />
+      </div>
+      <div class="line" style="margin-top: 15px">
+        <input
+          v-for="item in 5"
+          :key="item"
+          type="text"
+          disabled
+          :style="getStyle(item)"
+        />
+        <img
+          style="margin-left: 50px"
+          src="/img/warpKnittingMachine/4/btn_gx.png"
+          alt=""
+        />
+      </div>
+      <div class="line" style="margin-top: 15px">
+        <input
+          v-for="item in 5"
+          :key="item"
+          type="text"
+          disabled
+          :style="getStyle(item)"
+        />
+        <img
+          style="margin-left: 50px"
+          src="/img/warpKnittingMachine/4/btn_gx.png"
+          alt=""
+        />
+      </div>
+      <div class="line" style="margin-top: 15px">
+        <input
+          v-for="item in 5"
+          :key="item"
+          type="text"
+          disabled
+          :style="getStyle(item)"
+        />
+        <img
+          style="margin-left: 50px"
+          src="/img/warpKnittingMachine/4/btn_gx.png"
+          alt=""
+        />
+      </div>
+      <div class="line" style="margin-top: 15px">
+        <input
+          v-for="item in 5"
+          :key="item"
+          type="text"
+          disabled
+          :style="getStyle(item)"
+        />
+        <img
+          style="margin-left: 50px"
+          src="/img/warpKnittingMachine/4/btn_gx.png"
+          alt=""
+        />
+      </div>
+      <div class="line" style="margin-top: 15px">
+        <input
+          v-for="item in 5"
+          :key="item"
+          type="text"
+          disabled
+          :style="getStyle(item)"
+        />
+        <img
+          style="margin-left: 50px"
+          src="/img/warpKnittingMachine/4/btn_gx.png"
+          alt=""
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      att: "sss",
+      next: ">>",
+      last: "<<",
+    };
+  },
+  methods: {
+    getStyle(index) {
+      switch (index) {
+        case 1:
+          return { background: "#ccc" };
+        case 2:
+          return { background: "#ccc", "margin-left": "40px" };
+        case 3:
+          return { background: "#ccc", "margin-left": "50px" };
+        case 4:
+          return { background: "#000", "margin-left": "55px" };
+        case 5:
+          return { background: "#000", "margin-left": "55px" };
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.four {
+  width: 1200px;
+  height: 625px;
+  background: url("/img/warpKnittingMachine/4/jbj4.png") no-repeat;
+  background-size: 1200px 625px;
+  position: relative;
+  input {
+    height: 30px;
+    width: 120px;
+    line-height: 30px;
+  }
+  .top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: 35px;
+    .compute {
+      padding-left: 20px;
+    }
+    .back {
+      padding-right: 20px;
+    }
+  }
+
+  .line {
+    display: flex;
+    padding-left: 140px;
+  }
+}
+img {
+  cursor: pointer;
+}
+</style>

src/views/equipment/index.vue

@@ -0,0 +1,222 @@
+<template>
+  <div class="content">
+    <el-card class="box-card left">
+      <div>
+        <label-title :content="$t('equipment.deviceInterface')"> </label-title>
+        <div class="box">
+          <div class="top">
+            {{ $t("equipment.interfaceData") }}
+          </div>
+          <div class="bottom">
+            <!-- <first></first> -->
+            <!-- <two></two> -->
+            <!-- <three></three> -->
+            <!-- <four></four> -->
+            <!-- <five></five> -->
+            <!-- <six></six> -->
+            <seven></seven>
+          </div>
+        </div>
+      </div>
+    </el-card>
+    <el-card class="box-card right">
+      <div style="min-width: 500px">
+        <label-title
+          style="margin-bottom: 10px"
+          :content="$t('equipment.realTimeDataList')"
+        >
+        </label-title>
+        <test
+          ref="queryParams"
+          v-model="queryParams"
+          :form-config="queryForm"
+        ></test>
+        <el-table :data="tableList" v-loading="loading">
+          <el-table-column type="expand">
+            <template slot-scope="scope">
+              <el-table :data="scope.row.tableList" :show-header="false">
+                <el-table-column width="50" />
+                <el-table-column
+                  :label="$t('equipment.name')"
+                  align="center"
+                  prop="status"
+                />
+                <el-table-column
+                  :label="$t('equipment.realTimeData')"
+                  align="center"
+                  prop="duration"
+                />
+              </el-table>
+            </template>
+          </el-table-column>
+          <el-table-column
+            :label="$t('equipment.name')"
+            align="center"
+            prop="status"
+          />
+          <el-table-column
+            :label="$t('equipment.realTimeData')"
+            align="center"
+            prop="duration"
+          />
+        </el-table>
+        <pagination
+          v-show="total > 0"
+          :total="total"
+          :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize"
+          @pagination="getList"
+        />
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import labelTitle from "@/components/label-title/index.vue";
+import test from "@/components/form-test/index.vue";
+
+import first from "./first.vue";
+import two from "./two.vue";
+import three from "./three.vue";
+import four from "./four.vue";
+import five from "./five.vue";
+import six from "./six.vue";
+import seven from "./seven.vue";
+
+export default {
+  components: {
+    labelTitle,
+    test,
+    first,
+    two,
+    three,
+    four,
+    five,
+    six,
+    seven,
+  },
+  data() {
+    return {
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        keyword: "",
+        tdaApplicationId: "",
+        tdaProductId: "",
+      },
+      queryForm: {
+        keyword: {
+          label: this.$t("equipment.keyword"),
+          span: 2,
+        },
+        tdaApplicationId: {
+          label: this.$t("equipment.infoCategory"),
+          span: 2,
+          type: "select",
+          data: [],
+          keyName: "id",
+          labelName: "appName",
+        },
+
+        operation: {
+          span: 2,
+          // 搜索按钮操作
+          query: () => {
+            this.queryParams.pageNum = 1;
+            this.getList();
+          },
+          // 重置按钮操作
+          reset: () => {
+            this.queryParams = {
+              pageNum: 1,
+              pageSize: 10,
+              keyword: "",
+              tdaApplicationId: "",
+              name: "",
+            };
+            this.queryParams.pageNum = 1;
+            this.getList();
+          },
+        },
+      },
+
+      tableList: [{ tableList: [{ title: "sss" }] }],
+      total: 3,
+      loading: false,
+    };
+  },
+  mounted() {
+    // this.getList();
+  },
+  methods: {
+    getList() {
+      this.loading = true;
+      API.tdaDevicePage(this.queryParams).then(
+        (res) => {
+          this.total = res.data.data.total;
+          this.tableList = res.data.data.records;
+          this.loading = false;
+        },
+        (err) => {
+          console.log("tdaDevicePage: " + err);
+          this.loading = false;
+        }
+      );
+    },
+    getStyle(item) {},
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep {
+  .el-card__body {
+    padding: 5px;
+  }
+}
+.content {
+  width: 100%;
+  .left {
+    margin-right: 10px;
+    width: 1240px;
+    float: left;
+    box-sizing: border-box;
+  }
+  .right {
+    width: calc(100vw - 1280px);
+    float: right;
+    overflow-x: scroll;
+  }
+}
+.box-card {
+  height: calc(100vh - 110px);
+  overflow: auto;
+}
+.box {
+  padding: 10px;
+  text-align: center;
+  .top {
+    width: 100%;
+    text-align: center;
+    background-color: #d9edff;
+    padding: 10px 0;
+    border: 1px solid #0084ff;
+    margin-bottom: 10px;
+  }
+  .img {
+    width: 1200px;
+    height: 625px;
+    img {
+      width: 100%;
+      height: 100%;
+      // height: calc(100vh - 260px);
+      // object-fit: contain;
+    }
+  }
+  .bottom {
+    width: 1200px;
+    height: 625px;
+  }
+}
+</style>

src/views/equipment/seven.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="seven">
+    <div class="top">
+      <div class="compute">
+        <!-- <img src="/img/warpKnittingMachine/4/btn_js.png" alt="" /> -->
+      </div>
+      <div class="back">
+        <img src="/img/warpKnittingMachine/7/btn_back.png" alt="" />
+      </div>
+    </div>
+    <div class="body">
+      <div class="line" style="margin-top: 105px">
+        <div class="item" v-for="item in 8" :key="item" :style="getStyle(item)">
+          <img
+            src="/img/warpKnittingMachine/7/btn_no1.png"
+            alt=""
+            v-if="false"
+          />
+          <img src="/img/warpKnittingMachine/7/btn_no2.png" alt="" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      att: "sss",
+      next: ">>",
+      last: "<<",
+    };
+  },
+  methods: {
+    getStyle(index) {
+      if (index > 1) {
+        let num = 62 + index;
+        return { "margin-left": num + "px" };
+      }
+      // switch (index) {
+      //   case 2:
+      //     return { "margin-left": "165px" };
+      //   case 3:
+      //     return { "margin-left": "138px" };
+      //   case 4:
+      //     return { "margin-left": "119px" };
+      // }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.seven {
+  width: 1200px;
+  height: 625px;
+  background: url("/img/warpKnittingMachine/7/jbj7.png") no-repeat;
+  background-size: 1200px 625px;
+  position: relative;
+  input {
+    height: 50px;
+    width: 150px;
+    background: #000;
+    line-height: 50px;
+  }
+  .top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: 35px;
+    .compute {
+      padding-left: 20px;
+    }
+    .back {
+      padding-right: 20px;
+    }
+  }
+
+  .line {
+    display: flex;
+    padding-left: 205px;
+    .item {
+      .btn {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 10px;
+      }
+    }
+  }
+}
+img {
+  cursor: pointer;
+}
+</style>