15 changed files with 561 additions and 44 deletions
@ -1,9 +1,4 @@ |
|||
{ |
|||
"cSpell.words": [ |
|||
"browserslist", |
|||
"commitlint", |
|||
"unplugin", |
|||
"windi", |
|||
"windicss" |
|||
] |
|||
"cSpell.words": ["browserslist", "commitlint", "unplugin", "windi", "windicss"], |
|||
"vue3snippets.enable-compile-vue-file-on-did-save-code": true |
|||
} |
|||
|
|||
@ -1,19 +1,13 @@ |
|||
<template> |
|||
<el-dialog v-model="show" title="编辑设备信息" width="80%" :before-close="handleClose"> |
|||
<span>This is a message</span> |
|||
<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 v-model="show" title="编辑设备信息" fullscreen="true" @close="$emit('toggle-mdoal')"> |
|||
<DeviceEdit v-if="show" :edit="true" @cancel="$emit('toggle-mdoal')" /> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { defineProps, defineEmits } from 'vue'; |
|||
import DeviceEdit from 'views/device-edit.vue'; |
|||
|
|||
defineProps({ show: Boolean }); |
|||
|
|||
defineEmits(['toggle-mdoal']); |
|||
</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> |
|||
<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> |
|||
|
|||
@ -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 device from './device'; |
|||
import user from './user'; |
|||
import statistics from './statistics'; |
|||
import user from './user'; |
|||
|
|||
export default createStore({ |
|||
modules: { user, device, statistics }, |
|||
state: {}, |
|||
state: { menu: { show: true, collapse: false } }, |
|||
getters: {}, |
|||
mutations: {}, |
|||
mutations: { |
|||
toggleCollapse(state) { |
|||
console.log('1'); |
|||
state.menu.collapse = !state.menu.collapse; |
|||
}, |
|||
}, |
|||
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