Преглед изворни кода

perf: 数据源管理详情兼容暗黑模式

vera_min пре 1 година
родитељ
комит
43c17b6213
2 измењених фајлова са 144 додато и 140 уклоњено
  1. 5 0
      src/theme/dark.scss
  2. 139 140
      src/views/system/datahub/source/detail.vue

+ 5 - 0
src/theme/dark.scss

@@ -513,4 +513,9 @@
 	.monitor-weather .left .city-weather-data-overview-wrap section.active {
 		background-color: #1d3f4b !important;
 	}
+	.jv-jv-dark.boxed {
+		border-color: var(--el-bg-color-overlay) !important;
+	}
 }
+
+

+ 139 - 140
src/views/system/datahub/source/detail.vue

@@ -1,163 +1,164 @@
 <template>
 	<div class="page page-full">
-		<div class="content">
-			<div class="cont_box">
-				<div class="title">数据源名称:{{ detail.name }}</div>
-				<div class="pro-status"><span :class="developer_status == 1 ? 'on' : 'off'"></span>{{ developer_status == 1 ? '已发布' : '未发布' }}</div>
-				<div class="pro-option" v-auth="'startOrStop'" @click="CkOption">{{ developer_status == 1 ? '停用' : '发布' }}</div>
+		<el-card shadow="nover">
+			<div class="content">
+				<div class="cont_box">
+					<div class="title">数据源名称:{{ detail.name }}</div>
+					<div class="pro-status"><span :class="developer_status == 1 ? 'on' : 'off'"></span>{{ developer_status == 1 ? '已发布' : '未发布' }}</div>
+					<div class="pro-option" v-auth="'startOrStop'" @click="CkOption">{{ developer_status == 1 ? '停用' : '发布' }}</div>
+				</div>
 			</div>
-		</div>
-
-		<div class="content-box page-full page-full-part">
-			<el-tabs v-model="activeName" @tab-click="handleClick">
-				<el-tab-pane label="数据源信息" name="1">
-					<el-form label-width="110px" inline>
-						<el-divider content-position="left">基本信息</el-divider>
-
-						<el-form-item label="数据源标识:">
-							{{ detail.key }}
-						</el-form-item>
-
-						<el-form-item label="数据源名称:">
-							{{ detail.name }}
-						</el-form-item>
-						<el-form-item label="数据源描述:">
-							{{ detail.desc }}
-						</el-form-item>
-						<el-form-item label="数据来源:">
-							<span v-if="detail.from == 1">api导入</span>
-							<span v-if="detail.from == 2">数据库</span>
-							<span v-if="detail.from == 3">文件</span>
-							<span v-if="detail.from == 4">设备</span>
-						</el-form-item>
-
-
-						<div v-if="detail.from == 4">
-							<el-divider content-position="left">数据源配置</el-divider>
-							<el-form-item label="设备key:" prop="deviceKey">
-								{{ detail.deviceConfig.deviceKey }}
-							</el-form-item>
-							<el-form-item label="产品key:" prop="productKey">
-								{{ detail.deviceConfig.productKey }}
-							</el-form-item>
-						</div>
-
-						<div v-if="detail.from == 2">
-							<el-divider content-position="left">数据源配置</el-divider>
-							<el-form-item label="数据来源:" prop="type">
-								{{ detail.dbConfig.type }}
-							</el-form-item>
-
-							<el-form-item label="主机地址:" prop="host">
-								{{ detail.dbConfig.host }}
-							</el-form-item>
-
-							<el-form-item label="端口号:" prop="port">
-								{{ detail.dbConfig.port }}
-							</el-form-item>
-
-							<el-form-item label="用户名:" prop="user">
-								{{ detail.dbConfig.user }}
-							</el-form-item>
-							<el-form-item label="密码:" prop="passwd">
-								{{ detail.dbConfig.passwd }}
-							</el-form-item>
-							<el-form-item label="数据库名称:" prop="dbName">
-								{{ detail.dbConfig.dbName }}
+			<!--  page-full page-full-part -->
+			<div class="content-box">
+				<el-tabs v-model="activeName" @tab-click="handleClick">
+					<el-tab-pane label="数据源信息" name="1">
+						<el-form label-width="110px" inline>
+							<el-divider content-position="left">基本信息</el-divider>
+
+							<el-form-item label="数据源标识:">
+								{{ detail.key }}
 							</el-form-item>
 
-							<el-form-item label="表名称:" prop="tableName">
-								{{ detail.dbConfig.tableName }}
+							<el-form-item label="数据源名称:">
+								{{ detail.name }}
 							</el-form-item>
-							<el-form-item label="主键字段:" prop="pk">
-								{{ detail.dbConfig.pk }}
+							<el-form-item label="数据源描述:">
+								{{ detail.desc }}
 							</el-form-item>
