Browse Source

feat: device edit create delete api mock

master
wally 4 years ago
parent
commit
d6efe81fde
  1. 1
      .env.test
  2. 1
      package.json
  3. 11
      src/apis/index.js
  4. 4
      src/components/search-bar-data.vue
  5. 31
      src/store/device.js
  6. 4
      src/views/data-history.vue
  7. 46
      src/views/device-create.vue
  8. 87
      src/views/device-edit.vue
  9. 89
      src/views/device-list.vue
  10. 1
      src/views/statistical-history.vue

1
.env.test

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

1
package.json

@ -3,6 +3,7 @@
"version": "0.0.0",
"scripts": {
"dev": "vite --mode development",
"dev-test": "vite --mode test",
"build": "vite build",
"serve": "vite preview",
"cz": "git add . && git cz",

11
src/apis/index.js

@ -10,8 +10,17 @@ export const getToken = userId => http.get(`${users}/userId`, { params: { userId
// 获取设备列表
export const getDevices = () => http.get(`${corrosion}/devices`);
// 添加设备
export const createDevice = data => http.post(`${corrosion}/devices`, data);
// 获取设备列表 完整信息
export const getDevicesAll = () => http.get(`${corrosion}/devices/all`);
export const getDevicesAll = (params = { deviceId: '', page: 1, size: 50 }) => http.get(`${corrosion}/devices/all`, { params });
// 更新设备
export const updateDevice = (deviceId, data) => http.put(`${corrosion}/devices/all/${deviceId}`, data);
// 删除设备
export const deleteDevice = deviceId => http.delete(`${corrosion}/devices/all/${deviceId}`);
// 查历史数据
export const getHistories = params => http.get(`${corrosion}/histories`, { params });

4
src/components/search-bar-data.vue

@ -55,8 +55,8 @@ const onSubmit = () => {
searchDeviceForm.value.validate(() => {
const { deviceId, date } = searchDevice;
if (date) {
const start = dayjs(date[0]).format('X');
const end = dayjs(date[1]).format('X');
const start = dayjs(date[0]).format('x');
const end = dayjs(date[1]).format('x');
const daterange = [start, end];
emit('search', { deviceId, date: daterange });
} else {

31
src/store/device.js

@ -33,7 +33,7 @@ const user = {
/**
* 设置devicesAll的数据
* @param {*} state
* @param {array} devices
* @param {object} devices {page, data}
*/
setDevicesAll(state, devices) {
state.devicesAll = devices;
@ -47,6 +47,31 @@ const user = {
setCurrentDeviceId(state, deviceId) {
state.currentDeviceId = deviceId;
},
/**
* 更新某个设备的信息
* @param {*} param0
* @param {object} newData 设备更新后的信息
*/
updateDevice({ devicesAll }, newData) {
for (let i = 0; i < devicesAll.data.length; i++) {
const item = devicesAll.data[i];
if (item && item.deviceId === newData.deviceId) {
devicesAll.data[i] = newData;
break;
}
}
},
/**
* 删除设备
* @param {*} param0
* @param {string} deviceId 设备id
*/
deleteDevice({ devicesAll }, deviceId) {
if (!devicesAll || !devicesAll.data || !devicesAll.data.length) return;
devicesAll.data = devicesAll.data.filter(item => item.deviceId !== deviceId);
},
},
actions: {
@ -62,9 +87,9 @@ const user = {
},
// 获取设备列表(站点列表) 完整信息
async getDevicesAll({ commit }) {
async getDevicesAll({ commit }, params) {
try {
const data = await getDevicesAll();
const data = await getDevicesAll(params);
commit('setDevicesAll', data || null);
return data;
} catch (error) {

4
src/views/data-history.vue

@ -5,7 +5,7 @@ import SearchBar from 'components/search-bar-data.vue';
import { getHistories } from 'apis/index';
const search = ref({});
const page = ref({ page: 2, size: 10 });
const page = ref({ page: 1, size: 50 });
let timer = null;
const store = useStore();
const token = computed(() => store.getters['user/token']);
@ -112,7 +112,7 @@ const onPrev = e => {
background
:current-page="page.page"
:page-size="page.size"
:default-page-size="10"
:default-page-size="50"
:page-count="page.count"
layout="total, sizes, prev, pager, next, jumper"
:page-sizes="[1, 10, 20, 50, 100]"

46
src/views/device-create.vue

@ -58,12 +58,12 @@
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
<el-form-item label="安装时间" prop="installTime">
<el-input v-model="data.installTime"></el-input>
<el-date-picker style="width: 100%" v-model="data.installTime" type="datetime" placeholder="安装时间"></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
<el-form-item label="正式运行时间" prop="runTime">
<el-input v-model="data.runTime"></el-input>
<el-date-picker style="width: 100%" v-model="data.runTime" type="datetime" placeholder="正式运行时间"></el-date-picker>
</el-form-item>
</el-col>
@ -120,6 +120,9 @@
<script setup>
import { reactive, ref } from 'vue';
import { ElMessageBox } from 'element-plus';
import { useRouter } from 'vue-router';
import { createDevice } from '../apis/index';
const data = reactive({
deviceId: '', // id
@ -142,18 +145,41 @@ const data = reactive({
joint: '', //
remark: '', //
});
const deviceCreate = ref(null); // form
//
const onSubmit = () => {
deviceCreate.value.validate(valid => {
console.log(valid, { ...data });
});
};
const router = useRouter();
//
const onReset = () => {
deviceCreate.value.resetFields();
};
//
const onSubmit = () => {
deviceCreate.value.validate(async () => {
if (data.installTime) {
data.installTime = new Date(data.installTime).getTime();
}
if (data.runTime) {
data.runTime = new Date(data.runTime).getTime();
}
try {
await createDevice({ ...data });
ElMessageBox.confirm('添加成功,是否继续添加', '提示', {
confirmButtonText: '继续添加',
cancelButtonText: '关闭',
type: 'success',
})
.then(() => {
//
onReset();
})
.catch(() => {
// /
router.push({ name: 'devices' });
});
} catch (error) {
throw new Error(error);
}
});
};
</script>

87
src/views/device-edit.vue

@ -1,116 +1,100 @@
<template>
<el-form label-position="top" :model="data" ref="deviceEdit">
<el-row :gutter="20">
<el-col :span="12">
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
<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-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
<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-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
<el-form-item label="地区" prop="area">
<el-input v-model="data.area"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
<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-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
<el-form-item label="联系人" prop="contact">
<el-input v-model="data.contact"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
<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-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
<el-form-item label="经度" prop="lon">
<el-input v-model="data.lon"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
<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-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
<el-form-item label="负责人" prop="head">
<el-input v-model="data.head"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
<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-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
<el-form-item label="安装时间" prop="installTime">
<el-input v-model="data.installTime"></el-input>
<el-date-picker style="width: 100%" v-model="data.installTime" type="datetime" placeholder="安装时间"></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
<el-form-item label="正式运行时间" prop="runTime">
<el-input v-model="data.runTime"></el-input>
<el-date-picker style="width: 100%" v-model="data.runTime" type="datetime" placeholder="正式运行时间"></el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
<el-form-item label="链路地址" prop="linkAddress">
<el-input v-model="data.linkAddress"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
<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-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
<el-form-item label="试样" prop="simple">
<el-input v-model="data.simple"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
<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-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
<el-form-item label="设备朝向" prop="deviceDirection">
<el-input v-model="data.deviceDirection"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
<el-form-item label="与主站后台联调情况" prop="joint">
<el-input v-model="data.joint"></el-input>
</el-form-item>
@ -118,7 +102,7 @@
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
<el-form-item label="备注" prop="remark">
<el-input v-model="data.remark" type="textarea"></el-input>
</el-form-item>
@ -135,8 +119,10 @@
</template>
<script setup>
import { reactive, ref, computed, watch } from 'vue';
import { reactive, ref, computed, watch, defineEmits } from 'vue';
import { useStore } from 'vuex';
import { updateDevice } from 'apis/index';
import { ElMessage } from 'element-plus';
let data = reactive({
deviceId: '', // id
@ -163,19 +149,36 @@ let data = reactive({
const deviceEdit = ref(null); // form
const store = useStore();
const device = computed(() => store.getters['device/current']);
const currentDeviceId = computed(() => store.state.device.currentDeviceId);
const emit = defineEmits(['cancel']);
watch(
() => device,
() => device.value,
newValue => {
data = newValue.value;
data = newValue;
},
{ immediate: true, deep: true },
);
//
const onSubmit = () => {
deviceEdit.value.validate(valid => {
console.log(valid, { ...data });
deviceEdit.value.validate(async () => {
if (data.installTime) {
data.installTime = new Date(data.installTime).getTime();
}
if (data.runTime) {
data.runTime = new Date(data.runTime).getTime();
}
try {
await updateDevice(currentDeviceId.value, data);
ElMessage.success('更新成功');
emit('cancel');
store.commit('device/updateDevice', data);
} catch (error) {
ElMessage.error('更新失败, 请稍后重试');
throw new Error(error);
}
});
};
</script>

89
src/views/device-list.vue

@ -1,5 +1,9 @@
<template>
<SearchBar />
<SearchBar @search="onSearch" />
<div class="my-3">
<el-button type="primary" @click="$router.push({ name: 'device-create' })">添加设备</el-button>
</div>
<template v-if="devicesAll && devicesAll.data">
<el-table :data="devicesAll.data" style="width: 100%" border stripe :style="{ 'max-height': contentHeight + 'px' }">
@ -42,7 +46,7 @@
<el-tooltip class="item" effect="dark" content="数据统计" placement="top">
<i class="el-icon-data-line text-base text-green-600 mx-1" @click="openPage(props.row, 'statistical-history')"></i>
</el-tooltip>
<el-popconfirm title="确定要删除此设备吗?" @confirm="handleDelete">
<el-popconfirm title="确定要删除此设备吗?" @confirm="handleDelete(props.row.deviceId)">
<template #reference>
<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> -->
@ -60,13 +64,14 @@
background
:current-page="devicesAll.page.page"
:page-size="devicesAll.page.size"
:default-page-size="10"
:default-page-size="50"
:page-count="devicesAll.page.count"
:total="devicesAll.page.total"
class="my-3 float-right"
layout="total, sizes, prev, pager, next, jumper"
:page-sizes="[1, 10, 20, 50, 100]"
@size-change="onSizeChange"
@current-change="onCurrentPageChange"
@prev-click="onPrev"
@next-click="onNext"
></el-pagination>
</template>
@ -80,12 +85,25 @@ import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import SearchBar from 'components/search-bar.vue';
import DeviceEdit from 'components/device-edit.vue';
import deepClone from 'lodash/cloneDeep';
import { deleteDevice } from 'apis/index';
import { ElMessage } from 'element-plus';
let timer = null;
const store = useStore();
const router = useRouter();
const token = computed(() => store.getters['user/token']);
const devicesAll = computed(() => store.state.device.devicesAll);
const devicesAll = computed(() => {
const devices = deepClone(store.state.device.devicesAll);
if (devices && devices.data && devices.data.length) {
for (let i = 0; i < devices.data.length; i++) {
devices.data[i].installTime = new Date(+devices.data[i].installTime).toLocaleString();
devices.data[i].runTime = new Date(+devices.data[i].runTime).toLocaleString();
}
}
return devices;
});
const currentDeviceId = computed(() => store.state.device.currentDeviceId);
let contentHeight = 600;
const editting = ref(false);
@ -102,7 +120,7 @@ const getDevicesAllData = () => {
});
}
} catch (error) {
console.log('error: ', error);
throw new Error(error);
}
};
@ -114,29 +132,43 @@ onMounted(() => {
contentHeight = winHeight - 150;
});
/**
* 删除
* @param {number} page 页码
* @param {number} size 每页条数
*/
function onSearch(page, size = 50) {
const deviceId = currentDeviceId.value;
const params = {
deviceId,
page,
size,
};
store.dispatch('device/getDevicesAll', params);
}
//
const onCurrentPageChange = e => {
console.log(e);
const onCurrentPageChange = page => {
onSearch(page, devicesAll.value.page.size || 50);
};
//
const onSizeChange = e => {
console.log(e);
};
//
const onNext = e => {
console.log(e);
};
//
const onPrev = e => {
console.log(e);
const onSizeChange = size => {
onSearch(1, size);
};
//
const handleDelete = () => {
console.log('delete');
/**
* 删除某设备
* @param {string} deviceId 设备id
*/
const handleDelete = async deviceId => {
try {
await deleteDevice(deviceId);
store.commit('device/deleteDevice', deviceId);
} catch (error) {
ElMessage.error('删除失败, 请稍后重试');
throw new Error(error);
}
};
//
@ -145,8 +177,13 @@ const handleEdit = item => {
editting.value = true;
};
const openPage = (item, path) => {
/**
* 打开页面
* @param {object} item 设备对象
* @param {string} pageName 页面name
*/
const openPage = (item, pageName) => {
store.commit('device/setCurrentDeviceId', item.deviceId);
router.push({ name: path });
router.push({ name: pageName });
};
</script>

1
src/views/statistical-history.vue

@ -61,6 +61,7 @@ getDate();
*/
const onSearch = payload => {
search.value = { ...payload };
console.log('search: ', search.value);
getDate();
};
</script>

Loading…
Cancel
Save