修改数 添加数据完整性 在线率页面
This commit is contained in:
24
README.md
24
README.md
@@ -1,8 +1,13 @@
|
|||||||
#### 介绍
|
#### 介绍
|
||||||
Vue 3 + TypeScript + Vite这个模板可以帮助您开始使用Vue 3和TypeScript在Vite中进行开发。该模板使用了Vue 3的<script setup>单文件组件，请查看script setup文档了解更多信息。
|
|
||||||
|
```
|
||||||
|
Vue 3 + TypeScript + Vite这个模板可以帮助您开始使用Vue 3和TypeScript在Vite中进行开发。该模板使用了Vue 3的<script setup>单文件组件，请查看script setup文档了解更多信息。
|
||||||
|
```
|
||||||
|
|
||||||
#### 安装依赖&运行项目
|
#### 安装依赖&运行项目
|
||||||
|
|
||||||
> node version:^18.17.0 || >=20.5.0"
|
> node version:^18.17.0 || >=20.5.0"
|
||||||
|
|
||||||
```shell
|
```shell
|
||||||
#项目使用pnpm包管理器
|
#项目使用pnpm包管理器
|
||||||
npm i pnpm -g
|
npm i pnpm -g
|
||||||
@@ -13,12 +18,19 @@ pnpm i
|
|||||||
#运行项目
|
#运行项目
|
||||||
npm run dev
|
npm run dev
|
||||||
```
|
```
|
||||||
|
|
||||||
#### 页面编写-示例
|
#### 页面编写-示例
|
||||||
基础页面写法请查看`src/template`下的readme.md
|
|
||||||
|
```
|
||||||
|
基础页面写法请查看`src/template`下的readme.md
|
||||||
|
```
|
||||||
|
|
||||||
#### 开发规范
|
#### 开发规范
|
||||||
|
|
||||||
> 初衷：养成合理的习惯，精力留在技术调研、业务开发中。
|
> 初衷：养成合理的习惯，精力留在技术调研、业务开发中。
|
||||||
>
|
>
|
||||||
> 常见点如下描述，更多的规范待前端开发人员有时间后，慢慢丰富。
|
> 常见点如下描述，更多的规范待前端开发人员有时间后，慢慢丰富。
|
||||||
|
|
||||||
* 命名风格：所有的包（文件夹）、文件名以小驼峰的风格命名，比如xxxAaa，禁止XxxAaa或者xxx-aaa。
|
* 命名风格：所有的包（文件夹）、文件名以小驼峰的风格命名，比如xxxAaa，禁止XxxAaa或者xxx-aaa。
|
||||||
* 命名语义：禁止中文命名或拼音，英文命名借用下工具，稍微准确一点，不要与实际业务相差太远。
|
* 命名语义：禁止中文命名或拼音，英文命名借用下工具，稍微准确一点，不要与实际业务相差太远。
|
||||||
* 功能组件创建风格：以**功能名称**命名文件夹，每个功能下以**index.vue**作为该功能的组件入口。正确示例参考：/src/views/auth/menu/index.vue。
|
* 功能组件创建风格：以**功能名称**命名文件夹，每个功能下以**index.vue**作为该功能的组件入口。正确示例参考：/src/views/auth/menu/index.vue。
|
||||||
@@ -28,11 +40,14 @@ npm run dev
|
|||||||
* todo...：待后续补充。
|
* todo...：待后续补充。
|
||||||
|
|
||||||
#### 开发助手
|
#### 开发助手
|
||||||
|
|
||||||
##### 1、表格系列
|
##### 1、表格系列
|
||||||
|
|
||||||
* 页面表格以及表格页面按钮的弹出等功能参考：/views/pqs/voltageSags/sagGovern/index.vue
|
* 页面表格以及表格页面按钮的弹出等功能参考：/views/pqs/voltageSags/sagGovern/index.vue
|
||||||
* 表格中需要替换数据：
|
* 表格中需要替换数据：
|
||||||
|
|
||||||
```js
|
```js
|
||||||
// 通过formatter函数返回实际需要返回的值
|
// 通过formatter函数返回实际需要返回的值
|
||||||
{
|
{
|
||||||
title: '数据来源', field: 'dataSource', minWidth: '130',
|
title: '数据来源', field: 'dataSource', minWidth: '130',
|
||||||
formatter: (row: any) => {
|
formatter: (row: any) => {
|
||||||
@@ -40,8 +55,11 @@ npm run dev
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
##### 2、样式系列
|
##### 2、样式系列
|
||||||
|
|
||||||
* 获取当前主体的高度：import { mainHeight } from '@/utils/layout'
|
* 获取当前主体的高度：import { mainHeight } from '@/utils/layout'
|
||||||
|
* 弹框内输入框长度设置 1行1个 class="form-one" 1行2个 class="form-two"
|
||||||
|
|
||||||
#### 依赖变更记录
|
#### 依赖变更记录
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,272 @@
|
|||||||
|
<template>
|
||||||
|
<TableHeader area datePicker ref="TableHeaderRef">
|
||||||
|
<template #select>
|
||||||
|
<el-form-item label="统计类型:">
|
||||||
|
<el-select
|
||||||
|
v-model="tableStore.table.params.statisticalType"
|
||||||
|
value-key="id"
|
||||||
|
placeholder="请选择统计类型"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in classificationData"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="电压等级:">
|
||||||
|
<el-select
|
||||||
|
v-model="tableStore.table.params.scale"
|
||||||
|
multiple
|
||||||
|
collapse-tags
|
||||||
|
clearable
|
||||||
|
value-key="id"
|
||||||
|
placeholder="请选择电压等级"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in voltageleveloption"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="终端厂家:">
|
||||||
|
<el-select
|
||||||
|
v-model="tableStore.table.params.manufacturer"
|
||||||
|
multiple
|
||||||
|
collapse-tags
|
||||||
|
clearable
|
||||||
|
value-key="id"
|
||||||
|
placeholder="请选择终端厂家"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in terminaloption"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="干扰源类型:">
|
||||||
|
<el-select
|
||||||
|
v-model="tableStore.table.params.loadType"
|
||||||
|
multiple
|
||||||
|
collapse-tags
|
||||||
|
clearable
|
||||||
|
value-key="id"
|
||||||
|
placeholder="请选择干扰源类型"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in interfereoption"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
</TableHeader>
|
||||||
|
<my-echart class="mt10" :style="`height: calc(${tableStore.table.height} - 75px)`" :options="options" />
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted, provide, nextTick } from 'vue'
|
||||||
|
import TableStore from '@/utils/tableStore'
|
||||||
|
import Table from '@/components/table/index.vue'
|
||||||
|
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||||
|
import TableHeader from '@/components/table/header/index.vue'
|
||||||
|
import { useDictData } from '@/stores/dictData'
|
||||||
|
import * as echarts from 'echarts/core'
|
||||||
|
const dictData = useDictData()
|
||||||
|
const options = ref({})
|
||||||
|
|
||||||
|
const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
|
||||||
|
const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
|
||||||
|
const terminaloption = dictData.getBasicData('Dev_Manufacturers')
|
||||||
|
const interfereoption = dictData.getBasicData('Interference_Source')
|
||||||
|
|
||||||
|
const TableHeaderRef = ref()
|
||||||
|
const tableStore = new TableStore({
|
||||||
|
url: '/device-boot/LineIntegrityData/getIntegrityIcon',
|
||||||
|
|
||||||
|
showPage: false,
|
||||||
|
method: 'POST',
|
||||||
|
column: [],
|
||||||
|
|
||||||
|
loadCallback: () => {
|
||||||
|
// tableStore.table.data.type
|
||||||
|
options.value = {
|
||||||
|
title: {
|
||||||
|
text: tableStore.table.params.statisticalType.name
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
formatter: function (params: any) {
|
||||||
|
var tips = ''
|
||||||
|
|
||||||
|
for (var i = 0; i < params.length; i++) {
|
||||||
|
if (params[i].value == 1) {
|
||||||
|
tips += params[i].name + '</br>'
|
||||||
|
tips += '完整性:暂无数据'
|
||||||
|
} else {
|
||||||
|
tips += params[i].name + '</br>'
|
||||||
|
tips += '完整性:' + params[i].value.toFixed(2)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return tips
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: '50px',
|
||||||
|
right: '80px'
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
name: tableStore.table.params.statisticalType.name,
|
||||||
|
data: tableStore.table.data.map((item: any) => item.type)
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
name: '%',
|
||||||
|
max: 100
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '完整性',
|
||||||
|
type: 'bar',
|
||||||
|
data: tableStore.table.data.map((item: any) => item.single),
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
// 随机显示
|
||||||
|
//color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
|
||||||
|
|
||||||
|
// 定制显示（按顺序）
|
||||||
|
color: function (params: any) {
|
||||||
|
if (params.value >= 90) {
|
||||||
|
return new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#339966'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
false
|
||||||
|
)
|
||||||
|
} else if (params.value >= 60 && params.value <= 90) {
|
||||||
|
return new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#FFCC33'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
false
|
||||||
|
)
|
||||||
|
} else if (params.value <= 60 && params.value > 1) {
|
||||||
|
return new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#CC0000'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
false
|
||||||
|
)
|
||||||
|
} else if (params.value > 0 && params.value <= 1) {
|
||||||
|
return new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#ccc'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
false
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
markLine: {
|
||||||
|
silent: false,
|
||||||
|
symbol: 'circle',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: '',
|
||||||
|
yAxis: 100,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#339966'
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
//position: "middle",
|
||||||
|
formatter: '{b}',
|
||||||
|
textStyle: {
|
||||||
|
color: '#339966'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '',
|
||||||
|
yAxis: 90,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#FFCC33'
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
// position: "middle",
|
||||||
|
formatter: '{b}',
|
||||||
|
textStyle: {
|
||||||
|
color: '#FFCC33'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '',
|
||||||
|
yAxis: 60,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#CC0000'
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
//position: "middle",
|
||||||
|
formatter: '{b}',
|
||||||
|
textStyle: {
|
||||||
|
color: '#CC0000'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
tableStore.table.params.statisticalType = classificationData.filter(item => item.name == '电网拓扑')[0]
|
||||||
|
tableStore.table.params.monitorFlag = 2
|
||||||
|
tableStore.table.params.powerFlag = 2
|
||||||
|
tableStore.table.params.serverName = 'harmonicBoot'
|
||||||
|
|
||||||
|
provide('tableStore', tableStore)
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
tableStore.index()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss"></style>
|
||||||
@@ -0,0 +1,218 @@
|
|||||||
|
<template>
|
||||||
|
<TableHeader area datePicker ref="TableHeaderRef">
|
||||||
|
<template #select>
|
||||||
|
<el-form-item label="统计类型:">
|
||||||
|
<el-select
|
||||||
|
v-model="tableStore.table.params.statisticalType"
|
||||||
|
value-key="id"
|
||||||
|
placeholder="请选择统计类型"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in classificationData"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="电压等级:">
|
||||||
|
<el-select
|
||||||
|
v-model="tableStore.table.params.scale"
|
||||||
|
multiple
|
||||||
|
collapse-tags
|
||||||
|
clearable
|
||||||
|
value-key="id"
|
||||||
|
placeholder="请选择电压等级"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in voltageleveloption"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="终端厂家:">
|
||||||
|
<el-select
|
||||||
|
v-model="tableStore.table.params.manufacturer"
|
||||||
|
multiple
|
||||||
|
collapse-tags
|
||||||
|
clearable
|
||||||
|
value-key="id"
|
||||||
|
placeholder="请选择终端厂家"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in terminaloption"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="干扰源类型:">
|
||||||
|
<el-select
|
||||||
|
v-model="tableStore.table.params.loadType"
|
||||||
|
multiple
|
||||||
|
collapse-tags
|
||||||
|
clearable
|
||||||
|
value-key="id"
|
||||||
|
placeholder="请选择干扰源类型"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in interfereoption"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
</TableHeader>
|
||||||
|
<Table ref="tableRef" :tree-config="{ transform: true, parentField: 'pid' }" :scroll-y="{ enabled: true }" />
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted, provide, nextTick } from 'vue'
|
||||||
|
import TableStore from '@/utils/tableStore'
|
||||||
|
import Table from '@/components/table/index.vue'
|
||||||
|
import TableHeader from '@/components/table/header/index.vue'
|
||||||
|
import { useDictData } from '@/stores/dictData'
|
||||||
|
const dictData = useDictData()
|
||||||
|
const tableRef = ref()
|
||||||
|
|
||||||
|
const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
|
||||||
|
const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
|
||||||
|
const terminaloption = dictData.getBasicData('Dev_Manufacturers')
|
||||||
|
const interfereoption = dictData.getBasicData('Interference_Source')
|
||||||
|
|
||||||
|
const TableHeaderRef = ref()
|
||||||
|
const tableStore = new TableStore({
|
||||||
|
url: '/device-boot/LineIntegrityData/getLineIntegrityData',
|
||||||
|
publicHeight: 65,
|
||||||
|
showPage: false,
|
||||||
|
method: 'POST',
|
||||||
|
column: [
|
||||||
|
{ field: 'name', title: '电网拓扑', minWidth: '180px', align: 'left', treeNode: true },
|
||||||
|
{
|
||||||
|
field: 'ip',
|
||||||
|
title: '网络参数',
|
||||||
|
formatter: ({ row }: any) => {
|
||||||
|
return row.ip || '/'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'dataName',
|
||||||
|
title: '终端名称',
|
||||||
|
formatter: ({ row }: any) => {
|
||||||
|
return row.dataName || '/'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'manufacturer',
|
||||||
|
title: '厂家',
|
||||||
|
formatter: ({ row }: any) => {
|
||||||
|
return row.manufacturer || '/'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'comFlag',
|
||||||
|
title: '通讯状态',
|
||||||
|
render: 'tag',
|
||||||
|
custom: {
|
||||||
|
0: 'danger',
|
||||||
|
1: 'success',
|
||||||
|
3: 'info'
|
||||||
|
},
|
||||||
|
replaceValue: {
|
||||||
|
0: '禁用',
|
||||||
|
1: '正常',
|
||||||
|
3: '/'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'updateTime',
|
||||||
|
title: '最新数据时间',
|
||||||
|
formatter: ({ row }: any) => {
|
||||||
|
return row.updateTime || '/'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'integrityData',
|
||||||
|
title: '完整性(%)',
|
||||||
|
formatter: ({ row }: any) => {
|
||||||
|
return row.integrityData == 3.14159 ? '暂无数据' : row.integrityData.toFixed(2)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'assess',
|
||||||
|
title: '评估',
|
||||||
|
render: 'tag',
|
||||||
|
custom: {
|
||||||
|
0: 'info',
|
||||||
|
1: 'danger',
|
||||||
|
2: 'warning',
|
||||||
|
3: 'success'
|
||||||
|
},
|
||||||
|
replaceValue: {
|
||||||
|
0: '暂无数据',
|
||||||
|
1: '不合格',
|
||||||
|
2: '合格',
|
||||||
|
3: '优秀'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
beforeSearchFun: () => {
|
||||||
|
tableStore.options.column[0].title = tableStore.table.params.statisticalType.name
|
||||||
|
},
|
||||||
|
loadCallback: () => {
|
||||||
|
let treeData = []
|
||||||
|
tableStore.table.data.forEach((item: any) => {
|
||||||
|
if (item.children.length > 0) {
|
||||||
|
item.id = item.children[0].pid
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
treeData = tree2List(tableStore.table.data,)
|
||||||
|
tableStore.table.data = JSON.parse(JSON.stringify(treeData))
|
||||||
|
console.log("🚀 ~ tableStore.table.data:", tableStore.table.data)
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
tableRef.value.getRef().setAllTreeExpand(true)
|
||||||
|
}, 0)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
tableStore.table.params.statisticalType = classificationData.filter(item => item.name == '电网拓扑')[0]
|
||||||
|
tableStore.table.params.monitorFlag = 2
|
||||||
|
tableStore.table.params.powerFlag = 2
|
||||||
|
tableStore.table.params.serverName = 'harmonicBoot'
|
||||||
|
|
||||||
|
provide('tableStore', tableStore)
|
||||||
|
const tree2List = (list: any, pid?: string) => {
|
||||||
|
//存储结果的数组
|
||||||
|
let arr: any = []
|
||||||
|
// 遍历 tree 数组
|
||||||
|
list.forEach((item: any) => {
|
||||||
|
item.comFlag = item.comFlag == null ? 3 : item.comFlag
|
||||||
|
|
||||||
|
item.assess = item.integrityData == 3.14159 ? 0 : item.integrityData < 60 ? 1 : item.integrityData < 90 ? 2 : 3
|
||||||
|
item.pid = pid
|
||||||
|
// 判断item是否存在children
|
||||||
|
if (!item.children) return arr.push(item)
|
||||||
|
// 函数递归，对children数组进行tree2List的转换
|
||||||
|
const children = tree2List(item.children, item.id)
|
||||||
|
// 删除item的children属性
|
||||||
|
delete item.children
|
||||||
|
// 把item和children数组添加至结果数组
|
||||||
|
//..children: 意思是把children数组展开
|
||||||
|
arr.push(item, ...children)
|
||||||
|
})
|
||||||
|
// 返回结果数组
|
||||||
|
return arr
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
tableStore.index()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss"></style>
|
||||||
@@ -1,40 +1,37 @@
|
|||||||
<template>
|
<template>
|
||||||
<!-- 完整性 -->
|
<div class="default-main">
|
||||||
<div class="default-main" :style="height" v-loading="loading">
|
<el-tabs v-model="activeName" type="border-card">
|
||||||
<iframe
|
<el-tab-pane label="数据完整性列表" name="1">
|
||||||
:key="num"
|
<Table />
|
||||||
:src="iframeSrc"
|
</el-tab-pane>
|
||||||
id="frame1"
|
<el-tab-pane label="数据完整性图表" name="2">
|
||||||
ref="iframeRef"
|
<Echart />
|
||||||
frameborder="0"
|
</el-tab-pane>
|
||||||
style="width: 100%; height: 100%; border: 0px solid"
|
</el-tabs>
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { onMounted, ref, nextTick } from 'vue'
|
import { onMounted, reactive, ref, provide } from 'vue'
|
||||||
|
|
||||||
import { mainHeight } from '@/utils/layout'
|
import { mainHeight } from '@/utils/layout'
|
||||||
|
import Table from './components/table.vue'
|
||||||
|
import Echart from './components/echart.vue'
|
||||||
defineOptions({
|
defineOptions({
|
||||||
name: 'harmonic-boot/harmonic/getIntegrityData'
|
name: 'harmonic-boot/area/OnlineRate'
|
||||||
})
|
})
|
||||||
const height = mainHeight(20)
|
const activeName = ref('1')
|
||||||
|
|
||||||
const num = ref(0)
|
const layout = mainHeight(63) as any
|
||||||
const loading = ref(true)
|
|
||||||
const iframeRef: any = ref(null)
|
|
||||||
// const iframeSrc = 'http://www.jibei1.com:8088/#/harmonic-boot/detailedAnalysis/responsibilityqr'
|
|
||||||
const iframeSrc = window.location.origin + '/jbv2/#/harmonic-boot/harmonic/getIntegrityDataqr'
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
iframeRef.value.onload = () => {
|
|
||||||
iframeRef.value.contentWindow.postMessage({ info: window.localStorage.getItem('adminInfo') }, '*')
|
|
||||||
setTimeout(() => {
|
|
||||||
if (loading.value) {
|
|
||||||
}
|
|
||||||
++num.value
|
|
||||||
loading.value = false
|
|
||||||
}, 0)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped></style>
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.bars_w {
|
||||||
|
width: 100%;
|
||||||
|
height: 500px;
|
||||||
|
}
|
||||||
|
:deep(.el-tabs__content) {
|
||||||
|
height: v-bind('layout.height');
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -0,0 +1,272 @@
|
|||||||
|
<template>
|
||||||
|
<TableHeader area datePicker ref="TableHeaderRef">
|
||||||
|
<template #select>
|
||||||
|
<el-form-item label="统计类型:">
|
||||||
|
<el-select
|
||||||
|
v-model="tableStore.table.params.statisticalType"
|
||||||
|
value-key="id"
|
||||||
|
placeholder="请选择统计类型"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in classificationData"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="电压等级:">
|
||||||
|
<el-select
|
||||||
|
v-model="tableStore.table.params.scale"
|
||||||
|
multiple
|
||||||
|
collapse-tags
|
||||||
|
clearable
|
||||||
|
value-key="id"
|
||||||
|
placeholder="请选择电压等级"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in voltageleveloption"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="终端厂家:">
|
||||||
|
<el-select
|
||||||
|
v-model="tableStore.table.params.manufacturer"
|
||||||
|
multiple
|
||||||
|
collapse-tags
|
||||||
|
clearable
|
||||||
|
value-key="id"
|
||||||
|
placeholder="请选择终端厂家"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in terminaloption"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="干扰源类型:">
|
||||||
|
<el-select
|
||||||
|
v-model="tableStore.table.params.loadType"
|
||||||
|
multiple
|
||||||
|
collapse-tags
|
||||||
|
clearable
|
||||||
|
value-key="id"
|
||||||
|
placeholder="请选择干扰源类型"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in interfereoption"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
</TableHeader>
|
||||||
|
<my-echart class="mt10" :style="`height: calc(${tableStore.table.height} - 75px)`" :options="options" />
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted, provide, nextTick } from 'vue'
|
||||||
|
import TableStore from '@/utils/tableStore'
|
||||||
|
import Table from '@/components/table/index.vue'
|
||||||
|
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||||
|
import TableHeader from '@/components/table/header/index.vue'
|
||||||
|
import { useDictData } from '@/stores/dictData'
|
||||||
|
import * as echarts from 'echarts/core'
|
||||||
|
const dictData = useDictData()
|
||||||
|
const options = ref({})
|
||||||
|
|
||||||
|
const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
|
||||||
|
const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
|
||||||
|
const terminaloption = dictData.getBasicData('Dev_Manufacturers')
|
||||||
|
const interfereoption = dictData.getBasicData('Interference_Source')
|
||||||
|
|
||||||
|
const TableHeaderRef = ref()
|
||||||
|
const tableStore = new TableStore({
|
||||||
|
url: '/device-boot/terminalOnlineRateData/getOnlineRateDataCensus',
|
||||||
|
|
||||||
|
showPage: false,
|
||||||
|
method: 'POST',
|
||||||
|
column: [],
|
||||||
|
|
||||||
|
loadCallback: () => {
|
||||||
|
// tableStore.table.data.type
|
||||||
|
options.value = {
|
||||||
|
title: {
|
||||||
|
text: tableStore.table.params.statisticalType.name
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
formatter: function (params: any) {
|
||||||
|
var tips = ''
|
||||||
|
|
||||||
|
for (var i = 0; i < params.length; i++) {
|
||||||
|
if (params[i].value == 1) {
|
||||||
|
tips += params[i].name + '</br>'
|
||||||
|
tips += '在线率:暂无数据'
|
||||||
|
} else {
|
||||||
|
tips += params[i].name + '</br>'
|
||||||
|
tips += '在线率:' + params[i].value.toFixed(2)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return tips
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: '50px',
|
||||||
|
right: '80px'
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
name: tableStore.table.params.statisticalType.name,
|
||||||
|
data: tableStore.table.data.type
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
name: '%',
|
||||||
|
max: 100
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '在线率',
|
||||||
|
type: 'bar',
|
||||||
|
data: tableStore.table.data.single,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
// 随机显示
|
||||||
|
//color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
|
||||||
|
|
||||||
|
// 定制显示（按顺序）
|
||||||
|
color: function (params: any) {
|
||||||
|
if (params.value >= 90) {
|
||||||
|
return new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#339966'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
false
|
||||||
|
)
|
||||||
|
} else if (params.value >= 60 && params.value <= 90) {
|
||||||
|
return new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#FFCC33'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
false
|
||||||
|
)
|
||||||
|
} else if (params.value <= 60 && params.value > 1) {
|
||||||
|
return new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#CC0000'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
false
|
||||||
|
)
|
||||||
|
} else if (params.value > 0 && params.value <= 1) {
|
||||||
|
return new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#ccc'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
false
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
markLine: {
|
||||||
|
silent: false,
|
||||||
|
symbol: 'circle',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: '',
|
||||||
|
yAxis: 100,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#339966'
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
//position: "middle",
|
||||||
|
formatter: '{b}',
|
||||||
|
textStyle: {
|
||||||
|
color: '#339966'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '',
|
||||||
|
yAxis: 90,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#FFCC33'
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
// position: "middle",
|
||||||
|
formatter: '{b}',
|
||||||
|
textStyle: {
|
||||||
|
color: '#FFCC33'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '',
|
||||||
|
yAxis: 60,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#CC0000'
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
//position: "middle",
|
||||||
|
formatter: '{b}',
|
||||||
|
textStyle: {
|
||||||
|
color: '#CC0000'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
tableStore.table.params.statisticalType = classificationData.filter(item => item.name == '电网拓扑')[0]
|
||||||
|
tableStore.table.params.monitorFlag = 2
|
||||||
|
tableStore.table.params.powerFlag = 2
|
||||||
|
tableStore.table.params.serverName = 'harmonicBoot'
|
||||||
|
|
||||||
|
provide('tableStore', tableStore)
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
tableStore.index()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss"></style>
|
||||||
@@ -0,0 +1,219 @@
|
|||||||
|
<template>
|
||||||
|
<TableHeader area datePicker ref="TableHeaderRef">
|
||||||
|
<template #select>
|
||||||
|
<el-form-item label="统计类型:">
|
||||||
|
<el-select
|
||||||
|
v-model="tableStore.table.params.statisticalType"
|
||||||
|
value-key="id"
|
||||||
|
placeholder="请选择统计类型"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in classificationData"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="电压等级:">
|
||||||
|
<el-select
|
||||||
|
v-model="tableStore.table.params.scale"
|
||||||
|
multiple
|
||||||
|
collapse-tags
|
||||||
|
clearable
|
||||||
|
value-key="id"
|
||||||
|
placeholder="请选择电压等级"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in voltageleveloption"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="终端厂家:">
|
||||||
|
<el-select
|
||||||
|
v-model="tableStore.table.params.manufacturer"
|
||||||
|
multiple
|
||||||
|
collapse-tags
|
||||||
|
clearable
|
||||||
|
value-key="id"
|
||||||
|
placeholder="请选择终端厂家"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in terminaloption"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="干扰源类型:">
|
||||||
|
<el-select
|
||||||
|
v-model="tableStore.table.params.loadType"
|
||||||
|
multiple
|
||||||
|
collapse-tags
|
||||||
|
clearable
|
||||||
|
value-key="id"
|
||||||
|
placeholder="请选择干扰源类型"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in interfereoption"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
</TableHeader>
|
||||||
|
<Table ref="tableRef" :tree-config="{ transform: true, parentField: 'pid' }" :scroll-y="{ enabled: true }" />
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted, provide, nextTick } from 'vue'
|
||||||
|
import TableStore from '@/utils/tableStore'
|
||||||
|
import Table from '@/components/table/index.vue'
|
||||||
|
import TableHeader from '@/components/table/header/index.vue'
|
||||||
|
import { useDictData } from '@/stores/dictData'
|
||||||
|
const dictData = useDictData()
|
||||||
|
const tableRef = ref()
|
||||||
|
|
||||||
|
const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
|
||||||
|
const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
|
||||||
|
const terminaloption = dictData.getBasicData('Dev_Manufacturers')
|
||||||
|
const interfereoption = dictData.getBasicData('Interference_Source')
|
||||||
|
|
||||||
|
const TableHeaderRef = ref()
|
||||||
|
const tableStore = new TableStore({
|
||||||
|
url: '/device-boot/terminalOnlineRateData/getOnlineRateData',
|
||||||
|
publicHeight: 65,
|
||||||
|
showPage: false,
|
||||||
|
method: 'POST',
|
||||||
|
column: [
|
||||||
|
{ field: 'name', title: '电网拓扑', minWidth: '180px', align: 'left', treeNode: true },
|
||||||
|
{
|
||||||
|
field: 'ip',
|
||||||
|
title: '网络参数',
|
||||||
|
formatter: ({ row }: any) => {
|
||||||
|
return row.ip || '/'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'dataName',
|
||||||
|
title: '终端名称',
|
||||||
|
formatter: ({ row }: any) => {
|
||||||
|
return row.dataName || '/'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'manufacturer',
|
||||||
|
title: '厂家',
|
||||||
|
formatter: ({ row }: any) => {
|
||||||
|
return row.manufacturer || '/'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'comFlag',
|
||||||
|
title: '通讯状态',
|
||||||
|
render: 'tag',
|
||||||
|
custom: {
|
||||||
|
0: 'danger',
|
||||||
|
1: 'success',
|
||||||
|
3: 'info'
|
||||||
|
},
|
||||||
|
replaceValue: {
|
||||||
|
0: '禁用',
|
||||||
|
1: '正常',
|
||||||
|
3: '/'
|
||||||
|
}
|
||||||
|
// formatter: ({ row }: any) => {
|
||||||
|
// return row.comFlag || '/'
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'updateTime',
|
||||||
|
title: '最新数据时间',
|
||||||
|
formatter: ({ row }: any) => {
|
||||||
|
return row.updateTime || '/'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'onlineRate',
|
||||||
|
title: '在线率(%)',
|
||||||
|
formatter: ({ row }: any) => {
|
||||||
|
return row.onlineRate == 3.14159 ? '暂无数据' : row.onlineRate.toFixed(2)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'assess',
|
||||||
|
title: '评估',
|
||||||
|
render: 'tag',
|
||||||
|
custom: {
|
||||||
|
0: 'info',
|
||||||
|
1: 'danger',
|
||||||
|
2: 'warning',
|
||||||
|
3: 'success'
|
||||||
|
},
|
||||||
|
replaceValue: {
|
||||||
|
0: '暂无数据',
|
||||||
|
1: '不合格',
|
||||||
|
2: '合格',
|
||||||
|
3: '优秀'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
beforeSearchFun: () => {
|
||||||
|
tableStore.options.column[0].title = tableStore.table.params.statisticalType.name
|
||||||
|
},
|
||||||
|
loadCallback: () => {
|
||||||
|
let treeData = []
|
||||||
|
tableStore.table.data.forEach((item: any) => {
|
||||||
|
if (item.children.length > 0) {
|
||||||
|
item.id = item.children[0].pid
|
||||||
|
}
|
||||||
|
})
|
||||||
|
treeData = tree2List(tableStore.table.data)
|
||||||
|
tableStore.table.data = JSON.parse(JSON.stringify(treeData))
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
tableRef.value.getRef().setAllTreeExpand(true)
|
||||||
|
}, 0)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
tableStore.table.params.statisticalType = classificationData.filter(item => item.name == '电网拓扑')[0]
|
||||||
|
tableStore.table.params.monitorFlag = 2
|
||||||
|
tableStore.table.params.powerFlag = 2
|
||||||
|
tableStore.table.params.serverName = 'harmonicBoot'
|
||||||
|
|
||||||
|
provide('tableStore', tableStore)
|
||||||
|
const tree2List = (list: any) => {
|
||||||
|
//存储结果的数组
|
||||||
|
let arr: any = []
|
||||||
|
// 遍历 tree 数组
|
||||||
|
list.forEach((item: any) => {
|
||||||
|
item.comFlag = item.comFlag == null ? 3 : item.comFlag
|
||||||
|
console.log('🚀 ~ list.forEach ~ item:', item)
|
||||||
|
|
||||||
|
item.assess = item.onlineRate == 3.14159 ? 0 : item.onlineRate < 60 ? 1 : item.onlineRate < 90 ? 2 : 3
|
||||||
|
// 判断item是否存在children
|
||||||
|
if (!item.children) return arr.push(item)
|
||||||
|
// 函数递归，对children数组进行tree2List的转换
|
||||||
|
const children = tree2List(item.children)
|
||||||
|
// 删除item的children属性
|
||||||
|
delete item.children
|
||||||
|
// 把item和children数组添加至结果数组
|
||||||
|
//..children: 意思是把children数组展开
|
||||||
|
arr.push(item, ...children)
|
||||||
|
})
|
||||||
|
// 返回结果数组
|
||||||
|
return arr
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
tableStore.index()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss"></style>
|
||||||
@@ -1,40 +1,37 @@
|
|||||||
<template>
|
<template>
|
||||||
<!-- 在线率 -->
|
<div class="default-main">
|
||||||
<div class="default-main" :style="height" v-loading="loading">
|
<el-tabs v-model="activeName" type="border-card">
|
||||||
<iframe
|
<el-tab-pane label="终端在线率列表" name="1">
|
||||||
:key="num"
|
<Table />
|
||||||
:src="iframeSrc"
|
</el-tab-pane>
|
||||||
id="frame1"
|
<el-tab-pane label="终端在线率图表" name="2">
|
||||||
ref="iframeRef"
|
<Echart />
|
||||||
frameborder="0"
|
</el-tab-pane>
|
||||||
style="width: 100%; height: 100%; border: 0px solid"
|
</el-tabs>
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { onMounted, ref, nextTick } from 'vue'
|
import { onMounted, reactive, ref, provide } from 'vue'
|
||||||
|
|
||||||
import { mainHeight } from '@/utils/layout'
|
import { mainHeight } from '@/utils/layout'
|
||||||
|
import Table from './components/table.vue'
|
||||||
|
import Echart from './components/echart.vue'
|
||||||
defineOptions({
|
defineOptions({
|
||||||
name: 'harmonic-boot/area/OnlineRate'
|
name: 'harmonic-boot/area/OnlineRate'
|
||||||
})
|
})
|
||||||
const height = mainHeight(20)
|
const activeName = ref('1')
|
||||||
|
|
||||||
const num = ref(0)
|
const layout = mainHeight(63) as any
|
||||||
const loading = ref(true)
|
|
||||||
const iframeRef: any = ref(null)
|
|
||||||
// const iframeSrc = 'http://www.jibei1.com:8088/#/harmonic-boot/detailedAnalysis/responsibilityqr'
|
|
||||||
const iframeSrc = window.location.origin + '/jbv2/#/harmonic-boot/area/OnlineRateqr'
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
iframeRef.value.onload = () => {
|
|
||||||
iframeRef.value.contentWindow.postMessage({ info: window.localStorage.getItem('adminInfo') }, '*')
|
|
||||||
setTimeout(() => {
|
|
||||||
if (loading.value) {
|
|
||||||
}
|
|
||||||
++num.value
|
|
||||||
loading.value = false
|
|
||||||
}, 0)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped></style>
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.bars_w {
|
||||||
|
width: 100%;
|
||||||
|
height: 500px;
|
||||||
|
}
|
||||||
|
:deep(.el-tabs__content) {
|
||||||
|
height: v-bind('layout.height');
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user