增加大屏设计页面，增加新增，查询，编辑跳转功能

.env.development

@@ -5,5 +5,6 @@ ENV = 'development'
 VITE_API_URL = 'http://zhgy.sagoo.cn:8899/api/v1'
 VITE_IMG_URL = 'http://zhgy.sagoo.cn:8899/'
 VITE_ASSESS_URL = 'http://zhgy.sagoo.cn/base-api/assess/v1'
+VITE_SCREEN_URL = 'http://home.yanglizhi.cn:10003'
 # VITE_API_URL = 'http://sgadserver.wdeveloperw.xyz/api/v1'
 # VITE_IMG_URL = 'http://sgadserver.wdeveloperw.xyz/'

.env.production

@@ -7,4 +7,5 @@ VITE_PUBLIC_PATH = /
 # 线上环境接口地址
 VITE_API_URL = 'http://zhgy.sagoo.cn:8899/api/v1'
 VITE_IMG_URL = 'http://zhgy.sagoo.cn:8899/'
-VITE_ASSESS_URL = 'http://zhgy.sagoo.cn/base-api/assess/v1'
+VITE_ASSESS_URL = 'http://zhgy.sagoo.cn/base-api/assess/v1'
+VITE_SCREEN_URL = 'http://home.yanglizhi.cn:10003'

src/api/screen/index.ts

@@ -0,0 +1,7 @@
+import { get, del, post } from '/@/utils/request';
+
+export default {
+  getList: (data: object) => get('/screen/project/list', data),
+  del: (ids: string[]) => del('/screen/project/delProjectById', { ids }),
+  add: (data: any) => post('/screen/project/add', data),
+}

src/utils/uuid.ts

@@ -0,0 +1,8 @@
+
+/**
+ * * 生成一个不重复的ID
+ * @param { Number } randomLength
+ */
+export const getUUID = (randomLength = 10) => {
+  return Number(Math.random().toString().substr(2, randomLength) + Date.now()).toString(36)
+}

src/views/screen/index.vue

@@ -0,0 +1,75 @@
+<template>
+	<div class="page">
+		<el-card shadow="hover">
+			<div class="search">
+				<el-form :inline="true">
+					<el-form-item>
+						<!-- <el-button size="default" type="primary" class="ml10" @click="getList(1)">
+							<el-icon>
+								<ele-Search />
+							</el-icon>
+							查询
+						</el-button> -->
+						<el-button type="success" @click="add()">
+							<el-icon>
+								<ele-FolderAdd />
+							</el-icon>
+							新增大屏
+						</el-button>
+					</el-form-item>
+				</el-form>
+			</div>
+			<el-table :data="tableData" style="width: 100%">
+				<el-table-column type="index" label="序号" width="60" align="center" />
+				<el-table-column prop="id" label="ID" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="projectName" label="项目名称" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="createdAt" label="创建时间" min-width="100" align="center"></el-table-column>
+				<el-table-column prop="updatedAt" label="更新时间" min-width="100" align="center"></el-table-column>
+				<el-table-column label="操作" width="100" align="center">
+					<template #default="scope">
+						<el-button size="small" text type="warning" @click="edit(scope.row)">编辑</el-button>
+						<el-button size="small" text type="danger" @click="onDel(scope.row)">删除</el-button>
+					</template>
+				</el-table-column>
+			</el-table>
+			<pagination v-if="params.total" :total="params.total" v-model:page="params.pageNum" v-model:limit="params.pageSize" @pagination="getList()" />
+		</el-card>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import api from '/@/api/screen';
+import { ElMessageBox, ElMessage } from 'element-plus';
+import { useSearch } from '/@/hooks/useCommon';
+import { getUUID } from '/@/utils/uuid';
+
+const { params, tableData, getList } = useSearch<any[]>(api.getList, 'Data', { name: '', address: '' });
+
+getList();
+
+const add = async () => {
+	await api.add({
+		indexImage: null,
+		projectName: getUUID(),
+		remarks: null,
+	});
+	ElMessage.success('新增成功');
+	getList();
+};
+
+const edit = async (row: any) => {
+	window.open(import.meta.env.VITE_SCREEN_URL + '#/chart/home/' + row.id);
+};
+
+const onDel = (row: any) => {
+	ElMessageBox.confirm(`此操作将删除接口：“${row.projectName}”，是否继续?`, '提示', {
+		confirmButtonText: '确认',
+		cancelButtonText: '取消',
+		type: 'warning',
+	}).then(async () => {
+		await api.del([row.id as string]);
+		ElMessage.success('删除成功');
+		getList();
+	});
+};
+</script>

src/views/system/api/index.vue

@@ -1,58 +1,58 @@
 <template>
