采样卡片显示方式调整

src/views/device/components/ModelFormFileTransferOpt104.vue

@@ -0,0 +1,415 @@
+<!-- 文件传输窗口 -->
+<template>
+  <el-dialog
+    :title="comonentVar.modelTitle"
+    :visible.sync="comonentVar.dialogVisible"
+    :destroy-on-close="true"
+    :close-on-click-modal="false"
+    width="65%"
+    top="20px"
+    @close="modelOnClose"
+  >
+    <div class="model-form">
+      <!-- label-width 设置了：label 和 input 就不会换行 -->
+      <el-form ref="modelYaoKongOpt" label-width="30px">
+        <el-tabs v-model="fileGetTabname" type="border-card">
+          <el-tab-pane label="文件读取" name="tab2" style="text-align: center;">
+            <el-row style="text-align: left;margin-bottom: 10px;">
+              <el-col>
+                <span>文件目录：<el-input
+                  v-model="getFileDir"
+                  class=""
+                  clearable
+                  placeholder="请输入文件目录"
+                  type="text"
+                  style="width:380px;margin-right: 2rem;"
+                /></span>
+                <el-button
+                  type="primary"
+                  class="dark-button"
+                  size="big"
+                  icon="el-icon-download"
+                  @click="getDeviceFileList()"
+                >获取目录文件</el-button>
+                <el-button class="light-button" icon="el-icon-refresh" size="big" @click="refreshFileList()">刷新</el-button>
+              </el-col>
+            </el-row>
+            <el-row type="flex" style="float:left;width: 100%;margin-top: 10px;">
+              <el-col>
+                <div class="left-report">
+                  <!-- 表格 -->
+                  <el-table v-loading="isLoading2" :data="dbFileList" :height="tableHeight">
+                    <!-- id隐藏不显示，作为操作数据依据 -->
+                    <el-table-column v-if="false" property="id" label="id" />
+                    <el-table-column property="name" label="文件名" width="260px" />
+                    <el-table-column property="size" label="大小(B)" width="100px" />
+                    <el-table-column property="updateRc" label="状态" width="150px" />
+                    <el-table-column property="percent" label="进度" width="80px" />
+                    <el-table-column property="updateTime" label="最后更新时间" width="160px" />
+                    <el-table-column
+                      label="操作"
+                    >
+                      <template slot-scope="scope">
+                        <el-upload
+                          v-if="scope.row.upload==true"
+                          :action="uploadFileUrl"
+                          :show-file-list="false"
+                          :auto-upload="true"
+                          accept="*"
+                          :disabled="isUploadFileIng"
+                          :headers="uplaodHeader"
+                          :before-upload="(file) => updateActionUrl2(file,scope.row.id)"
+                          :on-success="uploadSuccess"
+                          style="float: left;margin-right: 20px;"
+                        >
+                          <el-button
+                            type="text"
+                            class="light-button"
+                            icon="el-icon-upload2"
+                            :disabled="isUploadFileIng"
+                            size="small"
+                          >上传文件</el-button>
+                        </el-upload>
+                        <a v-if="scope.row.download==true" target="new" :href="`/test/file/${scope.row.id}/bytes`"><el-button class="table-act" type="text" icon="el-icon-download" size="small">下载文件</el-button></a>
+                        <el-button v-if="scope.row.writeable==true" class="table-act" type="text" icon="el-icon-download" size="small" @click="sendFile(scope.row)">写文件</el-button>
+                        <el-button v-if="scope.row.readable==true" class="table-act" type="text" icon="el-icon-download" size="small" @click="readFile(scope.row)">读文件</el-button>
+                        <el-button v-if="scope.row.deletable==true" class="table-act" type="text" icon="el-icon-delete" size="small" @click="deleteFile(scope.row)">删除</el-button>
+                        <!--<el-button v-if="scope.row.pos==null || scope.row.size==null || scope.row.pos==scope.row.size" class="table-act" type="text" icon="el-icon-delete" size="small" @click="deleteFile(scope.row)">删除</el-button>-->
+                      </template>
+                    </el-table-column>
+                  </el-table>
+                </div>
+              </el-col>
+            </el-row>
+          </el-tab-pane>
+        </el-tabs>
+        <el-tabs v-model="fileSendTabname" type="border-card" style="margin-top: 20px;">
+          <el-tab-pane label="新文件下发" name="tab3" style="text-align: center;">
+            <el-row>
+              <el-col>
+                <el-upload
+                  ref="upload"
+                  :action="uploadFileUrl"
+                  :show-file-list="false"
+                  :auto-upload="false"
+                  accept="*"
+                  :disabled="isUploadFileIng"
+                  :on-change="changeUpload"
+                  :headers="uplaodHeader"
+                  :before-upload="updateActionUrl"
+                  :on-success="uploadSuccess"
+                  style="float: left;margin-right: 20px;"
+                >
+                  <el-button
+                    type="primary"
+                    class="light-button"
+                    icon="el-icon-upload2"
+                    :disabled="isUploadFileIng"
+                    size="big"
+                  >选择本地文件</el-button>
+                </el-upload>
+                <el-button
+                  type="primary"
+                  class="dark-button"
+                  size="big"
+                  :disabled="isUploadFileIng || !isSelectedFile"
+                  icon="el-icon-upload2"
+                  style="float: left;"
+                  @click="submitUpload"
+                >上传文件</el-button>
+              </el-col>
+            </el-row>
+
+            <el-row v-show="isSelectedFile" style="margin-top: 20px;">
+              <el-col>
+                <span class="sendFileName">文件名称：{{ selectFileName }}</span><span class="sendFileProcess"><span ref="sendFileProcess2" class="sendFileProcess2" /></span><span class="sendFileProcessNumber">{{ sendFileProcessNumber }}</span>
+              </el-col>
+            </el-row>
+          </el-tab-pane>
+        </el-tabs>
+      </el-form>
+      <div class="buttons" style="margin-top:20px;text-align: right;">
+        <div class="cancel">
+          <el-button class="lightButton" icon="el-icon-circle-close" size="big" @click="cancelForm">取消</el-button>
+        </div>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+import {
+  putData,
+  postData,
+  httpGet,
+  delRecord
+} from '@/api/common-action'
+import { getToken } from '@/utils/auth'
+export default {
+  name: 'ModelFormSample',
+  // model-parames 模态框参数
+  props: {
+    modelParames: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    },
+    sampleData: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      comonentVar: {
+        modelTitle: '加载中...',
+        dialogVisible: true
+      },
+      isLoading: false,
+      isLoading2: false,
+      getFileDir: '/', // 拉取文件的目录名称
+      uploadFileUrl: '', // 文件上传地址
+      fid: '',
+      uploadSize: 0, // 上传文件的大小
+      isUploadFileIng: false, // 文件是否在上传中
+      isSendFileId: 0, // 文件是不是正在下发中
+      isReadFileId: 0, // 文件是不是正在读取中
+      isSelectedFile: false,
+      fileGetTabname: 'tab2',
+      fileSendTabname: 'tab3',
+      selectFileName: '请先选择本地文件',
+      sendFileProcessNumber: '0 %',
+      deviceFileList: [],
+      dbFileList: [],
+      uplaodHeader: { 'Authorization': 'Bearer ' + getToken() },
+      tableHeight: window.innerHeight * 0.5,
+      fileUrl: ''
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'roles'
+    ])
+  },
+  created() {
+  },
+  mounted() {
+    // 初始化
+    this.$nextTick(() => {
+      this.initFunctions()
+    })
+  },
+  methods: {
+    // 初始化
+    async initFunctions() {
+      this.comonentVar.modelTitle = '文件传输'
+      this.fileUrl = window.STATIC_CONFIG.proxyUrl
+      this.getList()
+    },
+    // 关闭model时执行
+    modelOnClose() {
+      this.$emit('toggleModel', 'ModelFormFileTransferOpt104', false)
+    },
+    // 拉取设备文件列表
+    getDeviceFileList() {
+      if (this.isLoading) {
+        return
+      }
+      this.isLoading = true
+      const url = `/equip/file/${this.modelParames.curPlanId}/list`
+      postData(url, 'name=' + this.getFileDir).then(res => {
+        this.isLoading = false
+        // 请求结果
+        if (res == null || res.data == null || res.data === '') {
+          return
+        }
+        this.getList()
+      }).catch(rees => {
+        this.isLoading = false
+      })
+    },
+    getList() {
+      if (this.isLoading2) {
+        return
+      }
+      this.isLoading2 = true
+      httpGet('/test/file/search?runnerId=' + this.modelParames.curPlanId).then(res => {
+        this.isLoading2 = false
+        const resLst = res.content
+        if (resLst != null && resLst.length > 0) {
+          for (let i = 0; i < resLst.length; i++) {
+            resLst[i]['size'] = resLst[i]['size'] || 0
+            if (resLst[i]['size'] === 0) {
+              resLst[i]['pro'] = 0
+              continue
+            }
+            resLst[i]['pro'] = Math.round((resLst[i]['pos'] || 0) * 1 / (resLst[i]['size'] || 0) * 1)
+          }
+        }
+        this.dbFileList = resLst
+      }).catch(res => {
+        this.dbFileList = []
+        this.isLoading2 = false
+      })
+    },
+    refreshFileList() {
+      this.getList()
+    },
+    changeUpload(e) {
+      this.isUploadFileIng = false
+      this.isSelectedFile = true
+      this.selectFileName = e.name
+      this.uploadSize = e.size
+      this.sendFileProcessNumber = '0 %'
+      this.$refs.sendFileProcess2.style.width = 0 * (300 / 100) + 'px'
+    },
+    submitUpload() {
+      // 上传文件
+      this.isUploadFileIng = true
+      // 先创建文件记录
+      putData('/test/file', { 'runnerId': this.modelParames.curPlanId, 'name': this.selectFileName, 'size': this.uploadSize }).then(res => {
+        console.log(res)
+        this.fid = res.id
+        // /test/file/{id}/bytes
+        // this.uploadFileUrl = window.STATIC_CONFIG.proxyUrl + '/test/file/' + fid + '/bytes' // 文件上传地址
+        this.$refs.upload.submit()
+        this.isUploadFileIng = false
+        this.isSelectedFile = false
+      }).catch(res => {
+        this.isUploadFileIng = false
+        this.isSelectedFile = false
+      })
+    },
+    updateActionUrl() {
+      return new Promise((r) => {
+        this.$nextTick(() => {
+          this.uploadFileUrl = '/test/file/' + this.fid + '/bytes' // 文件上传地址
+          r()
+        })
+      })
+    },
+    updateActionUrl2(obj, id) {
+      return new Promise((r) => {
+        this.$nextTick(() => {
+          this.uploadFileUrl = '/test/file/' + id + '/bytes' // 文件上传地址
+          r()
+        })
+      })
+    },
+    uploadSuccess() {
+      this.$message({
+        message: '文件上传成功',
+        type: 'success',
+        offset: window.screen.height / 3
+      })
+      this.getList()
+    },
+    deleteFile(row) {
+      delRecord('/test/file/', row.id).then(res => {
+        this.$message({
+          message: '文件删除成功',
+          type: 'success',
+          offset: window.screen.height / 3
+        })
+        this.getList()
+      }).catch(res => {
+      })
+    },
+    downloadFile(row) {
+      const url = `/test/file/${row.id}/bytes`
+      httpGet(url).then(res => {
+        console.log(res)
+      }).catch(res => {
+      })
+    },
+    readFile(row) {
+      // 从设备上读取文件
+      this.isReadFileId = row.id
+      const url = `/equip/file/${this.modelParames.curPlanId}/get`
+      postData(url, 'fileId=' + row.id).then(res => {
+        this.$message({
+          message: '文件' + row.name + '正在读取中，请等待读取完成',
+          type: 'info',
+          offset: window.screen.height / 3
+        })
+        const that = this
+        setTimeout(() => {
+          that.getList()
+        }, 3000)
+      }).catch(res => {
+        this.isReadFileId = 0
+      })
+    },
+    sendFile(row) {
+      // 下发文件到设备
+      this.isSendFileId = row.id
+      const url = `/equip/file/${this.modelParames.curPlanId}/put`
+      postData(url, 'fileId=' + row.id).then(res => {
+        this.$message({
+          message: '文件' + row.name + '正在下发中，请等待下发完成',
+          type: 'info',
+          offset: window.screen.height / 3
+        })
+        const that = this
+        setTimeout(() => {
+          that.getList()
+        }, 3000)
+      }).catch(res => {
+        this.isSendFileId = 0
+      })
+    },
+    // 表单取消按钮
+    cancelForm() {
+      if (this.isUploadFileIng) {
+        this.$message({
+          message: '文件正在下发中',
+          type: 'info',
+          offset: window.screen.height / 3
+        })
+        return
+      }
+      this.comonentVar.dialogVisible = false
+    }
+  }
+}
+</script>
+<style lang="scss">
+.sendFileName{
+  float: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 310px;
+  white-space: nowrap;
+  cursor: default;
+}
+.sendFileProcess {
+  float: left;
+  width: 300px;
+  margin-top: 3px;
+  background-color: #ccc;
+  position: relative;
+  border-radius: 5px;
+  height: 10px;
+  line-height: 10px;
+  margin-left: 20px;
+  .sendFileProcess2 {
+    position: absolute;
+    left: 0;
+    top: 0;
+    padding: 0;
+    width: 0px;
+    border-radius: 5px;
+    height: 10px;
+    line-height: 10px;
+    background-color: blue;
+  }
+}
+.sendFileProcessNumber{
+  float: left;
+  margin-left: 30px;
+  font-weight: bold;
+}
+</style>

