ccsens_tall
/
tall4-pc
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat: 细节调整

master
wally 4 years ago
parent
a32a3fc7f1
commit
2a82f444c1
19 changed files with 175 additions and 147 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      .env.production
  2. 3
      .gitignore
  3. 2
      index.html
  4. 23
      mock/function-config.js
  5. 13
      mock/network-config.js
  6. 3
      package.json
  7. 28
      src/App.vue
  8. 2
      src/components/function-config-applied.vue
  9. 6
      src/components/search-bar-data.vue
  10. 6
      src/components/search-bar.vue
  11. 92
      src/routers/index.js
  12. 7
      src/store/device.js
  13. 1
      src/utils/axios.js
  14. 16
      src/views/data-history.vue
  15. 57
      src/views/device-create.vue
  16. 56
      src/views/device-list.vue
  17. 2
      src/views/month-data.vue
  18. 2
      src/views/statistical-history.vue
  19. 2
      src/views/statistical-realtime.vue

1
.env.production
View File

@ -0,0 +1 @@
VITE_API_URL=https://www.tall.wiki

3
.gitignore
View File

@ -4,4 +4,5 @@ dist
dist-ssr dist-ssr
*.local *.local
.eslintcache .eslintcache
.husky .idea
.vscode

2
index.html
View File

@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title> <title>智能大气腐蚀检测云平台</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

23
mock/function-config.js
View File

@ -1,23 +0,0 @@
module.exports = {
frequency: {
so2: 0, // SO2采样频率
metal: 0, // 金属腐蚀采样频率
th: 0, // 温湿度 采样频率
salt: 0, // 盐雾 采样频率
}, // 采样频率
count: 0, // 采集个数
time: new Date(), // 设置时间
batteryLow: 0, // 电池电压低阈值
batteryHigh: 0, // 电池电压高阈值
sunHigh: 0, // 太阳能电压高阈值
humidityHigh: 0, // 湿度高阈值
temperatureLow: 0, // 温度低阈值
temperatureHigh: 0, // 温度高阈值
securityMode: 0, // 安全模式 0->不加密 1->加密
corrosiveType: '', // 金属腐蚀类型
report: {
type: 0, // 上报周期类型 0->时间点 1->周期
timePoints: [0, 0, 0, 0, 0, 0], // 设置时间点
cycle: 0, // 上报周期分钟数
},
};

13
mock/network-config.js
View File

@ -1,13 +0,0 @@
module.exports = {
ip1: '',
port1: '',
ip2: '',
port2: '',
ip3: '',
port3: '',
ipBackup: '', // 备用ip
portBackup: '', // 备用端口号
account: '', // 账号
password: '', // 密码
apn: '', // apn
};

3
package.json
View File

