Browse Source

feat: 增加项目管理中的省市区选择,增加项目管理详情页的基本页面布局等

yanglzh 1 year ago
parent
commit
ecf85e43e5

+ 1 - 0
package.json

@@ -49,6 +49,7 @@
     "nprogress": "^0.2.0",
     "pako": "^1.0.11",
     "print-js": "^1.6.0",
+    "province-city-china": "^8.5.7",
     "qrcodejs2-fixes": "^0.0.2",
     "screenfull": "^6.0.1",
     "semver": "^7.6.2",

+ 2 - 2
src/api/projects/index.ts

@@ -1,8 +1,8 @@
-import { get, del, post } from '/@/utils/request';
+import { get, del, post, put } from '/@/utils/request';
 
 export default {
   list: (params: object) => get('/projects/list', params),
   del: (ids: number[]) => del('/projects/del', { ids }),
   add: (data: object) => post('/projects/add', data),
-  edit: (data: object) => post('/projects/edit', data),
+  edit: (data: object) => put('/projects/edit', data),
 }

+ 9 - 0
src/views/iot/projects/detail/device.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="tab-content">
+    网关和设备
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+</script>

+ 27 - 0
src/views/iot/projects/detail/index.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="page">
+    <el-card shadow="nover">
+      <el-tabs :model-value="'1'" size="small">
+        <el-tab-pane label="场景概况" name="1">
+          <InfoVue></InfoVue>
+        </el-tab-pane>
+        <el-tab-pane label="组态应用" name="2">
+          <TopoVue></TopoVue>
+        </el-tab-pane>
+        <el-tab-pane label="视频监控" name="3">
+          <VideoVue></VideoVue>
+        </el-tab-pane>
+        <el-tab-pane label="网关和设备" name="4">
+          <DeviceVue></DeviceVue>
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import InfoVue  from './info.vue'
+import TopoVue  from './topo.vue'
+import VideoVue  from './video.vue'
+import DeviceVue  from './device.vue'
+</script>

+ 16 - 0
src/views/iot/projects/detail/info.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="tab-content">
+    <div class="flex-row" style="gap:20px">
+      <el-card shadow="nover" class="flex1">
+        <template #header>场景概况</template>
+      </el-card>
+      <el-card shadow="nover" class="flex1">
+        <template #header>设备列表</template>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+</script>

+ 9 - 0
src/views/iot/projects/detail/topo.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="tab-content">
+    组态应用
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+</script>

+ 9 - 0
src/views/iot/projects/detail/video.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="tab-content">
+    视频监控
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+</script>

+ 4 - 2
src/views/iot/projects/list/edit.vue

@@ -5,7 +5,8 @@
         <el-input v-model.trim="formData.name" placeholder="输入项目名称" />
       </el-form-item>
       <el-form-item label="地区" prop="address">
-        <el-input v-model.trim="formData.address" placeholder="输入地区" />
+        <el-cascader :options="data" :props="{ emitPath: true, value: 'code', label: 'name' }" placeholder="请选择" clearable class="w100" v-model="formData.address">
+        </el-cascader>
       </el-form-item>
       <el-form-item label="详细地址" prop="addressDetail">
         <el-input v-model.trim="formData.addressDetail" placeholder="输入详细地址" />
@@ -37,6 +38,7 @@ import { ref, reactive, nextTick } from 'vue';
 import api from '/@/api/projects';
 import { ruleRequired } from '/@/utils/validator';
 import { ElMessage } from 'element-plus';
+import data from 'province-city-china/dist/level.json'
 
 const emit = defineEmits(['getList']);
 
@@ -90,7 +92,7 @@ const open = async (row: any) => {
   resetForm();
   showDialog.value = true;
   nextTick(() => {
-    Object.assign(formData, { ...row });
+    Object.assign(formData, { ...row, address: JSON.parse(row.address) });
   });
 };
 

+ 3 - 3
src/views/iot/projects/list/index.vue

@@ -35,7 +35,7 @@
               </el-icon>
               新增
             </el-button>
-            <el-button type="danger" v-auth="'xxx'" :disabled="!ids.length" @click="addOrEdit()">
+            <el-button type="danger" v-auth="'xxx'" :disabled="!ids.length" @click="del()">
               <el-icon>
                 <ele-Delete />
               </el-icon>
@@ -56,8 +56,8 @@
         <el-table-column prop="updatedAt" label="更新时间" width="165" align="center"></el-table-column>
         <el-table-column label="操作" width="140" align="center">
           <template #default="scope">
-            <el-button size="small" text type="info" @click="edit(scope.row)">组态设计</el-button>
-            <el-button size="small" text type="info" @click="edit(scope.row)">运行组态</el-button>
+            <!-- <el-button size="small" text type="info" @click="edit(scope.row)">组态设计</el-button>
+            <el-button size="small" text type="info" @click="edit(scope.row)">运行组态</el-button> -->
             <el-button size="small" text style="margin-left: 0;" type="primary" v-if="!scope.row.folderName" @click="view(scope.row)">详情</el-button>
             <el-button size="small" text type="warning" v-auth="'edit'" @click="addOrEdit(scope.row)">编辑</el-button>
             <el-button size="small" text type="danger" v-auth="'del'" @click="del(scope.row)">删除</el-button>

+ 12 - 0
yarn.lock

@@ -551,6 +551,11 @@
   resolved "https://registry.npmmirror.com/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz"
   integrity sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==
 
+"@province-city-china/types@8.5.7":
+  version "8.5.7"
+  resolved "https://registry.npmmirror.com/@province-city-china/types/-/types-8.5.7.tgz#bb12d5aa6a9cbbab8e5e07ed0eb0c5babdd15083"
+  integrity sha512-RZ1TX52jLevxx+00yLMzunHR2H6XIc7FY8C7qF0YUzXhYrRS4krqWSDY8kpq/76nonbp01ibif35wvmP3R+s4Q==
+
 "@types/d3-timer@^2.0.0":
   version "2.0.1"
   resolved "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-2.0.1.tgz"
@@ -2795,6 +2800,13 @@ prismjs@^1.29.0:
   resolved "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12"
   integrity sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==
 
+province-city-china@^8.5.7:
+  version "8.5.7"
+  resolved "https://registry.npmmirror.com/province-city-china/-/province-city-china-8.5.7.tgz#feaa8348aa5d40ed8bf8f50f1b66e2dcbbb56f90"
+  integrity sha512-6snhGKmXBgNDJluFYVNgudIA+FWJjha+6/Lci/ZWBDDp3uPs5zFlErrfeTRfN182owSNDp9oF4/f6/qPoL9+Xw==
+  dependencies:
+    "@province-city-china/types" "8.5.7"
+
 punycode@^2.1.0:
   version "2.1.1"
   resolved "https://registry.npmmirror.com/punycode/-/punycode-2.1.1.tgz"