src/views/device/tables/Example.vue

@@ -77,8 +77,8 @@
             </template>
           </el-table-column>
           <el-table-column v-if="false" prop="ruleName" label="测试规则" width="135px" />
+          <el-table-column prop="occur" label="执行时间" width="160px" />
           <el-table-column prop="duration" label="持续时间(ms)" width="135px" />
-          <el-table-column prop="occur" label="执行时间(ms)" width="135px" />
           <!-- 鲜总说不要了 06.测试/20230704/设备检测用例相关改动.png
           <el-table-column prop="not" label="规则取反" width="75px" :formatter="formatBool" />
           <el-table-column prop="value" label="期望值" width="75px" />
@@ -297,6 +297,8 @@ export default {
                 // console.log('uitem.stateName=', uitem.stateName)
                 item.state = uitem.stateName
                 item.stateStyle = uitem.stateStyle
+                item.occur = uitem.occur || '-'
+                item.duration = uitem.duration || '-'
                 item.unit = uitem
               }
             })

src/views/device/tables/Sample_master104.vue

@@ -113,20 +113,23 @@
         <div v-for="(item, index) in carddata" :key="index">
           <div style="float: left;width: 100%;font-weight: bold;">{{ index }}</div>
           <div style="float: left;width: 100%;">
-            <div v-for="(c, index2) in item" v-show="c.isshow" :key="index2" :class="c.range=='COIL_STATUS' || c.range=='HOLDING_REGISTER' ? 'card card_opt':'card'">
-              <div class="card-title">{{ c.occur || '-' }}<span v-if="c.range=='COIL_STATUS' || c.range=='HOLDING_REGISTER'" class="card_opt_btn" @click="commandOpt(c)">操作</span></div>
-              <div style="position: relative;">
-                <template v-if="c.range=='COIL_STATUS' || c.range=='HOLDING_REGISTER'">
-                  <span class="card-label" style="margin-top: 5%;" :title="`类型：${c.rangeName} 点号：${c.offset}`"><li>{{ c.name }}</li></span>
-                  <div class="card-label-linkline" />
-                  <span v-if="c.relationTag == null" class="card-label" style="margin-top: 20%;color: #999;"><li>未关联点号</li></span>
-                  <span v-else class="card-label" style="margin-top: 20%;" :title="`关联点号：${c.relationTag}`"><li>{{ c.relationTag }}</li></span>
-                </template>
-                <template v-else>
-                  <span class="card-label" :title="`类型：${c.rangeName} 点号：${c.offset}`">{{ c.name }}</span>
-                </template>
-                <span v-if="c.range=='COIL_STATUS' || c.range=='INPUT_STATUS'" :class="`value_${c.value}`">{{ c.value }}</span>
-                <span v-else class="value_nubmer">{{ c.value }}</span>
+            <div v-for="(c, index2) in item" v-show="(c.id ==='-1' || c.isshow)" :key="index2" :class="c.id ==='-1' ? 'br_card' : (c.range==='COIL_STATUS' || c.range==='HOLDING_REGISTER' ? 'card card_opt':'card')">
+              <!--换行符：相同类型的测点在同一行-->
+              <div v-if="c.id !=='-1'">
+                <div class="card-title">{{ c.occur || '-' }}<span v-if="c.range=='COIL_STATUS' || c.range=='HOLDING_REGISTER'" class="card_opt_btn" @click="commandOpt(c)">操作</span></div>
+                <div style="position: relative;">
+                  <template v-if="c.relationTag != null && (c.range=='COIL_STATUS' || c.range=='HOLDING_REGISTER')">
+                    <span class="card-label" style="margin-top: 5%;" :title="`类型：${c.rangeName} 点号：${c.offset}`"><li>{{ c.name }}</li></span>
+                    <div class="card-label-linkline" />
+                    <span v-if="c.relationTag == null" class="card-label" style="margin-top: 20%;color: #999;"><li>未关联点号</li></span>
+                    <span v-else class="card-label" style="margin-top: 20%;" :title="`关联点号：${c.relationTag}`"><li>{{ c.relationTag }}</li></span>
+                  </template>
+                  <template v-else>
+                    <span class="card-label" :title="`类型：${c.rangeName} 点号：${c.offset}`">{{ c.name }}</span>
+                  </template>
+                  <span v-if="c.range=='COIL_STATUS' || c.range=='INPUT_STATUS'" :class="`value_${c.value}`">{{ c.value }}</span>
+                  <span v-else class="value_nubmer">{{ c.value }}</span>
+                </div>
               </div>
             </div>
           </div>
