0017
/
gy-gateway
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🐛 fix(table): 头部breadcumb样式，解决页面动画切换空白，调整南北向页面

This commit is contained in:
fhysy 2024-12-30 16:38:06 +08:00
parent 1426253122
commit a386380fda
6 changed files with 74 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/layout/navBars/topBar/breadcrumb.vue
View File

@ -6,20 +6,20 @@
:size="16"
@click="onThemeConfigChange"
/>
<el-breadcrumb class="layout-navbars-breadcrumb-hide">
<transition-group name="breadcrumb">
<el-breadcrumb-item v-for="(v, k) in state.breadcrumbList" :key="!v.meta.tagsViewName ? v.meta.title : v.meta.tagsViewName">
<span v-if="k === state.breadcrumbList.length - 1" class="layout-navbars-breadcrumb-span">
<SvgIcon :name="v.meta.icon" class="layout-navbars-breadcrumb-iconfont" v-if="themeConfig.isBreadcrumbIcon" />
<div v-if="!v.meta.tagsViewName">{{ v.meta.title }}</div>
<div v-else>{{ v.meta.tagsViewName }}</div>
</span>
<a v-else @click.prevent="onBreadcrumbClick(v)">
<SvgIcon :name="v.meta.icon" class="layout-navbars-breadcrumb-iconfont" v-if="themeConfig.isBreadcrumbIcon" />{{ v.meta.title }}
</a>
</el-breadcrumb-item>
</transition-group>
</el-breadcrumb>
<!-- <el-breadcrumb class="layout-navbars-breadcrumb-hide">-->
<!-- <transition-group name="breadcrumb">-->
<!-- <el-breadcrumb-item v-for="(v, k) in state.breadcrumbList" :key="!v.meta.tagsViewName ? v.meta.title : v.meta.tagsViewName">-->
<!-- <span v-if="k === state.breadcrumbList.length - 1" class="layout-navbars-breadcrumb-span">-->
<!-- <SvgIcon :name="v.meta.icon" class="layout-navbars-breadcrumb-iconfont" v-if="themeConfig.isBreadcrumbIcon" />-->
<!-- <div v-if="!v.meta.tagsViewName">{{ v.meta.title }}</div>-->
<!-- <div v-else>{{ v.meta.tagsViewName }}</div>-->
<!-- </span>-->
<!-- <a v-else @click.prevent="onBreadcrumbClick(v)">-->
<!-- <SvgIcon :name="v.meta.icon" class="layout-navbars-breadcrumb-iconfont" v-if="themeConfig.isBreadcrumbIcon" />{{ v.meta.title }}-->
<!-- </a>-->
<!-- </el-breadcrumb-item>-->
<!-- </transition-group>-->
<!-- </el-breadcrumb>-->
</div>
</template>

4
src/layout/routerView/parent.vue
View File

@ -3,7 +3,9 @@
<router-view v-slot="{ Component }">
<transition :name="setTransitionName" mode="out-in">
<keep-alive :include="getKeepAliveNames">
<component style="padding: 10px" :is="Component" :key="state.refreshRouterViewKey" class="w100" v-show="!isIframePage" />
<div class="w100" :key="state.refreshRouterViewKey">
<component :is="Component" style="padding: 10px" v-show="!isIframePage"></component>
</div>
</keep-alive>
</transition>
</router-view>

2
src/router/route.js
View File

