Jelajahi Sumber

Merge branch 'qhse_ptw' of shuzhihua/pms-iot-vue into master

yanghao 3 hari lalu
induk
melakukan
83fc782f8e
1 mengubah file dengan 88 tambahan dan 51 penghapusan
  1. 88 51
      src/views/pms/device/DeviceFile.vue

+ 88 - 51
src/views/pms/device/DeviceFile.vue

@@ -6,8 +6,7 @@
         :key="index"
         @click="handleBreadcrumbClick(index)"
         :class="{ 'current-crumb': index === breadcrumbs.length - 1 }"
-        class="custom-breadcrumb-item"
-      >
+        class="custom-breadcrumb-item">
         {{ item.name }}
       </el-breadcrumb-item>
     </el-breadcrumb>
@@ -18,75 +17,111 @@
       :model="queryParams"
       ref="queryFormRef"
       :inline="true"
-      label-width="68px"
-    >
-      <el-form-item :label="t('file.name') " prop="filename">
+      label-width="68px">
+      <el-form-item :label="t('file.name')" prop="filename">
         <el-input
           v-model="queryParams.filename"
           :placeholder="t('file.nameHolder')"
           clearable
           @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
+          class="!w-240px" />
       </el-form-item>
-      <el-form-item v-show="false" :label="t('file.fileType') " prop="fileType">
+      <el-form-item v-show="false" :label="t('file.fileType')" prop="fileType">
         <el-select
           v-model="queryParams.fileType"
           :placeholder="t('file.fileTypeHolder')"
           clearable
-          class="!w-200px"
-        >
+          class="!w-200px">
           <el-option
             v-for="dict in getStrDictOptions(DICT_TYPE.PMS_FILE_TYPE)"
             :key="dict.value"
             :label="dict.label"
-            :value="dict.value"
-          />
+            :value="dict.value" />
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" />
-          {{  t('file.search')}}</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" />{{  t('file.reset')}}</el-button>
+        <el-button @click="handleQuery"><Icon icon="ep:search" /> {{ t('file.search') }}</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" />{{ t('file.reset') }}</el-button>
       </el-form-item>
     </el-form>
   </ContentWrap>
   <ContentWrap>
-    <el-table v-loading="formLoading" :data="list" :stripe="true" :show-overflow-tooltip="true" @row-dblclick="inContent" class="custom-table">
-      <el-table-column :label="t('file.name') " align="left" prop="filename" min-width="300">
+    <el-table
+      v-loading="formLoading"
+      :data="list"
+      :stripe="true"
+      :show-overflow-tooltip="true"
+      @row-dblclick="inContent"
+      class="custom-table">
+      <el-table-column :label="t('file.name')" align="left" prop="filename" min-width="300">
         <template #default="scope">
