forked from TALL/tall3-pc-keti
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