@ -25,7 +25,7 @@ export const dynamicRoutes = [
component: () => import('/@/layout/index.vue'),
redirect: '/southdirection',
meta: {
isKeepAlive: true,
// isKeepAlive: true,
},
children: [
// {

38
src/views/gateway/northboundtask.vue
View File

@ -113,10 +113,10 @@
</div>
</div>
<div class="data-config">
<h2>上报测点 {{ activeDeviceConfig.taskId }}</h2>
<h2>上报测点 {{ activeTask.taskId}}</h2>
<div class="table-box">
<el-table
:data="activeDeviceConfig.dataIdEntire"
:data="activeTask.dataIdEntire"
border
size="small"
height="100%"
@ -132,7 +132,7 @@
</div>
</div>
<el-dialog v-model="collectionModelShow" title="加解密配置" width="500" :before-close="handleClose">
<el-dialog v-model="collectionModelShow" title="加解密配置" width="500">
<el-form ref="collectionRef" :model="collectionForm" label-width="auto" status-icon>
<h3>加密算法配置</h3>
<el-form-item label="启动">
@ -391,15 +391,17 @@ const getDeviceConfig = () => {
}) || [];
// taskList.value = taskDataList;
console.log('格式化后数据', taskList.value);
// debugger
if (!platConfigList.value.length) {
addDeviceConfig();
}
if (platConfigList.value.length) {
if (platConfigList.value.length > ActiveRowIndex.value) {
activeDeviceConfig.value = platConfigList.value[ActiveRowIndex.value];
if (taskList.value.length) {
if (taskList.value.length > ActiveRowIndex.value) {
activeTask.value = taskList.value[ActiveRowIndex.value];
} else {
activeDeviceConfig.value = platConfigList.value[0];
activeTask.value = taskList.value[0];
}
platConfigTableRef.value.toggleRowSelection(activeTask.value, true);
}
} else {
ElMessage.error(response.message);
@ -481,6 +483,13 @@ const editCollection = () => {
collectionModelShow.value = false;
};
const activeTask = ref({
taskId: '',
dataIdEntire: [],
taskType: '',
uploadMode: 'timer 1 || change 0.1'
});
const activeDeviceConfig = ref({
PlatformIp: '',
tasks: ['T1', 'T2', 'T3', 'T4', 'T5'],
@ -530,15 +539,23 @@ const activeDeviceConfig = ref({
},
});
watch(
() => ({ ...activeDeviceConfig.value }),
(newVal) => {
console.log('数据变化', newVal);
platConfigList.value[ActiveRowIndex.value] = newVal;
},
{ deep: true }
);
watch(
() => ({ ...activeTask.value }),
(newVal) => {
taskList.value[ActiveRowIndex.value] = newVal;
},
{ deep: true }
);
// const saveDeviceDataConfig = () => {
// platConfigList.value[ActiveRowIndex.value] = activeDeviceConfig.value;
// }
@ -552,10 +569,11 @@ const tableRowClassName = ({ row, rowIndex }) => {
//选择设备配置
const taskConfigClick = (e) => {
console.log(`current page:`, e);
activeDeviceConfig.value = e;
// activeDeviceConfig.value = e;
activeTask.value = e;
platConfigTableRef.value.toggleRowSelection(e);
ActiveRowIndex.value = platConfigList.value.indexOf(e);
ActiveRowIndex.value = taskList.value.indexOf(e);
// e.isDoubleClicked = !e.isDoubleClicked;
};

43
src/views/gateway/southdirection.vue
View File

@ -26,7 +26,7 @@
height="187"
:style="{ width: tabelBox + 'px', background: '#f2f2f2' }"
empty-text="配置为空"
row-key="index"
row-key="id"
@row-click="deviceConfigClick"
>
<el-table-column type="index" label="序号" align="center" width="60" />
@ -85,33 +85,34 @@
size="small"
height="100%"
:style="{ width: tabelBox + 'px' }"
row-key="index"
empty-text="配置为空"
>
<el-table-column type="index" label="序号" align="center" width="60" fixed />
<el-table-column prop="id" label="数据ID" fixed align="center">
<el-table-column prop="id" label="数据ID" fixed align="center" min-width="120">
<template #default="scope">
<el-input v-model="scope.row.id" placeholder="请输入数据ID" />
</template>
</el-table-column>
<el-table-column prop="dataName" label="数据名" fixed align="center">
<el-table-column prop="dataName" label="数据名" fixed align="center" min-width="120">
<template #default="scope">
<el-input v-model="scope.row.dataName" placeholder="请输入数据名" />
</template>
</el-table-column>
<el-table-column prop="dataAddress" label="数据地址" align="center">
<el-table-column prop="dataAddress" label="数据地址" align="center" min-width="120">
<template #default="scope">
<el-input v-model="scope.row.dataAddress" placeholder="请输入数据地址" />
</template>
</el-table-column>
<el-table-column prop="dataDesc" label="描述" align="center">
<el-table-column prop="dataDesc" label="描述" align="center" min-width="120">
<template #default="scope">
<el-input v-model="scope.row.dataDesc" placeholder="请输入描述" />
</template>
</el-table-column>
<el-table-column prop="dataDisplay" label="数据类型" width="120" align="center">
<el-table-column prop="dataDisplay" label="数据类型" min-width="120" align="center">
<template #default="scope">
<el-select v-model="scope.row.dataDisplay" placeholder="请选择数据类型" @change="changedataDisplay($event, scope.$index)">
<el-option v-for="item in dataTypeArray" :key="item.type" :value="item.type">{{ item.type }}</el-option>
<el-option v-for="(item,index) in dataTypeArray" :key="index" :value="item.type">{{ item.type }}</el-option>
<!-- <el-option value="bool">bool</el-option>-->
<!-- <el-option value="int8">int8</el-option>-->
<!-- <el-option value="uint8">uint8</el-option>-->
@ -144,12 +145,12 @@
</el-select>
</template>
</el-table-column>
<el-table-column prop="datalen" label="长度(字节)" width="120" align="center">
<el-table-column prop="datalen" label="长度(字节)" min-width="80" align="center">
<template #default="scope">
<el-input v-model="scope.row.datalen" type="number" :disabled="!scope.row.datalenShow" placeholder="请输入长度(字节)" />
</template>
</el-table-column>
<el-table-column prop="dataUnit" label="单位" width="70" align="center">
<el-table-column prop="dataUnit" label="单位" min-width="70" align="center">
<template #default="scope">
<el-input v-model="scope.row.dataUnit" placeholder="请输入单位" />
</template>
@ -163,22 +164,22 @@
</el-select>
</template>
</el-table-column>
<el-table-column prop="proportion" label="比例" width="70" align="center">
<el-table-column prop="proportion" label="比例" min-width="80" align="center">
<template #default="scope">
<el-input v-model="scope.row.proportion" placeholder="请输入比例" />
</template>
</el-table-column>
<el-table-column prop="offset" label="偏置" width="60" align="center">
<el-table-column prop="offset" label="偏置" min-width="60" align="center">
<template #default="scope">
<el-input v-model="scope.row.offset" placeholder="请输入偏置" />
</template>
</el-table-column>
<el-table-column prop="northCalcParam.decimal.numBits" label="小数位" width="60" align="center">
<el-table-column prop="northCalcParam.decimal.numBits" label="小数位" min-width="60" align="center">
<template #default="scope">
<el-input v-model="scope.row.northCalcParam.decimal.numBits" placeholder="请输入小数位" />
</template>
</el-table-column>
<el-table-column prop="northCalcParam.decimal.way" label="取整" align="center">
<el-table-column prop="northCalcParam.decimal.way" label="取整" width="120" align="center">
<template #default="scope">
<el-select v-model="scope.row.northCalcParam.decimal.way" placeholder="请选择取整">
<el-option value="rounding" label="四舍五入"></el-option>
@ -205,14 +206,14 @@
<el-switch v-model="scope.row.driveFlag.isConclude_W" />
</template>
</el-table-column>
<el-table-column prop="taskId" label="任务ID" align="center">
<el-table-column prop="taskId" label="任务ID" align="center" min-width="80">
<template #default="scope">
<el-select v-model="scope.row.taskId" placeholder="请选择任务ID" @change="changeTaskId($event, scope.$index)">
<el-option v-for="(item, index) in taskList" :key="index" :value="item.taskId" :label="item.taskId"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column prop="uploadMode" label="上报策略" align="center">
<el-table-column prop="uploadMode" label="上报策略" align="center" min-width="160">
<template #default="scope">
<!-- <el-select v-model="scope.row.uploadMode" placeholder="请选择上报策略">-->
<!-- <el-option :value="item.uploadMode" v-for="(item,index) in taskList" :key="index" :label="item.uploadMode"></el-option>-->
@ -235,7 +236,7 @@
</div>
</div>
<el-dialog v-model="collectionModelShow" title="采集配置" width="500" :before-close="handleClose">
<el-dialog v-model="collectionModelShow" title="采集配置" width="500">
<el-form ref="collectionRef" :model="collectionForm" label-width="auto" status-icon>
<el-form-item label="启动">
<el-switch v-model="collectionForm.collectConf.isRunCmd" />
@ -500,6 +501,16 @@ const getDeviceConfig = () => {
//缓存上下行主题
deviceConfigList.value = response.data.equips || [];
taskList.value = response.data.tasks || [];
if(response.data.tasks && response.data.tasks.length > 0 ){
uploadModeList.value = response.data.tasks.map(item=>{
return {
value: item.uploadMode,
link: item.uploadMode,
};
});
}else{
uploadModeList.value = [];
}
if (deviceConfigList.value.length) {
if (deviceConfigList.value.length > ActiveRowIndex.value) {
activeDeviceConfig.value = deviceConfigList.value[ActiveRowIndex.value];

2
vite.config.js
View File

@ -23,7 +23,7 @@ const viteConfig = defineConfig((mode) => {
root: process.cwd(),
resolve: { alias },
// base: mode.command === 'serve' ? '/gy-gateway' : '/gy-gateway',
base: mode.command === 'serve' ? '/gy-gateway' : '/',
base: mode.command === 'serve' ? '/' : '/',
optimizeDeps: {
exclude: ['vue-demi'],
},