@@ -381,7 +384,6 @@ export default {
     },
     query() {
       // 采样值查询
-      console.log(this.querydata)
       for (const item in this.carddata) {
         this.carddata[item].forEach(element => {
           if (this.querydata.point === '' && this.querydata.pointtype.length === 0) {
@@ -436,6 +438,14 @@ export default {
           element['isshow'] = true // 默认为都显示。可通过查询条件更改其值
           if (element.groupingName == null || element.groupingName === '') element.groupingName = '未分组'
           if (groupingNamelist[element.groupingName]) {
+            const aryLen = groupingNamelist[element.groupingName].length
+            if (aryLen > 0) {
+              const prveEle = groupingNamelist[element.groupingName][aryLen - 1]
+              if (prveEle.id === '-1' && prveEle.range !== element.range) {
+              // 换行元素
+                groupingNamelist[element.groupingName].push({ 'id': '-1' })
+              }
+            }
             groupingNamelist[element.groupingName].push(element)
           } else {
             groupingNamelist[element.groupingName] = [element]
@@ -625,6 +635,12 @@ export default {
   margin: 1rem;
   font-size: 0.8rem;
 }
+.br_card{
+  width: 100%;
+  float: left;
+  height: 1px;
+  background-color: #fff;
+}
 .card_opt{
   background-color: #ededed;
 }