-
-							<el-form-item label="每次获取数量:" prop="num">
-								{{ detail.dbConfig.num }}
+							<el-form-item label="数据来源:">
+								<span v-if="detail.from == 1">api导入</span>
+								<span v-if="detail.from == 2">数据库</span>
+								<span v-if="detail.from == 3">文件</span>
+								<span v-if="detail.from == 4">设备</span>
 							</el-form-item>
 
-							<el-form-item label="任务表达式:" prop="cronExpression">
-								{{ detail.dbConfig.cronExpression }}
-							</el-form-item>
 
-						</div>
-						<div v-if="detail.from == 1">
+							<div v-if="detail.from == 4">
+								<el-divider content-position="left">数据源配置</el-divider>
+								<el-form-item label="设备key:" prop="deviceKey">
+									{{ detail.deviceConfig.deviceKey }}
+								</el-form-item>
+								<el-form-item label="产品key:" prop="productKey">
+									{{ detail.deviceConfig.productKey }}
+								</el-form-item>
+							</div>
 
-							<el-divider content-position="left">规则表达式</el-divider>
+							<div v-if="detail.from == 2">
+								<el-divider content-position="left">数据源配置</el-divider>
+								<el-form-item label="数据来源:" prop="type">
+									{{ detail.dbConfig.type }}
+								</el-form-item>
 
-							<div v-for="(item, index) in rule" :key="index">
-								<el-form-item label="表达式:">
-									{{ item.expression }}
+								<el-form-item label="主机地址:" prop="host">
+									{{ detail.dbConfig.host }}
 								</el-form-item>
 
-								<el-form-item label="参数:"> {{ item.params.name }}~ {{ item.params.value }} </el-form-item>
+								<el-form-item label="端口号:" prop="port">
+									{{ detail.dbConfig.port }}
+								</el-form-item>
 
-								<el-divider content-position="left">数据源配置</el-divider>
+								<el-form-item label="用户名:" prop="user">
+									{{ detail.dbConfig.user }}
+								</el-form-item>
+								<el-form-item label="密码:" prop="passwd">
+									{{ detail.dbConfig.passwd }}
+								</el-form-item>
+								<el-form-item label="数据库名称:" prop="dbName">
+									{{ detail.dbConfig.dbName }}
+								</el-form-item>
 
-								<el-form-item label="请求方法:" prop="method">
-									{{ config.method }}
+								<el-form-item label="表名称:" prop="tableName">
+									{{ detail.dbConfig.tableName }}
 								</el-form-item>
-								<el-form-item label="请求地址:" prop="method">
-									{{ config.url }}
+								<el-form-item label="主键字段:" prop="pk">
+									{{ detail.dbConfig.pk }}
 								</el-form-item>
-								<el-form-item label="更新时间:" prop="method">
-									{{ config.interval }}
-									{{ config.intervalUnit }}
+
+								<el-form-item label="每次获取数量:" prop="num">
+									{{ detail.dbConfig.num }}
 								</el-form-item>
 
-								<el-divider content-position="left">请求参数</el-divider>
-
-								<div class="content-f" v-for="(item, index) in requestParams" :key="index" style="    border: 1px solid #d9d9d9; padding: 10px;margin-bottom: 10px;">
-
-									<div v-for="(aa) in item" :key="aa.type">
-										<el-form-item label="参数类型:">
-											{{ aa.type }}
-										</el-form-item>
-										<el-form-item label="参数标题:">
-											{{ aa.name }}
-										</el-form-item>
-										<el-form-item label="参数名:">
-											{{ aa.key }}
-										</el-form-item>
-										<el-form-item label="参数值:">
-											{{ aa.value }}
-										</el-form-item>
+								<el-form-item label="任务表达式:" prop="cronExpression">
+									{{ detail.dbConfig.cronExpression }}
+								</el-form-item>
+
+							</div>
+							<div v-if="detail.from == 1">
+
+								<el-divider content-position="left">规则表达式</el-divider>
+
+								<div v-for="(item, index) in rule" :key="index">
+									<el-form-item label="表达式:">
+										{{ item.expression }}
+									</el-form-item>
+
+									<el-form-item label="参数:"> {{ item.params.name }}~ {{ item.params.value }} </el-form-item>
+
+									<el-divider content-position="left">数据源配置</el-divider>
+
+									<el-form-item label="请求方法:" prop="method">
+										{{ config.method }}
+									</el-form-item>
+									<el-form-item label="请求地址:" prop="method">
+										{{ config.url }}
+									</el-form-item>
+									<el-form-item label="更新时间:" prop="method">
+										{{ config.interval }}
+										{{ config.intervalUnit }}
+									</el-form-item>
+
+									<el-divider content-position="left">请求参数</el-divider>
+
+									<div class="content-f" v-for="(item, index) in requestParams" :key="index" style="    border: 1px solid #d9d9d9; padding: 10px;margin-bottom: 10px;">
+
+										<div v-for="(aa) in item" :key="aa.type">
+											<el-form-item label="参数类型:">
+												{{ aa.type }}
+											</el-form-item>
+											<el-form-item label="参数标题:">
+												{{ aa.name }}
+											</el-form-item>
+											<el-form-item label="参数名:">
+												{{ aa.key }}
+											</el-form-item>
+											<el-form-item label="参数值:">
+												{{ aa.value }}
+											</el-form-item>
+										</div>
 									</div>
 								</div>
