根据编码获取设备信息

hanfei / VueSharedPrinting

Browse code 根据编码获取设备信息 master
1 parent 331af81 commit 1dd219975b8ea464ebd40c64e531f9ff19fce181 linda authored on 2 Jan 2024

Patch

Showing 4 changed files

Ignore Space Show notes View src/api/resultApi.js
import request from "../utils/request"; // 打印价格 export const getPrintPrice = (params) => { return request({ url: "/device/getPrintPriceList", params, }); }; export const getDeviceByCode = (params) => { return request({ url: "/device/getDeviceByCode", params, }); }; import request from "../utils/request"; // 打印价格 export const getPrintPrice = (data) => { return request({ url: "/device/getPrintPriceList", params: data, }); };

Ignore Space Show notes View

src/api/resultApi.js

Ignore Space Show notes View src/utils/cite.js
// 引用地址 let inWebURL = "ws://127.0.0.1:7000/"; let baseURL = "http://192.168.250.110:8888"; let sbInfo = ""; export default { inWebURL, baseURL, sbInfo }; // 引用地址 let inWebURL = 'ws://127.0.0.1:7000/'; let baseURL = 'http://192.168.250.110:8888'; export default {inWebURL,baseURL}

Ignore Space Show notes View src/views/device.vue
<template> <div class="device"> <div class="box flex-between"> <div class="left"> <!-- 广告--> <div class="advertising icon1 flex-center"> <!-- <img src="../assets/demo1.png" />--> 广告位招租 </div> <!-- 功能--> <div class="feature flex-between"> <div class="main icon2 flex-start" @click="skip('operationGuide', 'U盘打印')" > <img src="../assets/demo2.png" /> <div>U盘打印</div> </div> <div class="main icon3 flex-start" @click="skip('operationGuide', '扫描打印')" > <img src="../assets/demo3.png" /> <div>扫描打印</div> </div> <div class="main icon4 flex-start" @click="skip('operationGuide', '身份证打印')" > <img src="../assets/demo4.png" /> <div>身份证打印</div> </div> </div> </div> <div class="right"> <div class="main4"> <span></span> <span></span> <div class="flex-center"> <img src="../assets/demo9.png" />扫一扫马上打印 </div> </div> </div> </div> <div class="box2 flex-between"> <div class="main2 flex-center" @click="skip('explain', '使用教程')"> <img src="../assets/demo6.png" />使用教程 </div> <div class="main2 flex-center" @click="skip('explain', '联系客服')"> <img src="../assets/demo7.png" />联系客服 </div> <div class="main2 flex-center" @click="skip('explain', '打印价格')"> <img src="../assets/demo5.png" />打印价格 </div> </div> </div> </template> <script> import { getDeviceByCode } from "../api/resultApi"; export default { name: "device", data() { return {}; }, created() { if (this.cite.sbInfo === "") { this.getDeviceByCode(); } }, methods: { skip(href, name) { this.$router.push({ name: href, params: { name: name, }, }); }, getDeviceByCode() { getDeviceByCode({ code: "sbbh" }).then((res) => { this.cite.sbInfo = res.data; }); }, }, }; </script> <style scoped lang="less"> .device { margin: 2.5rem 4.13rem 0; .box { .left { width: 76.88rem; .advertising { width: 100%; height: 32.5rem; border-radius: 1.63rem; margin-bottom: 1.88rem; cursor: pointer; overflow: hidden; font-size: 8rem; font-weight: 400; color: #ffffff; line-height: 8rem; img { width: 40rem; margin-top: -5rem; } } } .right { width: 33rem; } } .main { width: 32%; height: 10rem; border-radius: 1.63rem; font-size: 1.8rem; font-weight: 400; color: #ffffff; line-height: 1.8rem; margin-bottom: 1.88rem; cursor: pointer; img { width: 12rem; margin-top: -1rem; } } .icon1 { background: linear-gradient(359deg, #3dbf51 0%, #47d1a9 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(120, 229, 217, 0.45); } .icon2 { background: linear-gradient(180deg, #f2c952 0%, #db572b 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(255, 147, 128, 0.57); } .icon3 { background: linear-gradient(180deg, #84b2f7 0%, #8774d2 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(150, 135, 232, 0.3); } .icon4 { background: linear-gradient(180deg, #5be7ff 0%, #309fd8 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(104, 202, 253, 0.42); } .css1 { background: #ffffff; box-shadow: 0rem 0.63rem 1.25rem 0.06rem rgba(0, 0, 0, 0.14); border-radius: 1.63rem; cursor: pointer; } .main2 { width: 32%; height: 6.44rem; .css1(); font-size: 1.88rem; font-weight: bold; color: #323232; line-height: 2.63rem; img { width: 3.75rem; margin-right: 0.38rem; } } .main3 { width: 100%; height: 9.94rem; .css1(); font-size: 2.13rem; font-weight: bold; color: #323232; line-height: 3rem; img { width: 4.25rem; margin-right: 0.88rem; } } .main4 { width: 100%; height: 44.38rem; .css1(); font-size: 1.88rem; font-weight: 400; color: #323232; line-height: 2rem; margin-bottom: 1.88rem; span { display: inline-block; width: 18rem; height: 18rem; background: #ffffff; border: 0.06rem solid #707070; margin: 1rem auto 0; } div { margin-top: 1rem; } img { width: 2.31rem; margin-right: 1.19rem; } } } </style> <template> <div class="device"> <div class="box flex-between"> <div class="left"> <!-- 广告--> <div class="advertising icon1 flex-center"> <!-- <img src="../assets/demo1.png" />--> 广告位招租 </div> <!-- 功能--> <div class="feature flex-between"> <div class="main icon2 flex-start" @click="skip('operationGuide','U盘打印')"> <img src="../assets/demo2.png" /> <div>U盘打印</div> </div> <div class="main icon3 flex-start" @click="skip('operationGuide','扫描打印')"> <img src="../assets/demo3.png" /> <div>扫描打印</div> </div> <div class="main icon4 flex-start" @click="skip('operationGuide','身份证打印')"> <img src="../assets/demo4.png" /> <div>身份证打印</div> </div> </div> </div> <div class="right"> <div class="main4"> <span></span> <span></span> <div class="flex-center"><img src="../assets/demo9.png" />扫一扫马上打印</div> </div> </div> </div> <div class="box2 flex-between"> <div class="main2 flex-center" @click="skip('explain','使用教程')"> <img src="../assets/demo6.png" />使用教程 </div> <div class="main2 flex-center" @click="skip('explain','联系客服')"> <img src="../assets/demo7.png" />联系客服 </div> <div class="main2 flex-center" @click="skip('explain','打印价格')"> <img src="../assets/demo5.png" />打印价格 </div> </div> </div> </template> <script> export default { name: "device", data() { return { } }, methods: { skip(href,name) { this.$router.push({ name: href, params: { name: name } }) } }, } </script> <style scoped lang="less"> .device { margin: 2.5rem 4.13rem 0; .box { .left { width: 76.88rem; .advertising { width: 100%; height: 32.5rem; border-radius: 1.63rem; margin-bottom: 1.88rem; cursor: pointer; overflow: hidden; font-size: 8rem; font-weight: 400; color: #FFFFFF; line-height: 8rem; img { width: 40rem; margin-top: -5rem; } } } .right { width: 33rem; } } .main { width: 32%; height: 10rem; border-radius: 1.63rem; font-size: 1.8rem; font-weight: 400; color: #FFFFFF; line-height: 1.8rem; margin-bottom: 1.88rem; cursor: pointer; img { width: 12rem; margin-top: -1rem; } } .icon1 { background: linear-gradient(359deg, #3DBF51 0%, #47D1A9 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(120,229,217,0.45); } .icon2 { background: linear-gradient(180deg, #F2C952 0%, #DB572B 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(255,147,128,0.57); } .icon3 { background: linear-gradient(180deg, #84B2F7 0%, #8774D2 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(150,135,232,0.3); } .icon4 { background: linear-gradient(180deg, #5BE7FF 0%, #309FD8 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(104,202,253,0.42); } .css1 { background: #FFFFFF; box-shadow: 0rem 0.63rem 1.25rem 0.06rem rgba(0,0,0,0.14); border-radius: 1.63rem; cursor: pointer; } .main2 { width: 32%; height: 6.44rem; .css1(); font-size: 1.88rem; font-weight: bold; color: #323232; line-height: 2.63rem; img { width: 3.75rem; margin-right: .38rem; } } .main3 { width: 100%; height: 9.94rem; .css1(); font-size: 2.13rem; font-weight: bold; color: #323232; line-height: 3rem; img { width: 4.25rem; margin-right: .88rem; } } .main4 { width: 100%; height: 44.38rem; .css1(); font-size: 1.88rem; font-weight: 400; color: #323232; line-height: 2rem; margin-bottom: 1.88rem; span { display: inline-block; width: 18rem; height: 18rem; background: #FFFFFF; border: 0.06rem solid #707070; margin: 1rem auto 0; } div { margin-top: 1rem; } img { width: 2.31rem; margin-right: 1.19rem; } } } </style>

Ignore Space Show notes View

src/views/device.vue

<template>
  <div class="device">
    <div class="box flex-between">
      <div class="left">
        
        <div class="advertising icon1 flex-center">
          
          广告位招租
        </div>
        
        <div class="feature flex-between">
          <div
            class="main icon2 flex-start"
            @click="skip('operationGuide', 'U盘打印')"
          >
            <img src="../assets/demo2.png" />
            <div>U盘打印</div>
          </div>
          <div
            class="main icon3 flex-start"
            @click="skip('operationGuide', '扫描打印')"
          >
            <img src="../assets/demo3.png" />
            <div>扫描打印</div>
          </div>
          <div
            class="main icon4 flex-start"
            @click="skip('operationGuide', '身份证打印')"
          >
            <img src="../assets/demo4.png" />
            <div>身份证打印</div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="main4">
          <span></span>
          <span></span>
          <div class="flex-center">
            <img src="../assets/demo9.png" />扫一扫马上打印
          </div>
        </div>
      </div>
    </div>
    <div class="box2 flex-between">
      <div class="main2 flex-center" @click="skip('explain', '使用教程')">
        <img src="../assets/demo6.png" />使用教程
      </div>
      <div class="main2 flex-center" @click="skip('explain', '联系客服')">
        <img src="../assets/demo7.png" />联系客服
      </div>
      <div class="main2 flex-center" @click="skip('explain', '打印价格')">
        <img src="../assets/demo5.png" />打印价格
      </div>
    </div>
  </div>
</template>
<script>
import { getDeviceByCode } from "../api/resultApi";
export default {
  name: "device",
  data() {
    return {};
  },
  created() {
    if (this.cite.sbInfo === "") {
      this.getDeviceByCode();
    }
  },
  methods: {
    skip(href, name) {
      this.$router.push({
        name: href,
        params: {
          name: name,
        },
      });
    },
    getDeviceByCode() {
      getDeviceByCode({ code: "sbbh" }).then((res) => {
        this.cite.sbInfo = res.data;
      });
    },
  },
};
</script>

<template>
  <div class="device">
    <div class="box flex-between">
      <div class="left">

        <div class="advertising icon1 flex-center">

          广告位招租
        </div>

        <div class="feature flex-between">
          <div class="main icon2 flex-start" @click="skip('operationGuide','U盘打印')">
            <img src="../assets/demo2.png" />
            <div>U盘打印</div>
          </div>
          <div class="main icon3 flex-start" @click="skip('operationGuide','扫描打印')">
            <img src="../assets/demo3.png" />
            <div>扫描打印</div>
          </div>
          <div class="main icon4 flex-start" @click="skip('operationGuide','身份证打印')">
            <img src="../assets/demo4.png" />
            <div>身份证打印</div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="main4">
          <span></span>
          <span></span>
          <div class="flex-center"><img src="../assets/demo9.png" />扫一扫马上打印</div>
        </div>
      </div>
    </div>
    <div class="box2 flex-between">
      <div class="main2 flex-center" @click="skip('explain','使用教程')">
        <img src="../assets/demo6.png" />使用教程
      </div>
      <div class="main2 flex-center" @click="skip('explain','联系客服')">
        <img src="../assets/demo7.png" />联系客服
      </div>
      <div class="main2 flex-center" @click="skip('explain','打印价格')">
        <img src="../assets/demo5.png" />打印价格
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "device",
  data() {
    return {

}
  },
  methods: {
    skip(href,name) {
      this.$router.push({
        name: href,
        params: {
          name: name
        }
      })
    }
  },
}
</script>

Ignore Space Show notes View src/views/explain.vue
<template> <!--说明--> <div class="explain"> <navbar :name="name" /> <div class="box"> <div v-if="name == '使用教程'"> <div class="content"> 使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程 </div> </div> <div v-if="name == '打印价格'" class="flex-center"> <!-- <div class="content">A4纸[文件打印、扫描打印、身份证打印] :单面+黑白: 0.5元/张单面+彩色: 1.0元/张双面+黑白: 0.8元/张双面+彩色: 1.8元/张</div> <div class="content">6寸相纸/热升华相纸 [照片、证件照打印]:证件照: XXX 元/ 张(版)照片: XXX元/张</div> --> <!-- 整个表格内容 --> <table border="1" width="500" height="100%" align="center" cellpadding="10" cellspacing="0" > <!-- 表格中一行的内容 --> <tr class="bg-header"> <!-- 表格中单个单元格内容 --> <td>打印类型&格式</td> <td>单价</td> </tr> <tr v-for="(item, index) in tableData" :key="index"> <td>{{ item.name }}</td> <td>{{ item.amount }}/元</td> </tr> </table> </div> <div v-if="name == '联系客服'"> <div class="content"> 尊敬的会员朋友，您在使用自助打印软件过程中遇到任何问题或困难，欢迎随时拨打国内客服电话 400 -12345678，我们将为您提供耐心解答和及时帮助，谢谢。 </div> </div> </div> </div> </template> <script> import navbar from "@/components/nav"; import { getPrintPrice } from "../api/resultApi"; export default { name: "explain", components: { navbar, }, provide() { return { title: this.name, type: "", }; }, data() { return { name: this.$route.params.name, tableData: [], }; }, methods: { getPrintPrice() { getPrintPrice({ deviceId: this.cite.sbInfo.id }).then((res) => { this.tableData = res.data; }); }, }, created() { this.getPrintPrice(); }, mounted() {}, }; </script> <style scoped lang="less"> .explain { .box { width: 114.06rem; height: 32rem; padding: 6rem 0; background: #ffffff; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0, 0, 0, 0.14); border-radius: 1.63rem; margin: 0 auto; > div { height: 100%; overflow-y: auto; } .content { width: 93.81rem; font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3.1rem; margin: 0 auto; text-align: left; } .bg-header { font-weight: bold; font-size: 1.3rem; background-color: #edeff6; } } } </style> <template> <!--说明--> <div class="explain"> <navbar :name="name" /> <div class="box"> <div v-if="name == '使用教程'"> <div class="content"> 使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程 </div> </div> <div v-if="name == '打印价格'" class="flex-center"> <!-- <div class="content">A4纸[文件打印、扫描打印、身份证打印] :单面+黑白: 0.5元/张单面+彩色: 1.0元/张双面+黑白: 0.8元/张双面+彩色: 1.8元/张</div> <div class="content">6寸相纸/热升华相纸 [照片、证件照打印]:证件照: XXX 元/ 张(版)照片: XXX元/张</div> --> <!-- 整个表格内容 --> <table border="1" width="500" height="100%" align="center" cellpadding="10" cellspacing="0" > <!-- 表格中一行的内容 --> <tr style=" font-weight: bold; font-size: 1.3rem; background-color: #edeff6; " > <!-- 表格中单个单元格内容 --> <td>打印类型&格式</td> <td>单价</td> </tr> <tr v-for="(item, index) in tableData" :key="index"> <td>{{ item.name }}</td> <td>{{ item.amount }}</td> </tr> </table> </div> <div v-if="name == '联系客服'"> <div class="content"> 尊敬的会员朋友，您在使用自助打印软件过程中遇到任何问题或困难，欢迎随时拨打国内客服电话 400 -12345678，我们将为您提供耐心解答和及时帮助，谢谢。 </div> </div> </div> </div> </template> <script> import navbar from "@/components/nav"; import { getPrintPrice } from "../api/resultApi"; export default { name: "explain", components: { navbar, }, provide() { return { title: this.name, type: "", }; }, data() { return { name: this.$route.params.name, tableData: [], }; }, methods: { getPrintPrice() { getPrintPrice({ deviceId: 3 }).then((res) => { // console.log(res); this.tableData = res.data; }); }, }, created() { this.getPrintPrice(); }, mounted() {}, }; </script> <style scoped lang="less"> .explain { .box { width: 114.06rem; height: 32rem; padding: 6rem 0; background: #ffffff; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0, 0, 0, 0.14); border-radius: 1.63rem; margin: 0 auto; > div { height: 100%; overflow-y: auto; } .content { width: 93.81rem; font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3.1rem; margin: 0 auto; text-align: left; } } } </style>

Ignore Space Show notes View

src/views/explain.vue

<template>
  
  <div class="explain">
    <navbar :name="name" />
    <div class="box">
      <div v-if="name == '使用教程'">
        <div class="content">
          使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程
        </div>
      </div>
      <div v-if="name == '打印价格'" class="flex-center">
        
        
        <table
          border="1"
          width="500"
          height="100%"
          align="center"
          cellpadding="10"
          cellspacing="0"
        >
          
          <tr class="bg-header">
            
            <td>打印类型&格式</td>
            <td>单价</td>
          </tr>
          <tr v-for="(item, index) in tableData" :key="index">
            <td>{{ item.name }}</td>
            <td>{{ item.amount }}/元</td>
          </tr>
        </table>
      </div>
      <div v-if="name == '联系客服'">
        <div class="content">
          尊敬的会员朋友，您在使用自助打印软件过程中遇到任何问题或困难，欢迎随时拨打国内客服电话
          400 -12345678，我们将为您提供耐心解答和及时帮助，谢谢。
        </div>
      </div>
    </div>
  </div>
</template>

<template>
  
  <div class="explain">
    <navbar :name="name" />
    <div class="box">
      <div v-if="name == '使用教程'">
        <div class="content">
          使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程
        </div>
      </div>
      <div v-if="name == '打印价格'" class="flex-center">
        
        
        <table
          border="1"
          width="500"
          height="100%"
          align="center"
          cellpadding="10"
          cellspacing="0"
        >
          
          <tr
            style="
              font-weight: bold;
              font-size: 1.3rem;
              background-color: #edeff6;
            "
          >
            
            <td>打印类型&格式</td>
            <td>单价</td>
          </tr>
          <tr v-for="(item, index) in tableData" :key="index">
            <td>{{ item.name }}</td>
            <td>{{ item.amount }}</td>
          </tr>
        </table>
      </div>
      <div v-if="name == '联系客服'">
        <div class="content">
          尊敬的会员朋友，您在使用自助打印软件过程中遇到任何问题或困难，欢迎随时拨打国内客服电话
          400 -12345678，我们将为您提供耐心解答和及时帮助，谢谢。
        </div>
      </div>
    </div>
  </div>
</template>

Show line notes below