-          <div style="display: flex; align-items: center; gap: 5px;">
-            <Icon v-if="scope.row.fileType==='content'" icon="fa:folder-open"  color="orange"/>
-            <Icon v-else-if="scope.row.fileType==='pic'||scope.row.fileClassify==='jpg'||scope.row.fileClassify==='png'" icon="ep:picture-filled"  color="#2183D1"/>
-            <Icon v-else-if="scope.row.fileType==='file'&&scope.row.fileClassify==='pdf'" icon="fa-solid:file-pdf"  color="#E20012"/>
-            <Icon v-else-if="scope.row.fileType==='file'&&(scope.row.fileClassify==='doc'||scope.row.fileClassify==='docx')" icon="fa:file-word-o"  color="blue"/>
-            <Icon v-else-if="scope.row.fileType==='file'&&(scope.row.fileClassify==='xls'||scope.row.fileClassify==='xlsx')" icon="fa-solid:file-excel"  color="#107C41"/>
-            <Icon v-else-if="scope.row.fileType==='file'&&(scope.row.fileClassify==='txt')" icon="fa:file-text-o" />
-            <Icon v-else-if="scope.row.fileType==='file'&&(scope.row.fileClassify==='ppt'||scope.row.fileClassify==='pptx')" icon="fa-solid:file-powerpoint" color="#C43E1C" />
+          <div style="display: flex; align-items: center; gap: 5px">
+            <Icon v-if="scope.row.fileType === 'content'" icon="fa:folder-open" color="orange" />
+            <Icon
+              v-else-if="
+                scope.row.fileType === 'pic' ||
+                scope.row.fileClassify === 'jpg' ||
+                scope.row.fileClassify === 'png'
+              "
+              icon="ep:picture-filled"
+              color="#2183D1" />
+            <Icon
+              v-else-if="scope.row.fileType === 'file' && scope.row.fileClassify === 'pdf'"
+              icon="fa-solid:file-pdf"
+              color="#E20012" />
+            <Icon
+              v-else-if="
+                scope.row.fileType === 'file' &&
+                (scope.row.fileClassify === 'doc' || scope.row.fileClassify === 'docx')
+              "
+              icon="fa:file-word-o"
+              color="blue" />
+            <Icon
+              v-else-if="
+                scope.row.fileType === 'file' &&
+                (scope.row.fileClassify === 'xls' || scope.row.fileClassify === 'xlsx')
+              "
+              icon="fa-solid:file-excel"
+              color="#107C41" />
+            <Icon
+              v-else-if="scope.row.fileType === 'file' && scope.row.fileClassify === 'txt'"
+              icon="fa:file-text-o" />
+            <Icon
+              v-else-if="
+                scope.row.fileType === 'file' &&
+                (scope.row.fileClassify === 'ppt' || scope.row.fileClassify === 'pptx')
+              "
+              icon="fa-solid:file-powerpoint"
+              color="#C43E1C" />
             <Icon v-else icon="fa-solid:file-alt" />
-            {{scope.row.filename}}
+            {{ scope.row.filename }}
           </div>
         </template>
-
       </el-table-column>
-      <el-table-column :label="t('file.fileType') " align="center" prop="fileType" >
+      <el-table-column :label="t('file.fileType')" align="center" prop="fileType">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.PMS_FILE_TYPE" :value="scope.row.fileType" />
         </template>
       </el-table-column>
-      <el-table-column :label="t('file.fileSize') " align="center" prop="fileSize" />
+      <el-table-column :label="t('file.fileSize')" align="center" prop="fileSize" />
       <!--            <el-table-column :label="t('file.preview') " align="center" prop="filePath" >-->
       <!--              <template #default="scope">-->
       <!--                <el-button v-if="scope.row.fileType!=='content'" link type="primary" @click="openWeb(scope.row.filePath)"> <Icon size="19" icon="ep:view"  /> </el-button>-->
       <!--              </template>-->
       <!--            </el-table-column>-->
-      <el-table-column :label="t('file.dept') " align="center" prop="deptName" />
-      <el-table-column :label="t('file.device') " align="center" prop="deviceCode" min-width="220"/> />
-      <el-table-column :label="t('file.operation') " align="center" width="160">
+      <el-table-column :label="t('file.dept')" align="center" prop="deptName" />
+      <el-table-column :label="t('file.device')" align="center" prop="deviceCode" min-width="220" />
+      />
+      <el-table-column :label="t('file.operation')" align="center" width="160">
         <template #default="scope">
           <div class="flex items-center justify-center">
-            <el-button type="primary" v-if="scope.row.fileType!=='content'" link @click="handleDownload( scope.row.filePath)" v-hasPermi="['rq:iot-info:download']">
-              <Icon icon="ep:download" />{{t('file.dow')}}
+            <el-button
+              type="primary"
+              v-if="scope.row.fileType !== 'content'"
+              link
+              @click="handleDownload(scope.row.filePath)"
+              v-hasPermi="['rq:iot-info:download']">
+              <Icon icon="ep:download" />{{ t('file.dow') }}
             </el-button>
             <!--                  <el-button type="primary" link @click="handleView( scope.row)">-->
             <!--                    <Icon icon="ep:view" />{{t('file.preview')}}-->
@@ -99,17 +134,17 @@
 </template>
 
 <script setup lang="ts">