+
 							</div>
+						</el-form>
+					</el-tab-pane>
 
+					<el-tab-pane label="数据节点" name="2">
+						<div class="flex-row flex-end mb-4">
+							<el-button type="primary" size="small" @click="onOpenEdit()" v-if="developer_status == 0" v-auth="'add'">添加</el-button>
 						</div>
-					</el-form>
-				</el-tab-pane>
-
-				<el-tab-pane label="数据节点" name="2">
-					<div class="flex-row flex-end">
-						<el-button type="primary" size="small" @click="onOpenEdit()" v-if="developer_status == 0" v-auth="'add'">添加</el-button>
-					</div>
-					<el-table :data="tableData.data" style="width: 100%" v-loading="tableData.loading">
-						<el-table-column label="ID" align="center" prop="nodeId" width="100" v-col="'id'" />
-						<el-table-column label="数据标识" prop="key" show-overflow-tooltip v-col="'key'" />
-						<el-table-column label="数据名称" prop="name" show-overflow-tooltip v-col="'name'" />
-						<el-table-column label="数据类型" prop="dataType" show-overflow-tooltip v-col="'dataType'" />
-						<el-table-column label="数据取值项" prop="value" show-overflow-tooltip v-col="'value'" />
-						<el-table-column prop="createdAt" label="创建时间" align="center" v-col="'createdAt'" width="180"></el-table-column>
-						<el-table-column label="操作" width="200" align="center" fixed="right">
-							<template #default="scope">
-								<el-button size="small" text type="warning" @click="onOpenEdit1(scope.row)" v-if="developer_status == 0" v-auth="'edit'">修改</el-button>
-								<el-button size="small" text type="danger" @click="onRowDel(scope.row)" v-if="developer_status == 0" v-auth="'del'">删除</el-button>
-							</template>
-						</el-table-column>
-					</el-table>
-					<pagination v-show="tableData.total > 0" :total="tableData.total" v-model:page="tableData.param.pageNum" @pagination="typeList" />
-				</el-tab-pane>
-				<el-tab-pane label="查看数据" name="3">
-					<JsonViewer :value="jsonData" boxed sort theme="jv-dark" @click="onKeyclick" />
-				</el-tab-pane>
-			</el-tabs>
-		</div>
-		<EditDic ref="editDicRef" @typeList="typeList" />
-
+						<el-table :data="tableData.data" style="width: 100%" v-loading="tableData.loading">
+							<el-table-column label="ID" align="center" prop="nodeId" width="100" v-col="'id'" />
+							<el-table-column label="数据标识" prop="key" show-overflow-tooltip v-col="'key'" />
+							<el-table-column label="数据名称" prop="name" show-overflow-tooltip v-col="'name'" />
+							<el-table-column label="数据类型" prop="dataType" show-overflow-tooltip v-col="'dataType'" />
+							<el-table-column label="数据取值项" prop="value" min-width="120" show-overflow-tooltip v-col="'value'" />
+							<el-table-column prop="createdAt" label="创建时间" min-width="160" align="center" v-col="'createdAt'" width="180"></el-table-column>
+							<el-table-column label="操作" width="200" align="center" fixed="right">
+								<template #default="scope">
+									<el-button size="small" text type="warning" @click="onOpenEdit1(scope.row)" v-if="developer_status == 0" v-auth="'edit'">修改</el-button>
+									<el-button size="small" text type="danger" @click="onRowDel(scope.row)" v-if="developer_status == 0" v-auth="'del'">删除</el-button>
+								</template>
+							</el-table-column>
+						</el-table>
+						<pagination v-show="tableData.total > 0" :total="tableData.total" v-model:page="tableData.param.pageNum" @pagination="typeList" />
+					</el-tab-pane>
+					<el-tab-pane label="查看数据" name="3">
+						<JsonViewer :value="jsonData" boxed sort theme="jv-dark" @click="onKeyclick" />
+					</el-tab-pane>
+				</el-tabs>
+			</div>
+			<EditDic ref="editDicRef" @typeList="typeList" />
+		</el-card>
 	</div>
 </template>            
 <script lang="ts">
@@ -338,17 +339,15 @@ export default defineComponent({
 });
 </script>
 <style scoped>
+.jv-jv-dark.boxed {
+	border: 1px solid #eee;
+}
 .content {
-	background: #fff;
 	width: 100%;
-	padding: 20px;
 }
 
 .content-box {
-	background: #fff;
 	width: 100%;
-	padding: 10px 20px 20px;
-	margin-top: 15px;
 }
 
 .cont_box {