-  <div class="page">
-    <el-card shadow="hover">
-      <div class="search">
-        <el-form :inline="true">
-          <el-form-item label="接口名称">
-            <el-input v-model="params.name" placeholder="请输入接口名称" clearablestyle="width: 240px" @keyup.enter.native="getList(1)" />
-          </el-form-item>
-          <el-form-item label="接口地址">
-            <el-input v-model="params.address" placeholder="请输入接口地址" clearablestyle="width: 240px" @keyup.enter.native="getList(1)" />
-          </el-form-item>
-          <el-form-item label="状态" prop="status" style="width: 200px;">
-            <el-select v-model="params.status" placeholder="接口状态" clearablestyle="width: 240px">
-              <el-option label="全部" :value="-1" />
-              <el-option label="启用" :value="1" />
-              <el-option label="禁用" :value="0" />
-            </el-select>
-          </el-form-item>
-          <el-form-item>
-            <el-button size="default" type="primary" class="ml10" @click="getList(1)">
-              <el-icon>
-                <ele-Search />
-              </el-icon>
-              查询
-            </el-button>
-            <el-button type="success" @click="addOrEdit()">
-              <el-icon>
-                <ele-FolderAdd />
-              </el-icon>
-              新增接口
-            </el-button>
-          </el-form-item>
-        </el-form>
-      </div>
-      <el-table :data="tableData" style="width: 100%">
-        <el-table-column type="index" label="序号" width="60" align="center" />
-        <el-table-column prop="name" label="接口名称" show-overflow-tooltip></el-table-column>
-        <el-table-column prop="address" label="接口地址" show-overflow-tooltip></el-table-column>
-        <el-table-column prop="status" label="状态" min-width="100" align="center">
-          <template #default="scope">
-            <el-tag type="success" size="small" v-if="scope.row.status">启用</el-tag>
-            <el-tag type="info" size="small" v-else>禁用</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="100" align="center">
-          <template #default="scope">
-            <el-button size="small" text type="warning" @click="addOrEdit(scope.row)">修改</el-button>
-            <el-button size="small" text type="danger" @click="onDel(scope.row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <pagination v-if="params.total" :total="params.total" v-model:page="params.pageNum" v-model:limit="params.pageSize" @pagination="getList()" />
-    </el-card>
-    <EditForm ref="editFormRef" @getList="getList()"></EditForm>
-  </div>
+	<div class="page">
+		<el-card shadow="hover">
+			<div class="search">
+				<el-form :inline="true">
+					<el-form-item label="接口名称">
+						<el-input v-model="params.name" placeholder="请输入接口名称" clearablestyle="width: 240px" @keyup.enter.native="getList(1)" />
+					</el-form-item>
+					<el-form-item label="接口地址">
+						<el-input v-model="params.address" placeholder="请输入接口地址" clearablestyle="width: 240px" @keyup.enter.native="getList(1)" />
+					</el-form-item>
+					<el-form-item label="状态" prop="status" style="width: 200px">
+						<el-select v-model="params.status" placeholder="接口状态" clearablestyle="width: 240px">
+							<el-option label="全部" :value="-1" />
+							<el-option label="启用" :value="1" />
+							<el-option label="禁用" :value="0" />
+						</el-select>
+					</el-form-item>
+					<el-form-item>
+						<el-button size="default" type="primary" class="ml10" @click="getList(1)">
+							<el-icon>
+								<ele-Search />
+							</el-icon>
+							查询
+						</el-button>
+						<el-button type="success" @click="addOrEdit()">
+							<el-icon>
+								<ele-FolderAdd />
+							</el-icon>
+							新增接口
+						</el-button>
+					</el-form-item>
+				</el-form>
+			</div>
+			<el-table :data="tableData" style="width: 100%">
+				<el-table-column type="index" label="序号" width="60" align="center" />
+				<el-table-column prop="name" label="接口名称" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="address" label="接口地址" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="status" label="状态" min-width="100" align="center">
+					<template #default="scope">
+						<el-tag type="success" size="small" v-if="scope.row.status">启用</el-tag>
+						<el-tag type="info" size="small" v-else>禁用</el-tag>
+					</template>
+				</el-table-column>
+				<el-table-column label="操作" width="100" align="center">
+					<template #default="scope">
+						<el-button size="small" text type="warning" @click="addOrEdit(scope.row)">修改</el-button>
+						<el-button size="small" text type="danger" @click="onDel(scope.row)">删除</el-button>
+					</template>
+				</el-table-column>
+			</el-table>
+			<pagination v-if="params.total" :total="params.total" v-model:page="params.pageNum" v-model:limit="params.pageSize" @pagination="getList()" />
+		</el-card>
+		<EditForm ref="editFormRef" @getList="getList()"></EditForm>
+	</div>
 </template>
 
 <script lang="ts" setup>
@@ -71,7 +71,7 @@ getList();
 
 const addOrEdit = async (row?: ApiRow) => {
 	if (row) {
-		let res = await api.api.detail(row.id as number).then();
+		const res = await api.api.detail(row.id as number);
 		editFormRef.value.open(res);
 		return;
 	} else {