15 changed files with 561 additions and 44 deletions
@ -1,9 +1,4 @@ |
|||||
{ |
{ |
||||
"cSpell.words": [ |
"cSpell.words": ["browserslist", "commitlint", "unplugin", "windi", "windicss"], |
||||
"browserslist", |
"vue3snippets.enable-compile-vue-file-on-did-save-code": true |
||||
"commitlint", |
|
||||
"unplugin", |
|
||||
"windi", |
|
||||
"windicss" |
|
||||
] |
|
||||
} |
} |
||||
|
|||||
@ -1,19 +1,13 @@ |
|||||
<template> |
<template> |
||||
<el-dialog v-model="show" title="编辑设备信息" width="80%" :before-close="handleClose"> |
<el-dialog v-model="show" title="编辑设备信息" fullscreen="true" @close="$emit('toggle-mdoal')"> |
||||
<span>This is a message</span> |
<DeviceEdit v-if="show" :edit="true" @cancel="$emit('toggle-mdoal')" /> |
||||
<template #footer> |
|
||||
<span class="dialog-footer"> |
|
||||
<el-button @click="$emit('toggle-mdoal')">Cancel</el-button> |
|
||||
<el-button type="primary" @click="$emit('toggle-mdoal')">Confirm</el-button> |
|
||||
</span> |
|
||||
</template> |
|
||||
</el-dialog> |
</el-dialog> |
||||
</template> |
</template> |
||||
|
|
||||
<script setup> |
<script setup> |
||||
import { defineProps, defineEmits } from 'vue'; |
import { defineProps, defineEmits } from 'vue'; |
||||
|
import DeviceEdit from 'views/device-edit.vue'; |
||||
|
|
||||
defineProps({ show: Boolean }); |
defineProps({ show: Boolean }); |
||||
|
|
||||
defineEmits(['toggle-mdoal']); |
defineEmits(['toggle-mdoal']); |
||||
</script> |
</script> |
||||
|
|||||
@ -1,3 +1,23 @@ |
|||||
|
<script setup> |
||||
|
import { computed } from 'vue'; |
||||
|
import { useStore } from 'vuex'; |
||||
|
|
||||
|
const store = useStore(); |
||||
|
const toggleCollapse = () => { |
||||
|
console.log('Toggle Collapse'); |
||||
|
store.commit('toggleCollapse'); |
||||
|
}; |
||||
|
const menu = computed(() => store.state.menu); |
||||
|
</script> |
||||
|
|
||||
<template> |
<template> |
||||
<h1 class="text-lg font-medium py-3 px-6 shadow">{{ $route.meta.title || '智能大气腐蚀检测平台' }}</h1> |
<h1 class="text-lg font-medium py-3 px-6 shadow"> |
||||
|
<i |
||||
|
class="el-icon-guide mr-2" |
||||
|
:class="{ 'text-gray-800': !menu.collapse, 'text-gray-400': menu.collapse }" |
||||
|
@click="toggleCollapse" |
||||
|
v-if="menu.show" |
||||
|
></i> |
||||
|
{{ $route.meta.title || '智能大气腐蚀检测平台' }} |
||||
|
</h1> |
||||
</template> |
</template> |
||||
|
|||||
@ -0,0 +1,59 @@ |
|||||
|
<template> |
||||
|
<el-form :inline="true" :model="searchDevice" ref="searchDeviceForm"> |
||||
|
<el-form-item label="选择站点"> |
||||
|
<el-select v-model="searchDevice.deviceId" placeholder="请选择站点"> |
||||
|
<el-option label="全部" value></el-option> |
||||
|
<el-option :label="item.address" :value="item.deviceId" v-for="item in devices" :key="item.deviceId"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="选择日期"> |
||||
|
<el-date-picker |
||||
|
v-model="searchDevice.date" |
||||
|
type="daterange" |
||||
|
range-separator="-" |
||||
|
start-placeholder="开始日期" |
||||
|
end-placeholder="结束日期" |
||||
|
></el-date-picker> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item> |
||||
|
<el-button type="primary" @click="onSubmit">查询</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { reactive, ref, computed, defineEmits } from 'vue'; |
||||
|
import { useStore } from 'vuex'; |
||||
|
|
||||
|
const emit = defineEmits(['search']); |
||||
|
const searchDevice = reactive({ deviceId: '', date: '' }); |
||||
|
const searchDeviceForm = ref(null); // form |
||||
|
const store = useStore(); |
||||
|
const devices = computed(() => store.state.device.devices); |
||||
|
|
||||
|
/** |
||||
|
* 格式化日期 |
||||
|
* @param {Date} date 选择的日期 |
||||
|
*/ |
||||
|
const formatDate = date => { |
||||
|
const year = date.getFullYear(); |
||||
|
const month = date.getMonth() + 1; |
||||
|
const day = date.getDate(); |
||||
|
return `${year}-${month}-${day}`; |
||||
|
}; |
||||
|
|
||||
|
// 提交 |
||||
|
const onSubmit = () => { |
||||
|
searchDeviceForm.value.validate(() => { |
||||
|
const { deviceId, date } = searchDevice; |
||||
|
if (date) { |
||||
|
const daterange = [formatDate(date[0]), formatDate(date[1])]; |
||||
|
emit('search', { deviceId, date: daterange }); |
||||
|
} else { |
||||
|
emit('search', { deviceId, date }); |
||||
|
} |
||||
|
}); |
||||
|
}; |
||||
|
</script> |
||||
@ -1,12 +1,17 @@ |
|||||
import { createStore } from 'vuex'; |
import { createStore } from 'vuex'; |
||||
import device from './device'; |
import device from './device'; |
||||
import user from './user'; |
|
||||
import statistics from './statistics'; |
import statistics from './statistics'; |
||||
|
import user from './user'; |
||||
|
|
||||
export default createStore({ |
export default createStore({ |
||||
modules: { user, device, statistics }, |
modules: { user, device, statistics }, |
||||
state: {}, |
state: { menu: { show: true, collapse: false } }, |
||||
getters: {}, |
getters: {}, |
||||
mutations: {}, |
mutations: { |
||||
|
toggleCollapse(state) { |
||||
|
console.log('1'); |
||||
|
state.menu.collapse = !state.menu.collapse; |
||||
|
}, |
||||
|
}, |
||||
actions: {}, |
actions: {}, |
||||
}); |
}); |
||||
|
|||||
@ -0,0 +1,122 @@ |
|||||
|
<script setup> |
||||
|
import { computed, onMounted, ref } from 'vue'; |
||||
|
import { useStore } from 'vuex'; |
||||
|
import SearchBar from 'components/search-bar-data.vue'; |
||||
|
import { getHistories } from 'apis/index'; |
||||
|
|
||||
|
const search = ref({}); |
||||
|
const page = ref({ page: 2, size: 10 }); |
||||
|
let timer = null; |
||||
|
const store = useStore(); |
||||
|
const token = computed(() => store.getters['user/token']); |
||||
|
let contentHeight = 600; |
||||
|
const data = ref(null); |
||||
|
|
||||
|
// 获取设备完整信息列表 |
||||
|
const getData = async () => { |
||||
|
try { |
||||
|
if (token) { |
||||
|
const params = { search: { ...search.value }, page: { page: page.value.page, size: page.value.size } }; |
||||
|
console.log('params: ', params); |
||||
|
const resData = await getHistories(params); |
||||
|
data.value = resData.data; |
||||
|
page.value = resData.page; |
||||
|
timer && clearTimeout(timer); |
||||
|
timer = null; |
||||
|
} else { |
||||
|
timer = setTimeout(() => { |
||||
|
getData(); |
||||
|
}, 20); |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.log('error: ', error); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
getData(); |
||||
|
|
||||
|
// 设置表格高度 |
||||
|
onMounted(() => { |
||||
|
const winHeight = document.documentElement.clientHeight; |
||||
|
contentHeight = winHeight - 150; |
||||
|
}); |
||||
|
|
||||
|
/** |
||||
|
* 监听search信息 |
||||
|
* @param {object} payload search组件emit的数据 |
||||
|
*/ |
||||
|
const onSearch = payload => { |
||||
|
search.value = { ...payload }; |
||||
|
getData(); |
||||
|
}; |
||||
|
|
||||
|
/** |
||||
|
* 当前页码变化 |
||||
|
* 更新page 重新获取数据 |
||||
|
* @param {number} e 当前的页码 |
||||
|
*/ |
||||
|
const onCurrentPageChange = e => { |
||||
|
page.value.page = e; |
||||
|
getData(); |
||||
|
}; |
||||
|
|
||||
|
const onSizeChange = e => { |
||||
|
page.value.size = e; |
||||
|
getData(); |
||||
|
}; |
||||
|
|
||||
|
// 下一页 |
||||
|
const onNext = e => { |
||||
|
page.value.page = e + 1; |
||||
|
getData(); |
||||
|
}; |
||||
|
|
||||
|
// 上一页 |
||||
|
const onPrev = e => { |
||||
|
page.value.page = e - 1; |
||||
|
getData(); |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<SearchBar @search="onSearch" /> |
||||
|
|
||||
|
<template v-if="data"> |
||||
|
<el-table :data="data" style="width: 100%" border stripe :style="{ 'max-height': contentHeight + 'px' }"> |
||||
|
<el-table-column label="设备编号" fixed prop="deviceNo" width="140" /> |
||||
|
<el-table-column label="ICCID" fixed prop="ICCID" width="100" /> |
||||
|
<el-table-column label="IMEI" fixed prop="IMEI" width="80" /> |
||||
|
<el-table-column label="信号强度" prop="signal" width="80" /> |
||||
|
<el-table-column label="基站编号" prop="stationNo" width="80" /> |
||||
|
<el-table-column label="版本号" prop="version" width="80" /> |
||||
|
<el-table-column label="太阳能电压" prop="solarVoltage" width="94" /> |
||||
|
<el-table-column label="蓄电池电压" prop="batteryVoltage" width="94" /> |
||||
|
<el-table-column label="机箱温度" prop="deviceTemperature" width="80" /> |
||||
|
<el-table-column label="机箱湿度" prop="deviceHumidity" width="80" /> |
||||
|
<el-table-column label="环境温度" prop="environmentTemperature" width="80" /> |
||||
|
<el-table-column label="环境湿度" prop="environmentHumidity" width="80" /> |
||||
|
<el-table-column label="SO2" prop="so2" width="50" /> |
||||
|
<el-table-column label="盐分" prop="salt" width="50" /> |
||||
|
<el-table-column label="腐流1" prop="corrosion1" width="60" /> |
||||
|
<el-table-column label="腐流2" prop="corrosion2" width="60" /> |
||||
|
<el-table-column label="腐流3" prop="corrosion3" width="60" /> |
||||
|
<el-table-column label="腐流4" prop="corrosion4" width="60" /> |
||||
|
</el-table> |
||||
|
|
||||
|
<el-pagination |
||||
|
background |
||||
|
:current-page="page.page" |
||||
|
:page-size="page.size" |
||||
|
:default-page-size="10" |
||||
|
:page-count="page.count" |
||||
|
layout="total, sizes, prev, pager, next, jumper" |
||||
|
:page-sizes="[1, 10, 20, 50, 100]" |
||||
|
class="my-3 float-right" |
||||
|
:total="page.total" |
||||
|
@current-change="onCurrentPageChange" |
||||
|
@size-change="onSizeChange" |
||||
|
@prev-click="onPrev" |
||||
|
@next-click="onNext" |
||||
|
></el-pagination> |
||||
|
</template> |
||||
|
</template> |
||||
@ -0,0 +1,181 @@ |
|||||
|
<template> |
||||
|
<el-form label-position="top" :model="data" ref="deviceEdit"> |
||||
|
<el-row :gutter="20"> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="设备ID号" prop="deviceId"> |
||||
|
<el-input v-model="data.deviceId" disabled></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="设备完整ID" prop="deviceFullId"> |
||||
|
<el-input v-model="data.deviceFullId"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
|
||||
|
<el-row :gutter="20"> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="地区" prop="area"> |
||||
|
<el-input v-model="data.area"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="安装地点名称" prop="address"> |
||||
|
<el-input v-model="data.address"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
|
||||
|
<el-row :gutter="20"> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="联系人" prop="contact"> |
||||
|
<el-input v-model="data.contact"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="电话" prop="phone"> |
||||
|
<el-input v-model="data.phone"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
|
||||
|
<el-row :gutter="20"> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="经度" prop="lon"> |
||||
|
<el-input v-model="data.lon"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="纬度" prop="lat"> |
||||
|
<el-input v-model="data.lat"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
|
||||
|
<el-row :gutter="20"> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="负责人" prop="head"> |
||||
|
<el-input v-model="data.head"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="安装位置" prop="installLocation"> |
||||
|
<el-input v-model="data.installLocation"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
|
||||
|
<el-row :gutter="20"> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="安装时间" prop="installTime"> |
||||
|
<el-input v-model="data.installTime"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="正式运行时间" prop="runTime"> |
||||
|
<el-input v-model="data.runTime"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
|
||||
|
<el-row :gutter="20"> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="链路地址" prop="linkAddress"> |
||||
|
<el-input v-model="data.linkAddress"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="探头编号" prop="probNo"> |
||||
|
<el-input v-model="data.probNo"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
|
||||
|
<el-row :gutter="20"> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="试样" prop="simple"> |
||||
|
<el-input v-model="data.simple"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="sim卡1" prop="sim1"> |
||||
|
<el-input v-model="data.sim1"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
|
||||
|
<el-row :gutter="20"> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="设备朝向" prop="deviceDirection"> |
||||
|
<el-input v-model="data.deviceDirection"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="与主站后台联调情况" prop="joint"> |
||||
|
<el-input v-model="data.joint"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
|
||||
|
<el-row :gutter="20"> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="备注" prop="remark"> |
||||
|
<el-input v-model="data.remark" type="textarea"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
|
||||
|
<el-row :gutter="20" class="mt-5 pl-2"> |
||||
|
<el-form-item> |
||||
|
<el-button type="primary" @click="onSubmit">提交</el-button> |
||||
|
<el-button @click="$emit('cancel')">取消</el-button> |
||||
|
</el-form-item> |
||||
|
</el-row> |
||||
|
</el-form> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { reactive, ref, computed, watch } from 'vue'; |
||||
|
import { useStore } from 'vuex'; |
||||
|
|
||||
|
let data = reactive({ |
||||
|
deviceId: '', // 设备id |
||||
|
deviceFullId: '', // 设备完整id |
||||
|
deviceDirection: '', // 设备朝向 |
||||
|
area: '', // 地区 |
||||
|
address: '', // 安装地点名称 |
||||
|
contact: '', // 联系人 |
||||
|
phone: '', // 联系人电话 |
||||
|
lon: '', // 经度 |
||||
|
lat: '', // 纬度 |
||||
|
head: '', // 负责人 |
||||
|
installLocation: '', // 安装位置 |
||||
|
installTime: '', // 安装时间 |
||||
|
runTime: '', // 正式运行时间 |
||||
|
linkAddress: '', // 链路地址 |
||||
|
probNo: '', // 探头编号 |
||||
|
simple: '', // 试样 |
||||
|
sim1: '', // sim卡1 |
||||
|
joint: '', // 主站后台联调情况 |
||||
|
remark: '', // 备注 |
||||
|
}); |
||||
|
|
||||
|
const deviceEdit = ref(null); // form |
||||
|
const store = useStore(); |
||||
|
const device = computed(() => store.getters['device/current']); |
||||
|
|
||||
|
watch( |
||||
|
() => device, |
||||
|
newValue => { |
||||
|
data = newValue.value; |
||||
|
}, |
||||
|
{ immediate: true, deep: true }, |
||||
|
); |
||||
|
|
||||
|
// 提交表单 |
||||
|
const onSubmit = () => { |
||||
|
deviceEdit.value.validate(valid => { |
||||
|
console.log(valid, { ...data }); |
||||
|
}); |
||||
|
}; |
||||
|
</script> |
||||
Loading…
Reference in new issue