9 changed files with 238 additions and 44 deletions
@ -1,4 +0,0 @@ |
|||
### 查询设备列表 |
|||
GET https://test.tall.wiki/gateway/corrosion/devices/all?deviceId=&size=50 |
|||
Accept: application/json |
|||
|
|||
@ -0,0 +1,61 @@ |
|||
<template> |
|||
<div id="device-overview-container" style="height: 228px"></div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { onMounted } from 'vue'; |
|||
import { Pie } from '@antv/g2plot'; |
|||
|
|||
const data = [ |
|||
{ type: '在线', value: 27 }, |
|||
{ type: '故障', value: 25 }, |
|||
{ type: '离线', value: 18 }, |
|||
{ type: '报警', value: 15 }, |
|||
]; |
|||
let piePlot = null; |
|||
|
|||
function render() { |
|||
piePlot = new Pie('device-overview-container', { |
|||
legend: false, |
|||
appendPadding: 10, |
|||
data, |
|||
angleField: 'value', |
|||
colorField: 'type', |
|||
radius: 1, |
|||
innerRadius: 0.64, |
|||
label: { |
|||
type: 'inner', |
|||
offset: '-50%', |
|||
autoRotate: false, |
|||
style: { textAlign: 'center' }, |
|||
}, |
|||
statistic: { |
|||
title: { offsetY: -12, content: '设备总数' }, |
|||
content: { offsetY: 0 }, |
|||
}, |
|||
// 添加 中心统计文本 交互 |
|||
interactions: [ |
|||
{ type: 'element-selected' }, |
|||
{ type: 'element-active' }, |
|||
{ |
|||
type: 'pie-statistic-active', |
|||
cfg: { |
|||
start: [ |
|||
{ trigger: 'element:mouseenter', action: 'pie-statistic:change' }, |
|||
{ trigger: 'legend-item:mouseenter', action: 'pie-statistic:change' }, |
|||
], |
|||
end: [ |
|||
{ trigger: 'element:mouseleave', action: 'pie-statistic:reset' }, |
|||
{ trigger: 'legend-item:mouseleave', action: 'pie-statistic:reset' }, |
|||
], |
|||
}, |
|||
}, |
|||
], |
|||
}); |
|||
piePlot.render(); |
|||
} |
|||
|
|||
onMounted(() => { |
|||
render(); |
|||
}); |
|||
</script> |
|||
@ -0,0 +1,51 @@ |
|||
<template> |
|||
<el-card shadow="hover" class="pb-4"> |
|||
<el-row :gutter="20"> |
|||
<el-col :span="12"> |
|||
<div class="text-sm text-gray-400">在线数量</div> |
|||
<div class="text-gray-500 text-4xl mt-1 mb-3">12</div> |
|||
<div class="line-wrap bg-green-50"> |
|||
<div class="line bg-green-300" style="width: 80%"></div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<div class="text-sm text-gray-400">离线数量</div> |
|||
<div class="text-gray-500 text-4xl mt-1 mb-3">12</div> |
|||
<div class="line-wrap bg-purple-50"> |
|||
<div class="line bg-purple-300" style="width: 80%"></div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="12" class="mt-10"> |
|||
<div class="text-sm text-gray-400">故障数量</div> |
|||
<div class="text-gray-500 text-4xl mt-1 mb-3">12</div> |
|||
<div class="line-wrap bg-yellow-50"> |
|||
<div class="line bg-yellow-300" style="width: 80%"></div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="12" class="mt-10"> |
|||
<div class="text-sm text-gray-400">报警数量</div> |
|||
<div class="text-gray-500 text-4xl mt-1 mb-3">12</div> |
|||
<div class="line-wrap bg-red-50"> |
|||
<div class="line bg-red-300" style="width: 80%"></div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</el-card> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
.line-wrap { |
|||
position: relative; |
|||
width: 60%; |
|||
height: 10px; |
|||
border-radius: 5px; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.line { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
height: 100%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,96 @@ |
|||
<template> |
|||
<template v-if="devicesAll && devicesAll.data"> |
|||
<el-table :data="devicesAll.data" :max-height="contentHeight" border stripe class="mt-6" style="width: 100%"> |
|||
<el-table-column align="center" label="站点名称" min-width="150" prop="address" /> |
|||
<el-table-column align="center" label="ID" min-min-width="100" prop="deviceId" /> |
|||
<el-table-column align="center" label="注册时间" min-width="200" prop="installTime" /> |
|||
<el-table-column align="center" label="最近上传时间" min-width="200" prop="runTime" /> |
|||
<el-table-column align="left" header-align="center" label="设备状态" min-width="150" prop="address" /> |
|||
<el-table-column align="left" header-align="center" label="产品类型" min-width="150" prop="area" /> |
|||
<el-table-column align="left" header-align="center" label="协议版本" min-width="150" prop="contact" /> |
|||
</el-table> |
|||
|
|||
<el-pagination |
|||
:current-page="devicesAll.page.page" |
|||
:default-page-size="50" |
|||
:page-count="devicesAll.page.count" |
|||
:page-size="devicesAll.page.size" |
|||
:page-sizes="[1, 10, 20, 50, 100]" |
|||
:total="devicesAll.page.total" |
|||
background |
|||
class="my-3 float-right" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
@size-change="onSizeChange" |
|||
@current-change="onCurrentPageChange" |
|||
></el-pagination> |
|||
</template> |
|||
|
|||
<!-- 编辑设备信息 --> |
|||
<DeviceEdit :show="editing" @toggle-mdoal="editing = false" /> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { computed, onMounted, ref } from 'vue'; |
|||
import { useStore } from 'vuex'; |
|||
import DeviceEdit from 'components/device-edit.vue'; |
|||
|
|||
let timer = null; |
|||
const store = useStore(); |
|||
const token = computed(() => store.getters['user/token']); |
|||
const devicesAll = computed(() => { |
|||
return store.state.device.devicesAll; |
|||
}); |
|||
const currentDeviceId = computed(() => store.state.device.currentDeviceId); |
|||
const contentHeight = ref(600); |
|||
const editing = ref(false); |
|||
|
|||
// 获取设备完整信息列表 |
|||
const getDevicesAllData = () => { |
|||
try { |
|||
if (token && token.value) { |
|||
store.dispatch('device/getDevicesAll'); |
|||
timer && clearTimeout(timer); |
|||
timer = null; |
|||
} else { |
|||
timer = setTimeout(() => { |
|||
getDevicesAllData(); |
|||
}); |
|||
} |
|||
} catch (error) { |
|||
throw new Error(error); |
|||
} |
|||
}; |
|||
|
|||
getDevicesAllData(); |
|||
|
|||
// 设置表格高度 |
|||
onMounted(() => { |
|||
const winHeight = document.documentElement.clientHeight; |
|||
contentHeight.value = winHeight - 250; |
|||
}); |
|||
|
|||
/** |
|||
* 删除 |
|||
* @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 = page => { |
|||
onSearch(page, devicesAll.value.page.size || 50); |
|||
}; |
|||
|
|||
// 每页条数变化 |
|||
const onSizeChange = size => { |
|||
onSearch(1, size); |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,19 @@ |
|||
<template> |
|||
<el-row :gutter="20"> |
|||
<el-col :span="8"> |
|||
<el-card shadow="hover"> |
|||
<ChartDeviceCount /> |
|||
</el-card> |
|||
</el-col> |
|||
<el-col :span="16"> |
|||
<ChartDeviceDetail /> |
|||
</el-col> |
|||
</el-row> |
|||
<DeviceTable /> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import ChartDeviceCount from 'components/overview/chart-device-count.vue'; |
|||
import ChartDeviceDetail from 'components/overview/chart-device-detail.vue'; |
|||
import DeviceTable from 'components/overview/device-table.vue'; |
|||
</script> |
|||
@ -1,38 +0,0 @@ |
|||
usage: git tag [-a | -s | -u <key-id>] [-f] [-m <msg> | -F <file>] |
|||
<tagname> [<head>] |
|||
or: git tag -d <tagname>... |
|||
or: git tag -l [-n[<num>]] [--contains <commit>] [--no-contains <commit>] [--points-at <object>] |
|||
[--format=<format>] [--[no-]merged [<commit>]] [<pattern>...] |
|||
or: git tag -v [--format=<format>] <tagname>... |
|||
|
|||
-l, --list list tag names |
|||
-n[<n>] print <n> lines of each tag message |
|||
-d, --delete delete tags |
|||
-v, --verify verify tags |
|||
|
|||
Tag creation options |
|||
-a, --annotate annotated tag, needs a message |
|||
-m, --message <message> |
|||
tag message |
|||
-F, --file <file> read message from file |
|||
-e, --edit force edit of tag message |
|||
-s, --sign annotated and GPG-signed tag |
|||
--cleanup <mode> how to strip spaces and #comments from message |
|||
-u, --local-user <key-id> |
|||
use another key to sign the tag |
|||
-f, --force replace the tag if exists |
|||
--create-reflog create a reflog |
|||
|
|||
Tag listing options |
|||
--column[=<style>] show tag list in columns |
|||
--contains <commit> print only tags that contain the commit |
|||
--no-contains <commit> |
|||
print only tags that don't contain the commit |
|||
--merged <commit> print only tags that are merged |
|||
--no-merged <commit> print only tags that are not merged |
|||
--sort <key> field name to sort on |
|||
--points-at <object> print only tags of the object |
|||
--format <format> format to use for the output |
|||
--color[=<when>] respect format colors |
|||
-i, --ignore-case sorting and filtering are case insensitive |
|||
|
|||
Loading…
Reference in new issue