-import {DICT_TYPE, getStrDictOptions} from "@/utils/dict";
-import {ref} from "vue";
-import {IotDeviceVO} from "@/api/pms/device";
-import {IotInfoApi} from "@/api/pms/iotinfo";
-import {IotTreeApi} from "@/api/system/tree";
+import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
+import { ref } from 'vue'
+import { IotDeviceVO } from '@/api/pms/device'
+import { IotInfoApi } from '@/api/pms/iotinfo'
+import { IotTreeApi } from '@/api/system/tree'
 
 const { t } = useI18n() // 国际化
 const queryFormRef = ref()
 const formLoading = ref(false)
 const list = ref<IotDeviceVO[]>([])
-const props = defineProps<{ deviceId?: number,deviceName?:string , deviceCategoryName?:string }>()
+const props = defineProps<{ deviceId?: number; deviceName?: string; deviceCategoryName?: string }>()
 const topNodeId = ref('')
 
 const queryParams = reactive({
@@ -121,11 +156,11 @@ const queryParams = reactive({
   deviceId: null,
   classId: null,
   deptId: undefined,
-  allName: null,
+  allName: null
 })
 
 const breadcrumbs = ref([
-  { id: null, name: '',type:'root' } // 根节点
+  { id: null, name: '', type: 'root' } // 根节点
 ])
 
 // 面包屑点击事件
@@ -141,7 +176,7 @@ const handleBreadcrumbClick = async (index) => {
 
   // 获取对应节点的数据
   let targetId = targetBreadcrumbs[index].id
-  if (!targetId){
+  if (!targetId) {
     targetId = topNodeId.value
   }
   queryParams.classId = targetId
@@ -167,8 +202,11 @@ const getList = async () => {
 
 const inContent = async (row) => {
   debugger
-  if (row.fileType!='content') {
-    window.open('http://1.94.244.160:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(row.filePath)));
+  if (row.fileType != 'content') {
+    window.open(
+      'http://doc.deepoil.cc:8012/onlinePreview?url=' +
+        encodeURIComponent(Base64.encode(row.filePath))
+    )
     return
   }
   queryParams.filename = ''
@@ -176,14 +214,14 @@ const inContent = async (row) => {
   // 调用共享方法更新面包屑和表格
   await updateBreadcrumbs(row)
   // 可以添加其他表格行点击需要的逻辑
-  queryParams.classId = row.id;
+  queryParams.classId = row.id
   const data = await IotInfoApi.getChildContentFile(queryParams)
   formLoading.value = false
   list.value = data
 }
 const updateBreadcrumbs = async (node) => {
   // 查找当前节点是否已在面包屑中
-  const currentIndex = breadcrumbs.value.findIndex(item => item.id === node.id)
+  const currentIndex = breadcrumbs.value.findIndex((item) => item.id === node.id)
 
   if (currentIndex > -1) {
     // 如果已存在则截断后面的节点
@@ -194,7 +232,7 @@ const updateBreadcrumbs = async (node) => {
   }
 
   // 更新表格数据
-  queryParams.classId = node.id;
+  queryParams.classId = node.id
   const data = await IotInfoApi.getChildContentFile(queryParams)
   list.value = data
 }
@@ -221,7 +259,7 @@ const resetQuery = () => {
   handleQuery()
 }
 
-onMounted(async ()=>{
+onMounted(async () => {
   const deviceid = props.deviceId
   debugger
   const data = await IotTreeApi.getDeviceTree(deviceid)
@@ -229,7 +267,7 @@ onMounted(async ()=>{
   const listdata = await IotInfoApi.getChildContentFile(queryParams)
   list.value = listdata
   breadcrumbs.value[0].name = props.deviceName
-  breadcrumbs.value[0].id = data;
+  breadcrumbs.value[0].id = data
 })
 </script>
 <style scoped lang="scss">
@@ -278,5 +316,4 @@ onMounted(async ()=>{
   color: #0954f6;
   font-size: 12px;
 }
-
 </style>