@ -4,7 +4,8 @@
"scripts": { "scripts": {
"dev-test": "vite --mode development", "dev-test": "vite --mode development",
"dev": "vite --mode test", "dev": "vite --mode test",
"build": "vite build", "build": "vite build --mode test",
"build:prod": "vite build --mode production",
"serve": "vite preview", "serve": "vite preview",
"cz": "git add . && git cz", "cz": "git add . && git cz",
"format": "prettier --write ./src", "format": "prettier --write ./src",

28
src/App.vue
View File

@ -14,13 +14,14 @@ const routeList = ref(routes);
const menu = computed(() => store.state.menu); const menu = computed(() => store.state.menu);
// 验证 获取query中u参数 获取token // 验证 获取query中u参数 获取token
const route = useRoute(); const route = useRoute();
const router = useRouter();
useRouter() useRouter()
.isReady() .isReady()
.then(async () => { .then(async () => {
const u = computed(() => route.query.u); const u = computed(() => route.query.u);
if (!u) { if (!u.value) {
// 获取url中的u参数, 没有提示缺少参数 // 获取url中的u参数, 没有提示缺少参数
ElMessage.error('缺少用户信息参数'); ElMessage.error('缺少用户信息参数');
} else { } else {
@ -32,7 +33,7 @@ useRouter()
const token = computed(() => store.getters['user/token']); const token = computed(() => store.getters['user/token']);
// 获取设备数据 // 获取设备数据
const getDeviceData = async () => { const getDeviceData = async () => {
if (token) { if (token && token.value) {
await store.dispatch('device/getDevices'); await store.dispatch('device/getDevices');
timer && clearTimeout(timer); timer && clearTimeout(timer);
timer = null; timer = null;
@ -44,6 +45,18 @@ const getDeviceData = async () => {
}; };
getDeviceData(); getDeviceData();
/**
* 打开页面
* @param {string} path 页面路径
*/
function openPage(path) {
const { query } = route;
router.push({
path,
query,
});
}
</script> </script>
<template> <template>
@ -54,14 +67,14 @@ getDeviceData();
</el-header> </el-header>
<el-container class="overflow-hidden"> <el-container class="overflow-hidden">
<!-- <el-aside width="180px" v-if="menu.show"> --> <!-- <el-aside width="180px" v-if="menu.show"> -->
<el-aside :width="!menu.collapse ? '180px' : '64px'" v-if="menu.show"> <el-aside v-if="menu.show" :width="!menu.collapse ? '180px' : '64px'">
<el-menu :default-active="0" class="el-menu-vertical-demo" :collapse="menu.collapse"> <el-menu :collapse="menu.collapse" :default-active="0" class="el-menu-vertical-demo">
<el-menu-item <el-menu-item
:index="index"
v-for="(item, index) in routeList" v-for="(item, index) in routeList"
:key="item.name" :key="item.name"
:index="index"
class="flex items-center" class="flex items-center"
@click="$router.push(item.path)" @click="openPage(item.path)"
> >
<i :class="item.meta.icon"></i> <i :class="item.meta.icon"></i>
<template #title>{{ item.meta.title }}</template> <template #title>{{ item.meta.title }}</template>
@ -93,6 +106,7 @@ body,
.el-form--label-top .el-form-item__label { .el-form--label-top .el-form-item__label {
padding-bottom: 0 !important; padding-bottom: 0 !important;
} }
.el-form-item { .el-form-item {
margin-bottom: 10px !important; margin-bottom: 10px !important;
} }

2
src/components/function-config-applied.vue
View File

@ -145,6 +145,6 @@ function formatReportType(reportType) {
*/ */
function formatCorrosiveType(type) { function formatCorrosiveType(type) {
const target = corrosiveTypes.find(item => item.value === type); const target = corrosiveTypes.find(item => item.value === type);
return target.label; return target && target.type ? target.type : '';
} }
</script> </script>

6
src/components/search-bar-data.vue
View File

@ -34,7 +34,7 @@ import dayjs from 'dayjs';
import { exportHistory } from 'apis/index'; import { exportHistory } from 'apis/index';
const emit = defineEmits(['search']); const emit = defineEmits(['search']);
const searchDevice = reactive({ deviceId: '', date: '' }); const searchDevice = reactive({ deviceId: '', date: [new Date(), new Date()] });
const searchDeviceForm = ref(null); // form const searchDeviceForm = ref(null); // form
const store = useStore(); const store = useStore();
const devices = computed(() => store.state.device.devices); const devices = computed(() => store.state.device.devices);
@ -46,8 +46,8 @@ defineProps({ showExport: Boolean });
watch( watch(
() => currentDeviceId.value, () => currentDeviceId.value,
newValue => { newValue => {
if (newValue && searchDevice.deviceId !== newValue) { if (newValue) {
searchDevice.deviceId = newValue; searchDevice.deviceId !== newValue && (searchDevice.deviceId = newValue);
} }
}, },
{ immediate: true }, { immediate: true },

6
src/components/search-bar.vue
View File

@ -2,7 +2,7 @@
<el-form :inline="true" :model="searchDevice" ref="searchDeviceForm"> <el-form :inline="true" :model="searchDevice" ref="searchDeviceForm">
<el-form-item label="选择站点"> <el-form-item label="选择站点">
<el-select v-model="searchDevice.deviceId" placeholder="请选择站点" @change="change"> <el-select v-model="searchDevice.deviceId" placeholder="请选择站点" @change="change">
<!-- <el-option label="全部" value></el-option> --> <el-option label="全部" value v-if="showAll"></el-option>
<el-option :label="item.address" :value="item.deviceId" v-for="item in devices" :key="item.deviceId"></el-option> <el-option :label="item.address" :value="item.deviceId" v-for="item in devices" :key="item.deviceId"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
@ -15,9 +15,10 @@
<script setup> <script setup>
import { reactive, ref, computed, defineEmits, watch } from 'vue'; import { reactive, ref, computed, defineEmits, watch } from 'vue';
import { useStore } from 'vuex'; import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
const emit = defineEmits(['getDate']); const emit = defineEmits(['getDate']);
const router = useRouter();
const searchDevice = reactive({ deviceId: '' }); const searchDevice = reactive({ deviceId: '' });
const searchDeviceForm = ref(null); // form const searchDeviceForm = ref(null); // form
@ -25,6 +26,7 @@ const searchDeviceForm = ref(null); // form
const store = useStore(); const store = useStore();
const devices = computed(() => store.state.device.devices); const devices = computed(() => store.state.device.devices);
const currentDeviceId = computed(() => store.state.device.currentDeviceId); // 正在操作的设备的id const currentDeviceId = computed(() => store.state.device.currentDeviceId); // 正在操作的设备的id
const showAll = computed(() => router.currentRoute.value.name === 'devices'); // 是否显示全部
// 监听currentDeviceId // 监听currentDeviceId
watch( watch(

92
src/routers/index.js
View File

@ -2,71 +2,101 @@ import { createRouter, createWebHistory } from 'vue-router';
// 还有 createWebHashHistory 和 createMemoryHistory // 还有 createWebHashHistory 和 createMemoryHistory
export const routes = [ export const routes = [
{
path: '/corrosion/devices',
name: 'devices',
meta: {
title: '设备管理',
icon: 'el-icon-box',
},
component: () => import('@/views/device-list.vue'),
},
{ {
path: '/corrosion/network-config', path: '/corrosion/network-config',
name: 'network-config', name: 'network-config',
meta: { title: '网络参数配置', icon: 'el-icon-setting' }, meta: {
title: '网络参数配置',
icon: 'el-icon-setting',
},
component: () => import('@/views/network-config.vue'), component: () => import('@/views/network-config.vue'),
}, },
{ {
path: '/corrosion/function-config', path: '/corrosion/function-config',
name: 'function-config', name: 'function-config',
meta: { title: '功能参数配置', icon: 'el-icon-set-up' }, meta: {
title: '功能参数配置',
icon: 'el-icon-set-up',
},
component: () => import('@/views/function-config.vue'), component: () => import('@/views/function-config.vue'),
}, },
{ {
path: '/corrosion/device-create', path: '/corrosion/device-create',
name: 'device-create', name: 'device-create',
meta: { title: '设备添加', icon: 'el-icon-plus' }, meta: {
title: '设备添加',
icon: 'el-icon-plus',
},
component: () => import('@/views/device-create.vue'), component: () => import('@/views/device-create.vue'),
}, },
{
path: '/corrosion/devices',
name: 'devices',
meta: { title: '设备管理', icon: 'el-icon-box' },
component: () => import('@/views/device-list.vue'),
},
{ {
path: '/corrosion/data-history', path: '/corrosion/data-history',
name: 'data-history', name: 'data-history',
meta: { title: '历史数据查看', icon: 'el-icon-document-copy' }, meta: {
title: '历史数据查看',
icon: 'el-icon-document-copy',
},
component: () => import('@/views/data-history.vue'), component: () => import('@/views/data-history.vue'),
}, },
{ {
path: '/corrosion/statistical-history', path: '/corrosion/statistical-history',
name: 'statistical-history', name: 'statistical-history',
meta: { title: '历史数据统计', icon: 'el-icon-data-line' }, meta: {
title: '历史数据统计',
icon: 'el-icon-data-line',
},
component: () => import('@/views/statistical-history.vue'), component: () => import('@/views/statistical-history.vue'),
}, },
{ {
path: '/corrosion/statistical-realtime', path: '/corrosion/statistical-realtime',
name: 'statistical-realtime', name: 'statistical-realtime',
meta: { title: '实时数据统计', icon: 'el-icon-time' }, meta: {
title: '实时数据统计',
icon: 'el-icon-time',
},
component: () => import('@/views/statistical-realtime.vue'), component: () => import('@/views/statistical-realtime.vue'),
}, },
{ // {
path: '/corrosion/months', // path: '/corrosion/months',
name: 'months', // name: 'months',
meta: { title: '月累计数据分析', icon: 'el-icon-data-analysis' }, // meta: { title: '月累计数据分析', icon: 'el-icon-data-analysis' },
component: () => import('@/views/month-data.vue'), // component: () => import('@/views/month-data.vue'),
}, // },
{ // {
path: '/corrosion/communication-log', // path: '/corrosion/communication-log',
name: 'communication-log', // name: 'communication-log',
meta: { title: '通讯日志', icon: 'el-icon-phone-outline' }, // meta: { title: '通讯日志', icon: 'el-icon-phone-outline' },
component: () => import('@/views/communication-log.vue'), // component: () => import('@/views/communication-log.vue'),
}, // },
{ // {
path: '/corrosion/access-log', // path: '/corrosion/access-log',
name: 'access-log', // name: 'access-log',
meta: { title: '访问日志', icon: 'el-icon-message' }, // meta: { title: '访问日志', icon: 'el-icon-message' },
component: () => import('@/views/access-log.vue'), // component: () => import('@/views/access-log.vue'),
}, // },
]; ];
const router = createRouter({ const router = createRouter({
history: createWebHistory(), history: createWebHistory(),
routes, routes: [
{
path: '/',
redirect: '/corrosion/devices',
},
{
path: '/corrosion',
redirect: '/corrosion/devices',
},
].concat(routes),
}); });
export default router; export default router;

7
src/store/device.js
View File

@ -29,7 +29,12 @@ const user = {
* @param {array} devices * @param {array} devices
*/ */
setDevices(state, devices) { setDevices(state, devices) {
state.devices = devices; if (devices && devices.length) {
state.devices = devices;
user.mutations.setCurrentDeviceId(state, devices[0].deviceId);
} else {
state.devices = [];
}
}, },
/** /**

1
src/utils/axios.js
View File

@ -12,7 +12,6 @@ const instance = Axios.create({
// request // request
instance.interceptors.request.use( instance.interceptors.request.use(
config => { config => {
// console.log(`store.getters['user/token']: `, store.getters['user/token']);
const token = store.getters['user/token'] || localStorage.getItem('token'); const token = store.getters['user/token'] || localStorage.getItem('token');
if (token) { if (token) {
config.headers.Authorization = `Bearer ${token}`; config.headers.Authorization = `Bearer ${token}`;

16
src/views/data-history.vue
View File

@ -17,16 +17,20 @@ const data = ref(null);
// 获取设备完整信息列表 // 获取设备完整信息列表
const getData = async () => { const getData = async () => {
try { try {
if (token) { if (token && token.value) {
if (!currentDeviceId.value) { if (!currentDeviceId.value) {
return ElMessage.error('请选择站点'); return ElMessage.error('请选择站点');
} }
const options = { ...search.value }; const options = { ...search.value };
const date = options && options.date ? options.date : []; const date = options && options.date ? options.date : [];
if (!date || date.length !== 2) {
return ElMessage.error('请选择时间 ');
}
const params = { const params = {
deviceId: currentDeviceId.value, deviceId: currentDeviceId.value,
date, date,
page: page.value.page, page: page.value.age,
size: page.value.size, size: page.value.size,
type: 1, type: 1,
}; };
@ -46,7 +50,7 @@ const getData = async () => {
} }
}; };
getData(); // getData();
// 设置表格高度 // 设置表格高度
onMounted(() => { onMounted(() => {
@ -64,7 +68,7 @@ const onSearch = payload => {
/** /**
* 当前 码变化 * 当前 码变化
* 更新page 重新 取数据 * 更新page 重新 取数据
* @param {number} e 当 的页码 * @param {number} e 的页码
*/ */
const onCurrentPageChange = e => { const onCurrentPageChange = e => {
page.value.page = e; page.value.page = e;
@ -95,8 +99,8 @@ const onPrev = e => {
<template v-if="data"> <template v-if="data">
<el-table :data="data" style="width: 100%" border stripe :style="{ 'max-height': contentHeight + 'px' }"> <el-table :data="data" style="width: 100%" border stripe :style="{ 'max-height': contentHeight + 'px' }">
<el-table-column label="设备编号" fixed prop="deviceNo" min-width="140" align="center" /> <el-table-column label="设备编号" fixed prop="deviceNo" min-width="140" align="center" />
<el-table-column label="ICCID" prop="ICCID" min-width="100" align="center" /> <el-table-column label="ICCID" prop="iccid" min-width="100" align="center" />
<el-table-column label="IMEI" prop="IMEI" min-width="80" align="center" /> <el-table-column label="IMEI" prop="imei" min-width="80" align="center" />
<el-table-column label="信号强度" prop="signal" min-width="80" align="center" /> <el-table-column label="信号强度" prop="signal" min-width="80" align="center" />
<el-table-column label="基站编号" prop="stationNo" min-width="80" align="center" /> <el-table-column label="基站编号" prop="stationNo" min-width="80" align="center" />
<el-table-column label="版本号" prop="version" min-width="80" align="center" /> <el-table-column label="版本号" prop="version" min-width="80" align="center" />

57
src/views/device-create.vue
View File

@ -1,100 +1,100 @@
<template> <template>
<el-form label-position="top" :model="data" ref="deviceCreate"> <el-form ref="deviceCreate" :model="data" label-position="top">
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
<el-form-item label="设备ID号" prop="deviceId"> <el-form-item label="设备ID号" prop="deviceId">
<el-input v-model="data.deviceId"></el-input> <el-input v-model="data.deviceId"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
<el-form-item label="设备完整ID" prop="deviceFullId"> <el-form-item label="设备完整ID" prop="deviceFullId">
<el-input v-model="data.deviceFullId"></el-input> <el-input v-model="data.deviceFullId"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
<el-form-item label="地区" prop="area"> <el-form-item label="地区" prop="area">
<el-input v-model="data.area"></el-input> <el-input v-model="data.area"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
<el-form-item label="安装地点名称" prop="address"> <el-form-item label="安装地点名称" prop="address">
<el-input v-model="data.address"></el-input> <el-input v-model="data.address"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
<el-form-item label="联系人" prop="contact"> <el-form-item label="联系人" prop="contact">
<el-input v-model="data.contact"></el-input> <el-input v-model="data.contact"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
<el-form-item label="电话" prop="phone"> <el-form-item label="电话" prop="phone">
<el-input v-model="data.phone"></el-input> <el-input v-model="data.phone"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
<el-form-item label="经度" prop="lon"> <el-form-item label="经度" prop="lon">
<el-input v-model="data.lon"></el-input> <el-input v-model="data.lon"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
<el-form-item label="纬度" prop="lat"> <el-form-item label="纬度" prop="lat">
<el-input v-model="data.lat"></el-input> <el-input v-model="data.lat"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
<el-form-item label="负责人" prop="head"> <el-form-item label="负责人" prop="head">
<el-input v-model="data.head"></el-input> <el-input v-model="data.head"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
<el-form-item label="安装位置" prop="installLocation"> <el-form-item label="安装位置" prop="installLocation">
<el-input v-model="data.installLocation"></el-input> <el-input v-model="data.installLocation"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
<el-form-item label="安装时间" prop="installTime"> <el-form-item label="安装时间" prop="installTime">
<el-date-picker style="width: 100%" v-model="data.installTime" type="datetime" placeholder="安装时间"></el-date-picker> <el-date-picker v-model="data.installTime" placeholder="安装时间" style="width: 100%" type="datetime"></el-date-picker>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
<el-form-item label="正式运行时间" prop="runTime"> <el-form-item label="正式运行时间" prop="runTime">
<el-date-picker style="width: 100%" v-model="data.runTime" type="datetime" placeholder="正式运行时间"></el-date-picker> <el-date-picker v-model="data.runTime" placeholder="正式运行时间" style="width: 100%" type="datetime"></el-date-picker>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
<el-form-item label="链路地址" prop="linkAddress"> <el-form-item label="链路地址" prop="linkAddress">
<el-input v-model="data.linkAddress"></el-input> <el-input v-model="data.linkAddress"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
<el-form-item label="探头编号" prop="probNo"> <el-form-item label="探头编号" prop="probNo">
<el-input v-model="data.probNo"></el-input> <el-input v-model="data.probNo"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
<el-form-item label="试样" prop="simple"> <el-form-item label="试样" prop="simple">
<el-input v-model="data.simple"></el-input> <el-input v-model="data.simple"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
<el-form-item label="sim卡1" prop="sim1"> <el-form-item label="sim卡1" prop="sim1">
<el-input v-model="data.sim1"></el-input> <el-input v-model="data.sim1"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
<el-form-item label="设备朝向" prop="deviceDirection"> <el-form-item label="设备朝向" prop="deviceDirection">
<el-input v-model="data.deviceDirection"></el-input> <el-input v-model="data.deviceDirection"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
<el-form-item label="与主站后台联调情况" prop="joint"> <el-form-item label="与主站后台联调情况" prop="joint">
<el-input v-model="data.joint"></el-input> <el-input v-model="data.joint"></el-input>
</el-form-item> </el-form-item>
@ -102,7 +102,7 @@
</el-row> </el-row>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
<el-form-item label="备注" prop="remark"> <el-form-item label="备注" prop="remark">
<el-input v-model="data.remark" type="textarea"></el-input> <el-input v-model="data.remark" type="textarea"></el-input>
</el-form-item> </el-form-item>
@ -121,8 +121,8 @@
<script setup> <script setup>
import { reactive, ref } from 'vue'; import { reactive, ref } from 'vue';
import { ElMessageBox } from 'element-plus'; import { ElMessageBox } from 'element-plus';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex'; import { useStore } from 'vuex';
import { useRoute, useRouter } from 'vue-router';
import { createDevice } from '../apis/index'; import { createDevice } from '../apis/index';
const data = reactive({ const data = reactive({
@ -147,8 +147,9 @@ const data = reactive({
remark: '', // 备注 remark: '', // 备注
}); });
const deviceCreate = ref(null); // form const deviceCreate = ref(null); // form
const router = useRouter();
const store = useStore(); const store = useStore();
const route = useRoute();
const router = useRouter();
// 重置表单 // 重置表单
const onReset = () => { const onReset = () => {
@ -176,10 +177,12 @@ const onSubmit = () => {
onReset(); onReset();
}) })
.catch(() => { .catch(() => {
// 取消/关闭 跳转到设备管理列表 router.push({
router.push({ name: 'devices' }); path: '/corrosion/devices',
query: route.query,
}); // 取消/关闭 跳转到设备管理列表
}); });
store.dispatch('device/getDevices'); // 更新站点列表 await store.dispatch('device/getDevices'); // 更新站点列表
} catch (error) { } catch (error) {
throw new Error(error); throw new Error(error);
} }

56
src/views/device-list.vue
View File

@ -2,11 +2,11 @@
<SearchBar @search="onSearch" /> <SearchBar @search="onSearch" />
<div class="my-3"> <div class="my-3">
<el-button type="primary" @click="$router.push({ name: 'device-create' })">添加设备</el-button> <el-button type="primary" @click="openPage(null, 'device-create')">添加设备</el-button>
</div> </div>
<template v-if="devicesAll && devicesAll.data"> <template v-if="devicesAll && devicesAll.data">
<el-table :data="devicesAll.data" style="width: 100%" border stripe :style="{ 'max-height': contentHeight + 'px' }"> <el-table :data="devicesAll.data" :style="{ 'max-height': contentHeight + 'px' }" border stripe style="width: 100%">
<el-table-column type="expand"> <el-table-column type="expand">
<template #default="props"> <template #default="props">
<el-row :gutter="20" class="px-6 text-gray-400"> <el-row :gutter="20" class="px-6 text-gray-400">
@ -21,55 +21,55 @@
</el-row> </el-row>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="ID" prop="deviceId" min-min-width="100" align="center" /> <el-table-column align="center" label="ID" min-min-width="100" prop="deviceId" />
<el-table-column label="完整ID" prop="deviceFullId" min-width="150" align="center" /> <el-table-column align="center" label="完整ID" min-width="150" prop="deviceFullId" />
<el-table-column label="地点" prop="address" min-width="150" align="left" header-align="center" /> <el-table-column align="left" header-align="center" label="地点" min-width="150" prop="address" />
<el-table-column label="地区" prop="area" min-width="120" align="left" header-align="center" /> <el-table-column align="left" header-align="center" label="地区" min-width="120" prop="area" />
<el-table-column label="联系人" prop="contact" min-width="100" align="center" /> <el-table-column align="center" label="联系人" min-width="100" prop="contact" />
<el-table-column label="联系电话" prop="phone" min-width="150" align="center" /> <el-table-column align="center" label="联系电话" min-width="150" prop="phone" />
<el-table-column label="安装时间" prop="installTime" min-width="200" align="center" /> <el-table-column align="center" label="安装时间" min-width="200" prop="installTime" />
<el-table-column label="正式运行时间" prop="runTime" min-width="200" align="center" /> <el-table-column align="center" label="正式运行时间" min-width="200" prop="runTime" />
<el-table-column fixed="right" label="操作" min-width="200" align="center"> <el-table-column align="center" fixed="right" label="操作" min-width="200">
<template #default="props"> <template #default="props">
<el-tooltip class="item" effect="dark" content="网络参数配置" placement="top"> <el-tooltip class="item" content="网络参数配置" effect="dark" placement="top">
<i class="el-icon-setting text-base text-yellow-600 mx-1" @click="openPage(props.row, 'network-config')"></i> <i class="el-icon-setting text-base text-yellow-600 mx-1" @click="openPage(props.row, 'network-config')"></i>
</el-tooltip> </el-tooltip>
<el-tooltip class="item" effect="dark" content="功能参数配置" placement="top"> <el-tooltip class="item" content="功能参数配置" effect="dark" placement="top">
<i class="el-icon-set-up text-base text-yellow-600 mx-1" @click="openPage(props.row, 'function-config')"></i> <i class="el-icon-set-up text-base text-yellow-600 mx-1" @click="openPage(props.row, 'function-config')"></i>
</el-tooltip> </el-tooltip>
<el-tooltip class="item" effect="dark" content="实时数据统计" placement="top"> <el-tooltip class="item" content="实时数据统计" effect="dark" placement="top">
<i class="el-icon-stopwatch text-base text-green-600 mx-1" @click="openPage(props.row, 'statistical-realtime')"></i> <i class="el-icon-stopwatch text-base text-green-600 mx-1" @click="openPage(props.row, 'statistical-realtime')"></i>
</el-tooltip> </el-tooltip>
<el-tooltip class="item" effect="dark" content="数据查看及导出" placement="top"> <el-tooltip class="item" content="数据查看及导出" effect="dark" placement="top">
<i class="el-icon-tickets text-base text-green-600 mx-1" @click="openPage(props.row, 'data-history')"></i> <i class="el-icon-tickets text-base text-green-600 mx-1" @click="openPage(props.row, 'data-history')"></i>
</el-tooltip> </el-tooltip>
<el-tooltip class="item" effect="dark" content="数据统计" placement="top"> <el-tooltip class="item" content="数据统计" effect="dark" placement="top">
<i class="el-icon-data-line text-base text-green-600 mx-1" @click="openPage(props.row, 'statistical-history')"></i> <i class="el-icon-data-line text-base text-green-600 mx-1" @click="openPage(props.row, 'statistical-history')"></i>
</el-tooltip> </el-tooltip>
<el-popconfirm title="确定要删除此设备吗?" @confirm="handleDelete(props.row.deviceId)"> <el-popconfirm title="确定要删除此设备吗?" @confirm="handleDelete(props.ro.deviceId)">
<template #reference> <template #reference>
<i class="el-icon-delete text-base text-red-600 mx-1"></i> <i class="el-icon-delete text-base text-red-600 mx-1"></i>
<!-- <el-button type="text" plain size="mini" icon="el-icon-delete"></el-button> --> <!-- <el-button type="text" plain size="mini" icon="el-icon-delete"></el-button> -->
</template> </template>
</el-popconfirm> </el-popconfirm>
<el-tooltip class="item" effect="dark" content="编辑设备信息" placement="top"> <el-tooltip class="item" content="编辑设备信息" effect="dark" placement="top">
<i class="el-icon-edit text-base text-blue-600 mx-1" @click="handleEdit(props.row)"></i> <i class="el-icon-edit text-base text-blue-600 mx-1" @click="handleEdit(rops.row)"></i>
</el-tooltip> </el-tooltip>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-pagination <el-pagination
background
:current-page="devicesAll.page.page" :current-page="devicesAll.page.page"
:page-size="devicesAll.page.size"
:default-page-size="50" :default-page-size="50"
:page-count="devicesAll.page.count" :page-count="devicesAll.page.count"
:page-size="devicesAll.page.size"
:page-sizes="[1, 10, 20, 50, 100]"
:total="devicesAll.page.total" :total="devicesAll.page.total"
background
class="my-3 float-right" class="my-3 float-right"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
:page-sizes="[1, 10, 20, 50, 100]"
@size-change="onSizeChange" @size-change="onSizeChange"
@current-change="onCurrentPageChange" @current-change="onCurrentPageChange"
></el-pagination> ></el-pagination>
@ -82,7 +82,7 @@
<script setup> <script setup>
import { computed, onMounted, ref } from 'vue'; import { computed, onMounted, ref } from 'vue';
import { useStore } from 'vuex'; import { useStore } from 'vuex';
import { useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import SearchBar from 'components/search-bar.vue'; import SearchBar from 'components/search-bar.vue';
import DeviceEdit from 'components/device-edit.vue'; import DeviceEdit from 'components/device-edit.vue';
import { deleteDevice } from 'apis/index'; import { deleteDevice } from 'apis/index';
@ -91,6 +91,7 @@ import { ElMessage } from 'element-plus';
let timer = null; let timer = null;
const store = useStore(); const store = useStore();
const router = useRouter(); const router = useRouter();
const route = useRoute();
const token = computed(() => store.getters['user/token']); const token = computed(() => store.getters['user/token']);
const devicesAll = computed(() => { const devicesAll = computed(() => {
return store.state.device.devicesAll; return store.state.device.devicesAll;
@ -102,7 +103,7 @@ const editting = ref(false);
// 获取设备完整信息列表 // 获取设备完整信息列表
const getDevicesAllData = () => { const getDevicesAllData = () => {
try { try {
if (token) { if (token && token.value) {
store.dispatch('device/getDevicesAll'); store.dispatch('device/getDevicesAll');
timer && clearTimeout(timer); timer && clearTimeout(timer);
timer = null; timer = null;
@ -177,7 +178,10 @@ const handleEdit = item => {
* @param {string} pageName 页面name * @param {string} pageName 页面name
*/ */
const openPage = (item, pageName) => { const openPage = (item, pageName) => {
store.commit('device/setCurrentDeviceId', item.deviceId); item && store.commit('device/setCurrentDeviceId', item.deviceId);
router.push({ name: pageName }); router.push({
path: `/corrosion/${pageName}`,
query: route.query,
});
}; };
</script> </script>

2
src/views/month-data.vue
View File

@ -35,7 +35,7 @@ const currentDeviceId = computed(() => store.state.device.currentDeviceId); //
*/ */
const getDate = async () => { const getDate = async () => {
try { try {
if (token) { if (token && token.value) {
const options = { ...search.value }; const options = { ...search.value };
const date = options && options.date ? options.date : []; const date = options && options.date ? options.date : [];
const params = { const params = {

2
src/views/statistical-history.vue
View File

@ -29,7 +29,7 @@ const search = ref({});
*/ */
const getDate = async () => { const getDate = async () => {
try { try {
if (token) { if (token && token.value) {
const options = { ...search.value }; const options = { ...search.value };
const date = options && options.date ? options.date : []; const date = options && options.date ? options.date : [];
const params = { const params = {

2
src/views/statistical-realtime.vue
View File

@ -29,7 +29,7 @@ const currentDeviceId = computed(() => store.state.device.currentDeviceId); //
*/ */
const getDate = async () => { const getDate = async () => {
try { try {
if (token) { if (token && token.value) {
const start = +dayjs().startOf('day').format('x'); const start = +dayjs().startOf('day').format('x');
const end = +dayjs().format('x'); const end = +dayjs().format('x');
const params = { const params = {

Write Preview
Loading…
Cancel
Save