monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by XuHaoJie
Commit 5a2d6fe98cbd0794b7003c0045848a9a23182acb 2 parents 0d805186 3689e094 master ... joke master-500-dev master-500-dev-0327 master-500-dev-LH master-500-dev-XuHaoJie master-500-dev-joke master-500-dev-lushangqing master-500-dev-lzc master-500-dev-xwx master-500-dev-yuanjinpeng master-500-dev-ztq master-500-dev-ztq1 master-500-log master-500-log-ztq master-500-prod master-500-prod-joke-new master-500-prod-lushangqing master-V32-LH master-V32-XuHaoJie master-V32-lgh master-joke master-mj master-mj-610 master-mj-joke master-mj-yuanjinpeng master-mj-ztq master-prod master-prod-500-lushangqing master-prod-lgh master-prod-lushangqing master-prod-xwx master-prod-xwx2 master-v32-joke master-v32-lushangqing master-v32-lzc master-v32-xwx master-v32-ztq master-v330 master-yuanjinpeng mater-ztq wangfeng wangfeng-500-dev wangfeng-mj wuhl-master tag-master-v320

Merge branch 'master' of http://113.200.75.45:82/monitor_v3/hg-monitor-web into master-V32-XuHaoJie

Inline Side-by-side
Showing 54 changed files with 1635 additions and 461 deletions
# 代码包路径
````
【后端】 hg-platform\business-center\view-center-project\view-center-zj\src\main\java\com\honggroup\manageapi\bdialtestconfig
````
### 说明
````
文档管理是一个组件，文档管理和回收站使用传参的方式，来控制读取数据的接口；
````
## 配置文件修改
**api-gateway**</br>
配置节点security:oauth2:ignored追加配置文件:**,/api-web/manage/bustype/getAllBusId,/api-web/manage/bdialtest/getTaskIdAndBusId**
````
# 增加配置文件
security:
oauth2:
ignored: /test163/** , /api-auth/** , /doc.html ,/test111 ,/api-user/users-anon/login, /api-user/users/save,/api-web/datavis/**,/api-web/bigScreen/**, /user-center/users-anon/login,/document.html,**/v2/api-docs,/oauth/** ,/login.html ,/user/login,/**/**.css ,/**/**.js ,/getVersion,/api-web/manage/bustype/getAllBusId,/api-web/manage/bdialtest/getTaskIdAndBusId
````
## 涉及工程
> 1、view-center
... ...
... ... @@ -2,11 +2,15 @@
[https://hgkj.5upm.com/task-view-73.html](任务地址)
# 代码包路径
````【前端】【组件】hg-monitor-web\hg-monitor-web-base\src\main\resources\static\vue3\src\components\common\document
````
【前端】【组件】hg-monitor-web\hg-monitor-web-base\src\main\resources\static\vue3\src\components\common\document
【前端】【文档管理】hg-monitor-web\hg-monitor-web-zj\src\main\resources\static\vue3\src\views\documentationManagement\index.*
【前端】【回收站】hg-monitor-web\hg-monitor-web-zj\src\main\resources\static\vue3\src\views\documentationManagement\documentRecycle.*
【后端】hg-platform\business-center\inspection-report\src\main\java\com\honggroup\report\controller\FileManageMentController.java
````
### 说明
````
文档管理是一个组件，文档管理和回收站使用传参的方式，来控制读取数据的接口；
````
... ...
... ... @@ -55,6 +55,30 @@
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe615;</span>
<div class="name">资产</div>
<div class="code-name">&amp;#xe615;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61f;</span>
<div class="name">收藏</div>
<div class="code-name">&amp;#xe61f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe835;</span>
<div class="name">网络拓扑</div>
<div class="code-name">&amp;#xe835;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe622;</span>
<div class="name">收藏</div>
<div class="code-name">&amp;#xe622;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe613;</span>
<div class="name">虚拟桌面</div>
<div class="code-name">&amp;#xe613;</div>
... ... @@ -564,9 +588,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1635930253141') format('woff2'),
url('iconfont.woff?t=1635930253141') format('woff'),
url('iconfont.ttf?t=1635930253141') format('truetype');
src: url('iconfont.woff2?t=1636448687987') format('woff2'),
url('iconfont.woff?t=1636448687987') format('woff'),
url('iconfont.ttf?t=1636448687987') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
... ... @@ -593,6 +617,42 @@
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-assets"></span>
<div class="name">
资产
</div>
<div class="code-name">.icon-assets
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shoucang"></span>
<div class="name">
收藏
</div>
<div class="code-name">.icon-shoucang
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-wangluotuopu"></span>
<div class="name">
网络拓扑
</div>
<div class="code-name">.icon-wangluotuopu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shoucang1"></span>
<div class="name">
收藏
</div>
<div class="code-name">.icon-shoucang1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xunizhuomian"></span>
<div class="name">
虚拟桌面
... ... @@ -1359,6 +1419,38 @@
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-assets"></use>
</svg>
<div class="name">资产</div>
<div class="code-name">#icon-assets</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shoucang"></use>
</svg>
<div class="name">收藏</div>
<div class="code-name">#icon-shoucang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-wangluotuopu"></use>
</svg>
<div class="name">网络拓扑</div>
<div class="code-name">#icon-wangluotuopu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shoucang1"></use>
</svg>
<div class="name">收藏</div>
<div class="code-name">#icon-shoucang1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xunizhuomian"></use>
</svg>
<div class="name">虚拟桌面</div>
... ...
@font-face {
font-family: "iconfont"; /* Project id 2843738 */
src: url('iconfont.woff2?t=1635930253141') format('woff2'),
url('iconfont.woff?t=1635930253141') format('woff'),
url('iconfont.ttf?t=1635930253141') format('truetype');
src: url('iconfont.woff2?t=1636448687987') format('woff2'),
url('iconfont.woff?t=1636448687987') format('woff'),
url('iconfont.ttf?t=1636448687987') format('truetype');
}
.iconfont {
... ... @@ -13,6 +13,22 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-assets:before {
content: "\e615";
}
.icon-shoucang:before {
content: "\e61f";
}
.icon-wangluotuopu:before {
content: "\e835";
}
.icon-shoucang1:before {
content: "\e622";
}
.icon-xunizhuomian:before {
content: "\e613";
}
... ...
... ... @@ -6,6 +6,34 @@
"description": "",
"glyphs": [
{
"icon_id": "1369418",
"name": "资产",
"font_class": "assets",
"unicode": "e615",
"unicode_decimal": 58901
},
{
"icon_id": "5318188",
"name": "收藏",
"font_class": "shoucang",
"unicode": "e61f",
"unicode_decimal": 58911
},
{
"icon_id": "6510093",
"name": "网络拓扑",
"font_class": "wangluotuopu",
"unicode": "e835",
"unicode_decimal": 59445
},
{
"icon_id": "7588122",
"name": "收藏",
"font_class": "shoucang1",
"unicode": "e622",
"unicode_decimal": 58914
},
{
"icon_id": "4675111",
"name": "虚拟桌面",
"font_class": "xunizhuomian",
... ...
... ... @@ -128,12 +128,34 @@ global.viewer = (path,proxy) =>{
if (res && res.success) {
window.open("/src/lib/extend/pdfjs/web/viewer.html?test=" + encodeURIComponent(res.str));
} else {
global.showMsg(data.msg,"error")
global.showMsg((res.msg == undefined || res.msg == '' || res.msg == null) ? "该文档不支持预览！" : res.msg,"error")
}
})
}
/**
* 拓扑
* @param path
*/
global.openGraphEditor = (topoId) =>{
let url = `${sessionStorage.getItem('graphEditorOrigin')}/jgraph/grapheditor/index.html?access_token=${localStorage.getItem('access_token')}&id=${topoId}`;
let height = window.innerHeight;
let width = window.innerWidth;
window.open(url,"_blank",`toolbar=no, location=no, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=no, width=${width}, height=${height}`);
}
/**
* 打开资产列表
* @param topoId
*/
global.openCmdbAssets = (resId) =>{
let url = `${sessionStorage.getItem('graphEditorOrigin')}/jgraph/grapheditor/index.html?access_token=${localStorage.getItem('access_token')}&id=${resId}`;
let height = window.innerHeight;
let width = window.innerWidth;
window.open(url,"_blank",`toolbar=no, location=no, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=no, width=${width}, height=${height}`);
}
/**
* 将文件转成base64
* @param file
* @returns {Promise<String>}
... ...
... ... @@ -8,7 +8,7 @@ let http = {
},
reqErr: function (xhr) {
try{
http.proxy.$global.showMsg("服务异常，请联系管理员！","error");
let isUnauthorized = xhr.statusText == 'Unauthorized'
if (isUnauthorized || (xhr && xhr.responseJSON && xhr.responseJSON.resp_code && xhr.responseJSON.resp_code == '401')) {
// 登录超时，刷新当前页面===>跳转到登录页面
... ...
... ... @@ -38,4 +38,7 @@
@import "../css/cloudPlatform.css";
@import "../css/navTabs.css";
\ No newline at end of file
@import "../css/navTabs.css";
/*对比分析*/
@import "../css/analysis.css";
... ...
.analysis-index-container{
display: flex;
justify-content: center;
margin-top: 30px;
}
.iconAdd{
width:50%;
height:240px;
color:#00b3fe;
cursor: pointer;
border:1px dot-dash #00b3fe;
display: flex;
justify-content: center;
align-items: center;
}
/*add页面*/
.analysis-add-container{
height: 100%;
background-color: #f6f6f6;
}
.add-top{
background-color: #FFFFFF;
padding:20px;
margin-bottom: 20px;
width: 100%;
}
.add-bottom{
background-color: #FFFFFF;
padding:20px 30px;
width: 100%;
}
.classLine{
width:100%;
}
.add-top-title{
text-align: left;
}
.add-top-select{
display: flex;
justify-content: space-between;
}
.bottom-condition{
padding:0 20px;
display: flex;
flex-flow: column;
justify-content: space-around;
}
\ No newline at end of file
... ...
... ... @@ -58,7 +58,7 @@
}
.screen-left {
height: 100%;
width: 30%;
width: 26%;
}
.screen-left #left-top {
height: 56%;
... ... @@ -68,9 +68,12 @@
height: 43.8%;
position: relative;
}
.screen-left #left-bottom .declare-lineChart{
height: 100%;
}
.screen-middle {
height: 100%;
width: 40%;
width: 44%;
margin-top: 0.5%;
margin-left: 0.2%;
margin-right: 0.2%;
... ... @@ -85,14 +88,16 @@
.width-86{
width:86%;
margin-bottom: 10px;
align-items: flex-end;
}
.middle-right{
flex: 1;
width: 20%;
/*flex: 1;*/
position: relative;
left: -5%;
display: flex;
flex-flow: column;
justify-content: space-around;
justify-content: center;
}
.deduction-bottom{
height:40%;
... ... @@ -108,8 +113,12 @@
/*height: 32%;*/
position: relative;
}
.middle-left-declare{
width:100%;
}
.middle-left-declare-rate{
height: 36%;
width:86%;
}
.screen-middle #middle-bottom {
... ... @@ -130,7 +139,7 @@
}
.screen-right #right-top {
height: 32%;
height: 30%;
position: relative;
}
.screen-right #right-center {
... ... @@ -148,6 +157,9 @@
}
.cpu-dropdown{
text-align: right;
position: absolute;
right: 10px;
z-index: 1;
}
.cpu-dropdown .el-dropdown .el-dropdown-selfdefine{
color:#ffffff;
... ... @@ -173,22 +185,22 @@
}
.screen-bottom #bottom-one {
height: 100%;
width: 25%;
width: 26%;
position: relative;
}
.screen-bottom #bottom-two {
height: 100%;
width: 25%;
width: 22%;
position: relative;
}
.screen-bottom #bottom-three {
height: 100%;
width: 25%;
width: 22%;
position: relative;
}
.screen-bottom #bottom-four {
height: 100%;
width: 25%;
width: 30%;
position: relative;
}
.icon-arrow{
... ...
... ... @@ -28,7 +28,14 @@
width: 300px;
}
.yfyw-user .el-input__inner, .el-textarea__inner {
.yfyw-user .el-input__inner {
border: none;
border-bottom: solid 1px #DCDFE6;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.yfyw-user .el-textarea__inner {
border: none;
border-bottom: solid 1px #DCDFE6;
border-bottom-left-radius: 0;
... ...
... ... @@ -60,7 +60,7 @@ body{font-size: 15px;}
}
.declare-lineChart{
height:100%;
height:50%;
}
.monitoring-bar{
height:50%;
... ... @@ -75,6 +75,7 @@ body{font-size: 15px;}
}
.performance-lineChart{
margin-top:30px;
flex: 1;
}
.screen-res{
width:45%;
... ... @@ -82,6 +83,11 @@ body{font-size: 15px;}
.screen-performance{
width:55%;
}
.performance-container{
height:100%;
display: flex;
flex-flow: column;
}
.performance-container .container-title{
margin-left:40px;
}
... ...
<el-progress type="dashboard" :percentage="percentage" :status="status">
<template #default="{ percentage }">
<span class="percentage-value">{{ percentage }}%</span>
<span class="percentage-label">{{percentageText}}</span>
</template>
</el-progress>
<!--
<el-progress
:text-inside="true"
:stroke-width="20"
:percentage="50"
status="exception" >
<span>Content</span>
</el-progress>
-->
... ...
export default {
name: 'resConfigIndex',
template: '',
components: {},
props: {
// 百分比数字，例如：50%，percentage= 50
percentage: {
type: Number,
default: 0
},
// 展示文字
percentageText: {
type: String,
default: ''
},
// 状态 success/exception/warning
status: {
type: String,
default: 'success'
},
},
data() {
return {
}
},
setup(props, {attrs, slots, emit}) {
}
}
... ...
<div>
<el-dropdown>
<span class="el-dropdown-link" @click="openDetail">
{{resName}}
<el-icon class="el-icon--right">
<arrow-down/>
</el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item v-if="start" title="收藏" @click="showDialog(true)">
<i class="iconfont icon-shoucang" style="color: #FEB61E"/>
</el-dropdown-item>
<el-dropdown-item v-if="topo" title="拓扑" @click="openTopoPage">
<i class="iconfont icon-wangluotuopu" style="color: #FEB61E"/>
</el-dropdown-item>
<el-dropdown-item v-if="assets" title="资产" @click="openCmdbAssets">
<i class="iconfont icon-assets" style="color: #FEB61E"/>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<cm-dialog title="收藏" width="500px" :showDialogVisible="dialogFlg" @hidedialog="showDialog" @okfunc="saveStart">
<template v-slot>
<div style="padding: 10px" style="display: flex">
<div v-for="(v,k) in fieldsValueObj[currentRow.id].props" style="width: 50%">
<div style="text-align: left;padding-left: 10px;">{{v}}</div>
<el-select v-model="favIds" multiple placeholder="请选择" style="margin: 3px">
<el-option v-for="(item ,index) in favData"
:key="index"
:label="item.name"
:value="item.value" >
</el-option>
</el-select>
</div>
</div>
</template>
</cm-dialog>
</div>
... ...
export default {
name: 'resConfigIndex',
template: '',
components: {},
props: {
// 资源名称
resName: {
type: String,
default: 0
},
// 展示文字 收藏、拓扑、资产 'start,topo,assets'
start: {
type: Boolean,
default: true
},
topo: {
type: Boolean,
default: true
},
assets: {
type: Boolean,
default: true
},
resId: {
type: String,
default: ''
},
},
data() {
return {}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
let dialogFlg = Vue.ref(false);
let favIds = Vue.ref([]);
let favData = Vue.ref([]);
/**
* 展示收藏弹框
* <p>
* 作者： Wang
* 时间：2021/11/9 18:30
*/
let showDialog = (flg) => {
dialogFlg.value = flg;
if (favData.value.length == 0) {
// 加载收藏文件列表
proxy.$http.get(`/api-web/favorites/treeSelectData`, {}, function (res) {
if (res && res.data && res.data.length > 0) {
let arr = [];
let getChilds = (arr) => {
arr.forEach(function (v) {
if (v.children && v.children.length > 0) {
getChilds(v.children);
} else {
arr.push(v);
}
})
}
favData.value = arr;
}
});
}
}
/**
* 保存收藏
* <p>
* 作者： Wang
* 时间：2021/11/9 18:29
*/
let saveStart = () => {
if (props.resId == '') {
proxy.$global.showMsg("资源Id不存在，确认！")
return;
}
let params = {
favIds: favIds,
resId: props.resId
}
proxy.$http.post(`/api-web/favorites/save/fav`, params, function (res) {
if (res && res.success) {
proxy.$global.showMsg("收藏成功！")
}
});
}
let openTopoPage = () => {
if (props.resId == '') {
proxy.$global.showMsg("资源Id不存在，确认！")
return;
}
// 查询topoId
proxy.$http.get(`/api-web/mxgraph/generateByResId`, {resId: props.resId}, function (res) {
if (response && response.success) {
let topoId = response.str;
proxy.$global.openGraphEditor(topoId)
} else {
proxy.$global.showMsg('生成资源拓扑失败!', "error");
}
});
}
let openDetail = () => {
}
let openCmdbAssets = () => {
proxy.$global.openCmdbAssets(props.resId);
}
return {
dialogFlg,
showDialog,
saveStart,
favIds,
favData,
openTopoPage,
openDetail,
openCmdbAssets
}
}
}
... ...
export default {
name: 'resConfigIndex',
template: '',
components: {},
props: {
// 类型 danger success warning
type: {
type: String,
default: 'success'
},
// 文本
text: {
type: String,
default: ''
},
},
data() {
return {
}
},
setup(props, {attrs, slots, emit}) {
}
}
... ...
... ... @@ -5,19 +5,20 @@
<div style="text-align: left;padding-left: 10px;padding-top: 3px;font-weight: bold">
<el-link type="info" :underline="false"><i class="iconfont icon-liebiao"></i> 资源类型</el-link>
</div>
<el-tree :data="treeData" :props="props" >
<el-tree :data="treeData" :props="props" @node-click="handleConfigNodeClick">
<template #default="{ node, data }">
<div style="position: relative;flex-direction: row;width: 100%;">
<!--<div style="display: flex;flex-direction: row;width: 100%;">
<div style="width: calc(100% - 60px);max-width: calc(100% - 60px);overflow: hidden;text-overflow: ellipsis;text-align: left;"
@click="handleConfigNodeClick(data)" :title="node.label">
{{node.label }}
</div>
<div style="width: 60px;float: right">
<div style="width: 60px;">
<a @click="editType(data)" style="margin-right: 10px;">
<i class="el-icon-setting"></i>
</a>
</div>
</div>
</div>-->
{{node.label }}
</template>
</el-tree>
</div>
... ... @@ -39,6 +40,10 @@
</template>
</el-dropdown>
<el-button type="primary" @click="saveConfig" style="margin-left: 10px">保存</el-button>
<el-button type="primary" @click="showTreeNodeDialog(true)" style="margin-left: 10px">
<i class="el-icon-setting"></i>
</el-button>
</div>
<cm-table-page :columns="columns" :dataList="dataList" @loaddata="getPage" :showIndex="true"
... ... @@ -61,6 +66,21 @@
<el-option label="否" :value="1"></el-option>
</el-select>
</div>
<div v-else-if="prop == 'colComponents'">
<!-- 展示下拉选项 -->
<el-select placeholder="请选择" size="small" style="width: 100%"
@change="changeProperty(row,prop,column)" v-model="row.colComponents"
:multiple="false"
collapse-tags clearable filterable placeholder="请选择">
<el-option label="无" :value="''"></el-option>
<el-option label="资源名称" :value="'resNameComponents'"></el-option>
<el-option label="状态组件" :value="'statusComponents'"></el-option>
<el-option label="使用率组件" :value="'rateComponents'"></el-option>
</el-select>
</div>
<div v-else-if="['colType'].indexOf(prop) != -1">
<el-select placeholder="选择类型" size="small" style="width: 100%"
@change="getColType(row)" v-model="row.colType" :multiple="false"
... ... @@ -71,25 +91,27 @@
</el-option>
</el-select>
</div>
<div v-else-if="['colTypeQueryFields'].indexOf(prop) != -1">
<span v-if="Object.keys(fieldsObj).length == 0 || fieldsObj.propertyType == 'INPUT' || row.colType == 'INPUT'"> - </span>
<div v-else-if="['colTypeExtend'].indexOf(prop) != -1">
<span v-if="row.colType == '' || row.colType == null || row.colType == 'INPUT'"> - </span>
<el-select v-else-if="fieldsObj.propertyType == 'LIST'" placeholder="请选择扩展属性"
<el-select v-else-if="fieldsObj[row.colType] && fieldsObj[row.colType].propertyType == 'LIST'" placeholder="请选择扩展属性"
size="small" style="width: 100%"
@change="getColTypeExtVal(row)" v-model="row.colTypeQueryFields"
v-model="row.colTypeExtend"
:multiple="false"
collapse-tags clearable filterable placeholder="请选择">
<el-option v-for="(value,key) in fieldsObj.object" :key="index"
:label="value[fieldsObj.text]"
:value="value[fieldsObj.value]">
<el-option v-for="(value,key) in fieldsObj[row.colType].object" :key="index"
:label="value[fieldsObj[row.colType].text]"
:value="value[fieldsObj[row.colType].value]">
</el-option>
</el-select>
</div>
<div v-else-if="prop == 'colTypeVal'">
<span v-if="fieldsValueObj == undefined || fieldsValueObj[row.id] == undefined || Object.keys(fieldsValueObj) == 0"> - </span>
<el-button v-else icon="el-icon-setting" @click="showSettingCmDialog(true,row)" size="mini"
style="margin-left: 10px"></el-button>
<div v-else-if="prop == 'colTypeExtendProps'">
<span v-if="row.colType == '' || row.colType == null || row.colType == 'INPUT'"> - </span>
<el-button v-else @click="showSettingCmDialog(true,row)" size="mini"
style="margin-left: 10px"> <i class="el-icon-setting"></i></el-button>
</div>
<div v-else>
... ... @@ -109,7 +131,7 @@
<template #tools>
<el-table-column fixed="right" label="操作" width="80" align="center">
<template #default="scope">
<el-button type="text" size="small" @click.prevent="deleteRow(scope.$index)">
<el-button type="text" size="small" @click.prevent="deleteRow(row,scope.$index)">
<i class="el-icon-delete"/>
</el-button>
</template>
... ... @@ -136,4 +158,31 @@
</div>
</template>
</cm-dialog>
<cm-dialog :title="`${currentNode.label}类型属性配置`" width="500px" :showDialogVisible="treeNodeDialogFlg" @hidedialog="showTreeNodeDialog" @okfunc="saveTreeNodeConfig">
<template v-slot>
<el-form
label-width="120px"
ref="ruleForm"
:model="treeNodeForm"
:rules="treeNodeFormRules"
label-position="right"
label-width="120px">
<el-form-item label="配置信息" prop="name">
<el-input :size="$global.elementSize" v-model="treeNodeForm.options" clearable ></el-input>
</el-form-item>
<el-form-item label="详情页配置函数" prop="type">
<el-input :size="$global.elementSize" v-model="treeNodeForm.detailFunc" type="textarea" clearable></el-input>
</el-form-item>
<el-form-item label="查询视图" prop="sort">
<el-input :size="$global.elementSize" v-model="treeNodeForm.veiwName" clearable readonly></el-input>
</el-form-item>
</el-form>
</template>
</cm-dialog>
</div>
... ...
... ... @@ -2,7 +2,7 @@
* 配置页面编辑属性
* @returns {{editColProps: {}}}
*/
let configPageEdit = () => {
let configPageEdit = (columns, currentNode) => {
const {proxy} = Vue.getCurrentInstance();
// 编辑属性
let editColProps = Vue.ref({});
... ... @@ -33,13 +33,24 @@ let configPageEdit = () => {
* 时间：2021/10/27 14:34
*/
let getColType = (row) => {
// 获取属性标识的配置
let code = row.colType;
proxy.$http.get(`/api-web/v32/res/list/detail/col/${code}`, {}, function (res) {
if (res && res.object) {
fieldsObj.value = res.object;
row.colTypeQueryFields = '';
if (fieldsObj.value[code] && Object.keys(fieldsObj.value[code]).length > 0) {
row.colTypeExtend = '';
return;
}
let params = {
resTypeId: currentNode.value.id,
colType: row.colType,
colTypeExtendProps: row.colTypeExtendProps,
colTypeExtend: row.colTypeExtend
}
proxy.$http.get(`/api-web/v32/res/config/detail/colTypes`, params, function (res) {
if (res && res.map) {
fieldsObj.value = res.map;
}
});
}
... ... @@ -50,30 +61,55 @@ let configPageEdit = () => {
* 作者： Wang
* 时间：2021/10/27 14:34
*/
let getColTypeExtVal = (row) => {
let getColTypeExtVal = (flg, row) => {
let colTypeExtend = row.colTypeExtend;
let rowProps = row.colTypeExtendProps;
if(!colTypeExtend || colTypeExtend == '' || colTypeExtend == null){
proxy.$global.showMsg("请选择关联扩展属性！", "warning")
return;
}
if(fieldsValueObj.value[row.id] && Object.keys(fieldsValueObj.value[row.id]).length >0){
return;
}
// 获取属性标识的配置
let params = {
resTypeId: currentNode.value.id,
colType: row.colType,
colTypeQueryFields: row.colTypeQueryFields
colTypeExtendProps: rowProps,
colTypeExtend: colTypeExtend
}
proxy.$http.get(`/api-web/v32/res/list/detail/setting`, params, function (res) {
proxy.$http.get(`/api-web/v32/res/config/detail/setting`, params, function (res) {
if (res && res.object) {
fieldsValueObj.value[row.id] = res.object;
settingVal.value[row.id] = {};
let defVal = JSON.parse(rowProps);
if(defVal){
settingVal.value[row.id] = defVal;
} else {
settingVal.value[row.id] = {};
}
settingCmDialogFlg.value = flg;
} else {
proxy.$global.showMsg("该属性无需配置！", "warning")
}
});
}
let showSettingCmDialog = (flg, row) => {
settingCmDialogFlg.value = flg;
if (flg == true && row) {
currentRow.value = row;
// 记载已配置的属性
if(row.setting && row.setting[row.id]){
// 加载已配置的属性
if (row.setting && row.setting[row.id]) {
settingVal.value[row.id] = row.setting[row.id]
} else {
getColTypeExtVal(flg, row);
return;
}
}
settingCmDialogFlg.value = flg;
}
let getSettingDetail = () => {
... ... @@ -98,12 +134,76 @@ let configPageEdit = () => {
}
}
/**
* 展示配置属性
* <p>
* 作者： Wang
* 时间：2021/11/8 16:30
*/
const treeNodeConfig = (currentNode) => {
const {proxy} = Vue.getCurrentInstance();
let treeNodeDialogFlg = Vue.ref(false);
let treeNodeForm = Vue.ref({
options: '',
detailFunc: '',
veiwName: ''
});
let treeNodeFormRules = Vue.ref({});
/**
* 展示树节点配置
* <p>
* 作者： Wang
* 时间：2021/11/8 16:33
*/
let showTreeNodeDialog = (flg) => {
if (flg && flg == true && currentNode.value.map) {
treeNodeForm.value = {
id: currentNode.value.id,
options: currentNode.value.map.options,
detailFunc: currentNode.value.map.detailFunc,
veiwName: currentNode.value.map.veiwName
}
}
treeNodeDialogFlg.value = flg;
}
/**
* 保存树节点配置
*/
let saveTreeNodeConfig = () => {
proxy.$http.get(`/api-web/v32/res/config/saveTreeConfig`, treeNodeForm.value, function (res) {
if (res && res.success) {
proxy.$global.showMsg("保存成功！")
}
});
}
return {
treeNodeDialogFlg,
showTreeNodeDialog,
saveTreeNodeConfig,
treeNodeForm,
treeNodeFormRules
}
}
export default {
name: 'resConfigIndex',
template: '',
components: {
'property-edit': Vue.defineAsyncComponent(
() => myImport('components/page/assets/propertyedit/index')
'rateComponents': Vue.defineAsyncComponent(
() => myImport('components/page/res/rateComponents/index')
),
'resNameComponents': Vue.defineAsyncComponent(
() => myImport('components/page/res/resNameComponents/index')
),
'statusComponents': Vue.defineAsyncComponent(
() => myImport('components/page/res/statusComponents/index')
),
},
data() {
... ... @@ -114,7 +214,7 @@ export default {
}
}
},
setup() {
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
let height = Vue.ref((window.innerHeight - 10) * 0.8);
let currentNode = Vue.ref({});
... ... @@ -139,7 +239,16 @@ export default {
getSettingDetail,
currentRow,
settingVal
} = configPageEdit()
} = configPageEdit(columns, currentNode)
const {
treeNodeDialogFlg,
showTreeNodeDialog,
saveTreeNodeConfig,
treeNodeForm,
treeNodeFormRules
} = treeNodeConfig(currentNode);
// 获取左侧树结构
... ... @@ -147,11 +256,11 @@ export default {
proxy.$http.get("/api-web/v32/res/list/config/tree", {}, function (res) {
if (res && res.data) {
let arr = [];
res.data.forEach(function (v){
res.data.forEach(function (v) {
arr.push({
id:v.id,
label:v.label,
children:v.children
id: v.id,
label: v.label,
children: v.children
});
})
... ... @@ -171,7 +280,7 @@ export default {
treeNodeId: currentNode.value.id,
loadDefault: defList.value.length == 0 ? 1 : 0
}
proxy.$http.get(`/api-web/v32/res/list/config`, params, function (res) {
proxy.$http.get(`/api-web/v32/res/config/list`, params, function (res) {
if (res && res.object) {
columns.value = res.object.columns;
dataList.value = res.object.datas;
... ... @@ -179,6 +288,10 @@ export default {
let arr = res.object.defaultList;
if (arr && arr.length > 0) {
defList.value = arr;
// 加载一个数据的类型
getColType(arr[0]);
}
}
});
... ... @@ -191,8 +304,22 @@ export default {
* 作者： Wang
* 时间：2021/10/28 17:55
*/
let clickIndex = 0;
let handleConfigNodeClick = (data) => {
if (data) {
let isExistArr = dataList.value.filter(function (v) {
if (v.isAdd && v.isAdd == 1) {
return v;
}
})
if (isExistArr.length > 0) {
proxy.$global.confirm("有已添未保存的配置数据，是否清空？", function () {
currentNode.value = data;
getConfigData();
})
return;
}
currentNode.value = data;
getConfigData();
}
... ... @@ -218,6 +345,9 @@ export default {
data['isQuery'] = 1;
data['colIsTd'] = 1;
data['status'] = 0;
data['resListId'] = currentNode.value.id;
// 排序
data['colSort'] = 100;
// 新增状态
data['isAdd'] = 1;
... ... @@ -236,11 +366,56 @@ export default {
return;
}
// 添加
dataList.value.splice(0, 0, item);
let newData = {...item};
newData['resListId'] = currentNode.value.id;
dataList.value.splice(0, 0, newData);
}
// 保存
let saveConfig = () => {
console.log(dataList.value)
let arr = dataList.value;
if (arr.length == 0) {
proxy.$global.showMsg("请添加配置项！", 'warning');
return;
}
let msg = "";
arr.filter(function (v, i) {
if (v.colAlias == '' || v.colKey == '') {
msg += `请填写第${(i + 1)}行的属性名称或者标识！`
} else if (v.colWidth == '' || v.colWidth == null || v.colWidth < 0) {
msg += `第${(i + 1)}行的列宽不能为空或者小于0！`
} else if (v.colWidth == '' || v.colSort == null || v.colSort < 0) {
msg += `请填写第${(i + 1)}行的排序不能为空或者小于0！`
}
})
if (msg != '') {
proxy.$global.showMsg(msg, 'warning');
return;
}
// 保存时，将v['setting']转换为string
arr.forEach(function (v) {
v['setting'] = JSON.stringify(v['setting']);
})
/**
* 保存配置
* <p>
* 作者： Wang
* 时间：2021/11/9 15:19
*/
proxy.$http.post(`/api-web/v32/res/config/saveResTypeConfig/${currentNode.value.id}`, arr, function (res) {
if (res && res.success) {
proxy.$global.showMsg("保存成功！");
// 刷新当前列表数据
getConfigData();
} else {
proxy.$global.showMsg(res.msg && res.msg != '' ? res.msg : "保存成功！", "error");
}
});
}
/**
... ... @@ -249,11 +424,22 @@ export default {
* 作者： Wang
* 时间：2021/10/26 19:47
*/
let deleteRow = (index) => {
proxy.$global.confirm("确认删除该行配置吗？", function () {
dataList.value.splice(index, 1);
proxy.$global.showMsg("删除成功！")
let deleteRow = (row,index) => {
proxy.$global.confirm("确认删除该配置项吗？", function () {
if(row.isAdd && row.isAdd == 1){
proxy.$global.showMsg("删除成功！")
dataList.value.splice(index, 1);
} else {
// 删除配置项
proxy.$http.post(`/api-web/v32/res/config/deleteResTypeConfig/${row.id}`, {}, function (res) {
if (res && res.success) {
proxy.$global.showMsg("删除成功！");
dataList.value.splice(index, 1);
} else {
proxy.$global.showMsg(res.msg && res.msg != '' ? res.msg : "删除失败！", "error");
}
});
}
})
}
... ... @@ -286,7 +472,14 @@ export default {
showSettingCmDialog,
getSettingDetail,
currentRow,
settingVal
settingVal,
// 树节点配置
treeNodeDialogFlg,
showTreeNodeDialog,
saveTreeNodeConfig,
treeNodeForm,
treeNodeFormRules
}
}
}
... ...
... ... @@ -104,6 +104,12 @@ const routes = [{
path: '/zjdaping',
name: 'zjdaping',
component: () => myImport('views/zjdaping/index')
},
{
path: '/analysis',
name: 'analysis',
// component: () => myImport('views/analysis/components/addIndex/index')
component: () => myImport('views/analysis/components/add/index')
}
];
... ...
<div class="analysis-add-container">
<el-row>
<div class="add-top">
<el-row>
<el-col :span="16" class="add-top-title">
<el-button type="primary">这里是场景名称</el-button>
</el-col>
<el-col :span="8" class="add-top-select">
<el-dropdown>
<el-button type="primary">
时间范围<el-icon class="el-icon--right"><arrow-down /></el-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
<el-dropdown-item>Action 5</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-dropdown>
<el-button type="primary">
契合频率<el-icon class="el-icon--right"><arrow-down /></el-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
<el-dropdown-item>Action 5</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-button type="primary">保存按钮</el-button>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="classLine">
<lineChart></lineChart>
</div>
</el-col>
</el-row>
</div>
</el-row>
<el-row>
<div class="add-bottom">
<el-row>
<el-col :span="6" class="bottom-condition">
<el-row>
<el-col :span="24">
<el-dropdown>
<el-button >
电子税务局系统<el-icon class="el-icon--right"><arrow-down /></el-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
<el-dropdown-item>Action 5</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-dropdown>
<el-button >
资源类型<el-icon class="el-icon--right"><arrow-down /></el-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
<el-dropdown-item>Action 5</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-dropdown>
<el-button >
指标类型<el-icon class="el-icon--right"><arrow-down /></el-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
<el-dropdown-item>Action 5</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-input v-model="input" placeholder="Please input" />
</el-col>
</el-row>
</el-col>
<el-col :span="18">
<el-tabs type="border-card">
<el-tab-pane label="User">
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="date" label="Date" width="180" />
<el-table-column prop="name" label="Name" width="180" />
<el-table-column prop="address" label="Address" />
</el-table>
</el-tab-pane>
<el-tab-pane label="Config">Config</el-tab-pane>
<el-tab-pane label="Role">Role</el-tab-pane>
<el-tab-pane label="Task">Task</el-tab-pane>
</el-tabs>
</el-col>
</el-row>
</div>
</el-row>
</div>
\ No newline at end of file
... ...
export default {
name: 'addIndex',
template: '',
components:{},
data () {
return {
tableData: [
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
],
}
},
setup(){
}
}
\ No newline at end of file
... ...
<div class="analysis-index-container">
<div class="iconAdd">
点击添加比对分析
</div>
</div>
\ No newline at end of file
... ...
export default {
name: 'addIndex',
template: '',
components:{},
data () {
return {
}
},
setup(){
}
}
\ No newline at end of file
... ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
\ No newline at end of file
... ...
export default {
name: 'analysis',
template: '',
components:{},
data () {
return {
}
},
setup(){
}
}
\ No newline at end of file
... ...
... ... @@ -8,177 +8,165 @@ export default {
},
data(){
return {
titleFontSize:20,
domainName:sessionStorage.getItem('domainName'),
apiUrl:'/api-web/sxview/getBusinessAvailability',
resourceStatisticsData:'',
kpiIds:'KPI97B835A4,KPIFE85BE59,KPI7A29BAC3,KPIE7A7E3E4',
busId:'247c0c978f574285bf642f55611ea75d',
performanceData:'',
xAxisData:'',
yAxisData:'',
optionData:'',
ySeriesCommon:[],
titleFontSize: 30,
ySeriesCommon:[]
}
},
computed: {
comtitleTextStyle () {
return {
fontSize: this.titleFontSize / 1.2 + 'px'
fontSize: this.titleFontSize / 2.1 + 'px'
}
},
comtitleImgStyle () {
return {
height: this.titleFontSize * 2.1 + 'px'
height: this.titleFontSize * 1.8 + 'px'
}
}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
const xAxisData=Vue.ref();
const yAxisData=Vue.ref([]);
const legendData=Vue.ref([]);
// 半透明的颜色值
const colorArr1 = [
'rgba(151,213,244, 0.8)',
'rgba(239,224,167, 0.8)',
'rgba(229,171,209, 0.8)',
'rgba(151,170,255, 0.8)'
]
// 全透明的颜色值
const colorArr2 = [
'rgba(151,213,244, 0)',
'rgba(239,224,167, 0)',
'rgba(229,171,209, 0)',
'rgba(151,170,255, 0)'
]
// 挂载完
Vue.onMounted(() => {
proxy.screenAdapter();
proxy.getData();
})
const getData=()=> {
$.get(proxy.domainName + proxy.apiUrl, function (res) {
const getData=()=>{
let params = {
kpiIds: proxy.kpiIds,
busId: proxy.busId,
startTime:'',
endTime:'',
access_token:localStorage.getItem('access_token')
};
$.get(proxy.domainName +proxy.apiUrl,params,function (res) {
const data = res;
if (data && data.data) {
let resData = data.data;
if (data ) {
if(data.map){
let resData=data.map;
proxy.legendData=resData.legend;
proxy.xAxisData=resData.x;
proxy.yAxisData=resData.y;
}else{
let nullArr=[];
for(let i=0;i<4;i++){
nullArr.push(i)
proxy.legendData.push({
name:''
})
}
proxy.xAxisData=nullArr;
for(let i=0;i<4;i++){
proxy.yAxisData.push(nullArr);
}
}
proxy.optionInit();
}
// proxy.optionInit();
})
// proxy.optionInit();
proxy.optionInit();
}
const optionInit=()=>{
const optionInit=()=>{
let data3=[350, 350, 350, 350, 350, 350, 350];
let data4=[220, 182, 191, 234, 290, 330, 310];
let data2=[100, 100, 100, 100, 100, 100, 100];
let data1=[12.3, 7.56, 66.6, 5.44, 66.6, 5.44,6.52];
let data3=proxy.yAxisData[0];
let data4=proxy.yAxisData[3];
let data2=proxy.yAxisData[2];
let data1=proxy.yAxisData[1];
let min1=proxy.calMin([data1,data2]);
let max1=proxy.calMax([data1,data2]);
let min2=proxy.calMin([data3,data4]);
let max2=proxy.calMax([data3,data4]);
//业务双y轴数据
proxy.ySeriesCommon=[
{
name:'可用性',
type: 'line',
smooth:true,
// stack: 'Total',
show:false,
data:data3,
yAxisIndex:1,
showSymbol:false,
itemStyle : {
normal : {
color:"#97d5f4",//tooltip里的小圆点颜色
lineStyle:{
color:'#97d5f4',
width:1
}
}
},
areaStyle: {
// color:'rgba(151,213,244,0.4)',
normal:{
color:new echarts.graphic.LinearGradient(0, 0, 0, .6, [{ //关键在这里, 设置面积渐变
offset: 0,
color: '#97d5f4' //这里是我设置的渐变的颜色从线条颜色变为透明
}, {
offset: 1,
color: 'rgba(151,213,244,0.1)'
}])
}
},
},
{
name:'成功率',
type: 'line',
smooth:true,
// stack: 'Total',
show:false,
data:data1,
yAxisIndex:0,
showSymbol:false,
itemStyle : {
normal : {
color:"#efe0a7",//tooltip里的小圆点颜色
lineStyle:{
color:'#efe0a7',
width:1
}
}
},
areaStyle: {
color:'rgba(239,224,167,0)'
},
},
{
name:'响应率',
type: 'line',
smooth:true,
// stack: 'Total',
show:false,
data:data2,
yAxisIndex:0,
showSymbol:false,
itemStyle : {
normal : {
color:"#e5abd1",//tooltip里的小圆点颜色
lineStyle:{
color:'#e5abd1',
width:1
proxy.legendData.map((item,index)=>{
let i=0;
if(index%2==0 ||index%3==0){
i=0;
}else{
i=1;
}
proxy.ySeriesCommon.push(
{
name:item,
type: 'line',
smooth:true,
// stack: 'Total',
show:false,
data:proxy.yAxisData[index],
yAxisIndex:i,
showSymbol:false,
itemStyle : {
normal : {
color:colorArr1[index],//tooltip里的小圆点颜色
lineStyle:{
color:colorArr1[index],
width:1
}
}
}
},
areaStyle: {
color:'rgba(229,171,209,0)'
},
},
{
name:'交易量',
type: 'line',
smooth:true,
// stack: 'Total',
show:false,
data:data4,
yAxisIndex:1,
showSymbol:false,
itemStyle : {
normal : {
color:"#97aaff",//tooltip里的小圆点颜色
lineStyle:{
color:'#97aaff',
width:1,
},
areaStyle: {
// color:'rgba(151,213,244,0.4)',
normal:{
color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ //关键在这里, 设置面积渐变
offset: 0,
color: colorArr1[index] //这里是我设置的渐变的颜色从线条颜色变为透明
}, {
offset: 1,
color: colorArr2[index]
}])
}
}
},
areaStyle: {
color:'rgba(151,170,255,0)'
},
},
}
]
)
})
//业务双y轴数据
// let xAxisDataLength=proxy.ySeriesCommon[0].length;
let xAxisData=[];
for(let i=0;i<=24;i++){
if(i%4==0){
xAxisData.push(i+':00')
if(proxy.xAxisData){
proxy.xAxisData.map((item,index)=>{
if(index%20==0){
xAxisData.push(item)
}
})
}
}
let legendData=[];
$.each(proxy.ySeriesCommon,function (i,v){
legendData.push(v.name)
})
proxy.legendData=legendData;
proxy.optionData = {
title: {
text: ''
... ... @@ -308,6 +296,9 @@ export default {
calMin,
optionInit,
getData,
xAxisData,
yAxisData,
legendData,
screenAdapter
}
}
... ...
export default {
name: 'BandwidthCpu',
template: '',
props:['commandVal'],
components: {
'LineChart': Vue.defineAsyncComponent(
() => myImport('views/zjdaping/components/lineChart/index')
... ... @@ -8,28 +9,22 @@ export default {
},
data () {
return {
domainName:sessionStorage.getItem('domainName'),
apiUrl:'/api-web/bigScreen/monitoring?function=',
optionData:'',
allData: {
polyline: {
title: "带宽占用监控",
unit: "MB",
data: [{
name: "入带宽",
data: ["12","15","21","18","20","37","45","23","12","5","7","14"]
}, {
name: "出带宽",
data: ["22","35","41","68","70","57","45","33","24","15","7","10"]
}]
},
xAxis: {
today: ["00", "02", "04", "06", "08", "10", "12", "14", "16", "18", "20", "22"]
}
},
allData: '',
newCommandVal:this.commandVal,
startValue: 0, // 区域缩放的起点值
endValue: 6, // 区域缩放的终点值
timerId: null // 定时器的标识
}
},
setUp(){
const allData=ref({});
return{
allData
}
},
mounted () {
this.getData()
window.addEventListener('resize', this.screenAdapter)
... ... @@ -39,15 +34,60 @@ export default {
window.removeEventListener('resize', this.screenAdapter)
clearInterval(this.timerId)
},
watch:{
commandVal(newValue, oldValue) {
this.newCommandVal=newValue
this.getData()
}
},
methods: {
async getData () {
// await this.$http.get()
// const { data: ret } = await this.$http.get('bandwidthcpu')
// this.allData = ret
// console.log(ret)
this.updateChart()
this.startInterval()
getData () {
let that=this;
$.get(this.domainName +this.apiUrl+this.newCommandVal,function (ret){
if(ret){
let dataArr=[];
let xAxisData=[];
if(ret.ports && ret.ports.length>1 ){
ret.ports.map((item,index)=>{
dataArr.push({
name:item.name,
data:item.data.y,
})
})
xAxisData=ret.ports[0].x
}else{
for(let i=0;i<12;i++){
dataArr.push('0')
}
}
that.allData= {
polyline: {
title: "带宽占用监控",
unit: "MB",
data:dataArr
/*data: [{
name: "入带宽",
data: ["12","15","21","18","20","37","45","23","12","5","7","14"]
}, {
name: "出带宽",
data: ["22","35","41","68","70","57","45","33","24","15","7","10"]
}]*/
},
xAxis: {
// today: ["00", "02", "04", "06", "08", "10", "12", "14", "16", "18", "20", "22"]
today: xAxisData
}
}
that.updateChart()
that.startInterval()
}
})
},
updateChart () {
// 半透明的颜色值
... ...
... ... @@ -84,7 +84,6 @@ export default {
})
this.allData = retData
console.log('111',this.allData)
this.updateChart()
},
updateChart () {
... ... @@ -92,18 +91,27 @@ export default {
['22%', '65%'],
['66%', '65%']
]
const seriesArr = this.allData.map((item, index) => {
const dataArr = []
item.data.map(inner => {
console.log(inner)
if(item.data){
item.data.map(inner => {
dataArr.push({
name: inner.name,
value: inner.num,
/*itemStyle: {
color: this.colorData[index]
}*/
})
})
}else{
dataArr.push({
name: inner.name,
value: inner.num,
/*itemStyle: {
color: this.colorData[index]
}*/
name: '暂无数据',
value: 0
})
})
}
return {
type: 'pie',
radius: ['28%', '42%'],
... ... @@ -122,8 +130,6 @@ export default {
data: dataArr
}
})
console.log("8**",seriesArr)
const dataOption = {
series: seriesArr
}
... ...
... ... @@ -16,10 +16,10 @@ export default {
unit: "cpu%",
data: [{
name: "80.12.97.2",
data: ["12","15","21","18","20","37","45","23","12","5","7","14"]
datas: ["12","15","21","18","20","37","45","23","12","5","7","14"]
}, {
name: "80.12.77.3",
data: ["22","35","41","68","70","57","45","33","24","15","7","10"]
datas: ["22","35","41","68","70","57","45","33","24","15","7","10"]
}]
},
xAxis: {
... ... @@ -30,6 +30,9 @@ export default {
endValue: 9, // 区域缩放的终点值
timerId: null, // 定时器的标识
titleFontSize: 30,
kpiIds:'KPI20352505',
resId:'4c582c0603654352ba4f905e88a56863',
resId1:'adeeddd6023a4157be523ac5d3b60ed6',
curve: 'KPIDA0ACBBP',
rateTitle: 'KPIDA0ACBBK',
... ... @@ -49,23 +52,81 @@ export default {
clearInterval(this.timerId)
},
methods: {
getData (that) {
getData1(that){
const { proxy } = Vue.getCurrentInstance();
/* var params = {
curve: that.curve,
rateTitle: that.rateTitle,
numerTitle: that.numerTitle
var params = {
resId: that.resId1,
kpiIds: that.kpiIds,
subResId: 'vmem',
startTime:'',
endTime:'',
access_token:localStorage.getItem("access_token")
};
proxy.$http.get("/api-web/bigScreen/declarePolyline", params, function (res) {
if(res.success){
console.log('9**',res.obj)
that.allData = res.obj;
// proxy.$http.get("/api-web/detail/his/line/base", params, function (res) {
var res={
code:'0',
data:{
kpiUnit:'%',
names:['20:10','21:10','22:15','23:15'],
series:[
{
name:'89.12.97.3',
datas:[0.8,1,1,1,1,0.7,1,1],
flag:'vmem'
}
]
}
}
if(res && res.data){
let resData=res.data;
that.allData.polyline.data.push(resData.series)
that.updateChart()
}
});*/
that.updateChart()
// });
},
getData (that) {
const { proxy } = Vue.getCurrentInstance();
var params = {
resId: that.resId,
kpiIds: that.kpiIds,
subResId: 'vmem',
startTime:'',
endTime:'',
access_token:localStorage.getItem("access_token")
};
// proxy.$http.get("/api-web/detail/his/line/base", params, function (res) {
var res={
code:'0',
data:{
kpiUnit:'%',
names:['20:10','21:10','22:15','23:15'],
series:[
{
name:'89.12.97.2',
datas:[1,1,1,1,1,1,1,1],
flag:'vmem'
}
]
}
}
if(res && res.data){
let resData=res.data;
that.allData = {
polyline: {
title: "申报库CPU监控",
unit: "cpu%",
data: resData.series
},
xAxis: {
today:resData.names
}
};
that.getData1(that)
}
// });
},
updateChart () {
... ... @@ -89,15 +150,16 @@ export default {
]
const timeArr = this.allData.xAxis.today
const seriesArr = this.allData.polyline.data;
const title=this.allData.polyline.title;
const unit=this.allData.polyline.unit;
this.declareNumer = this.allData.polyline.declareNumer
let seriesData=[];
$.each(seriesArr,function (index,item){
seriesData .push({
name: item.name,
type: 'line',
data: item.data,
data: item.datas,
smooth: true,
showSymbol:false,
itemStyle : {
... ... @@ -137,7 +199,7 @@ export default {
let xAxisData=timeArr;
this.optionData = {
title: {
text: '申报库CPU监控',
text: title,
left: 'center',
bottom: '8%',
textStyle: {
... ...
... ... @@ -87,7 +87,6 @@ export default {
};
proxy.$http.get("/api-web/bigScreen/declarePolyline", params, function (res) {
if(res.success){
console.log('9**',res.obj)
that.allData = res.obj;
that.updateChart()
// that.startInterval()
... ... @@ -158,9 +157,10 @@ export default {
},
grid: {
top:'3%',
left: '3%',
right: '4%',
bottom: '3%',
bottom: '2%',
containLabel: true,
},
xAxis: {
... ...
<div class="declare-report">
<div class="declare-report-top" :style="comtitlesizeStyle">
<div class="declare-report" >
<div class="declare-report-top" :style="comtitlesizeStyle" id="declareReport_ref">
<el-row>
<el-col :span="24">
<div class="grid-content bg-purple-dark">
... ...
export default {
name: 'declarePolyline',
name: 'declareReport',
template: '',
components: {},
data () {
... ... @@ -19,27 +19,29 @@ export default {
comtitletextStyle () {
return {
color: '#23ffff',
fontSize: this.titleFontSize / 1.2 + 'px'
fontSize: this.titleFontSize * 3 + 'px'
}
},
comtitlesizeStyle () {
return {
fontSize: this.titleFontSize / 2 + 'px'
fontSize: this.titleFontSize *2 + 'px'
}
},
comimgsizeStyle () {
return {
width: this.titleFontSize / 1.5 + 'px'
width: this.titleFontSize * 3 + 'px'
}
},
comboxtextStyle () {
return {
fontSize: this.titleFontSize / 3 + 'px'
fontSize: this.titleFontSize * 2 + 'px'
}
}
},
mounted () {
this.getData(this)
window.addEventListener('resize', this.screenAdapter)
this.screenAdapter()
},
methods: {
... ... @@ -52,7 +54,6 @@ export default {
};
proxy.$http.get("/api-web/bigScreen/declarePolyline", params, function (res) {
if(res.success){
console.log('111',res.obj)
that.allData = res.obj;
const declareRate = that.allData.polyline.declareRate
if(declareRate.indexOf('.') > 0){
... ... @@ -65,6 +66,9 @@ export default {
}
});
},
screenAdapter () {
this.titleFontSize = document.getElementById('declareReport_ref').offsetWidth / 100 * 3.6
}
}
... ...
... ... @@ -6,7 +6,7 @@ export default {
return {
chartInstance: null,
allData: null,
titleFontSize: 30,
titleFontSize: 20,
// 扣款金额
deductionAmount: '0.00',
// 扣款笔数
... ... @@ -19,41 +19,41 @@ export default {
computed: {
comboximgleftStyle () {
return {
height: this.titleFontSize * 12.5 + 'px',
height: this.titleFontSize *10 + 'px',
// marginTop: this.titleFontSize * 3.5 + 'px',
// marginLeft: this.titleFontSize + 'px'
}
},
comboximgrightStyle () {
return {
height: this.titleFontSize * 12.5 + 'px',
height: this.titleFontSize *10 + 'px',
// marginTop: this.titleFontSize * 3.5 + 'px'
}
},
comcontextStyle () {
return {
fontSize: this.titleFontSize *3.5 + 'px'
fontSize: this.titleFontSize + 'px'
}
},
comtitlesizeStyle () {
return {
height: this.titleFontSize * 8.5 + 'px',
height: this.titleFontSize * 7 + 'px',
// width: this.titleFontSize * 6 + 'px'
}
},
comtitleTextStyle () {
return {
fontSize: this.titleFontSize *3.3 + 'px'
fontSize: this.titleFontSize /1.3 + 'px'
}
},
comnumberTextStyle () {
return {
fontSize: this.titleFontSize *3.2 + 'px'
fontSize: this.titleFontSize /0.5 + 'px'
}
},
comnumberUnitStyle () {
return {
fontSize: this.titleFontSize * 2 + 'px'
fontSize: this.titleFontSize / 0.6 + 'px'
}
}
},
... ...
... ... @@ -6,8 +6,8 @@
<div class="grid-content bg-purple" style="text-align:left;">
<span >
<!--title_box_1.png-->
<img :style="comTitleimgStyle" src="./src/assets/img/title_box_middle.png">
<span class="span-box-title" :style="comTitleSizeStyle">{{leftTitle}}</span>
<img :style="comTitleimgStyle" src="./src/assets/images/digitalDp/title-report-month-1.png">
<!-- <span class="span-box-title" :style="comTitleSizeStyle">{{leftTitle}}</span>-->
</span>
</div>
</el-col>
... ...
... ... @@ -39,17 +39,17 @@ export default {
computed: {
comboximgStyle () {
return {
height: this.titleFontSize * 4.5 + 'px'
height: this.titleFontSize * 4.3 + 'px'
}
},
comTitleimgStyle () {
return {
width: this.titleFontSize * 12 + 'px'
width: this.titleFontSize * 10 + 'px'
}
},
comTitleSizeStyle () {
return {
fontSize: this.titleFontSize / 1.5 + 'px'
fontSize: this.titleFontSize / 1.6 + 'px'
}
},
comtitlimgStyle () {
... ... @@ -153,7 +153,6 @@ export default {
};
proxy.$http.get("/api-web/bigScreen/digitalBoardData", params, function (res) {
if(res.success){
console.log(res.map)
const map = res.map
// 左边数
if(map.leftNumber){
... ... @@ -194,7 +193,6 @@ export default {
let xs = num[1]
// 整数部分处理，增加,
const intPartFormat = zs.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
console.log("444",intPartFormat)
if (xs != null) {
if(places == 0){
return intPartFormat + '.' + xs
... ...
... ... @@ -6,8 +6,8 @@
<div class="grid-content bg-purple" style="text-align:left;">
<span>
<!--title_box_1.png-->
<img :style="comTitleimgStyle" src="./src/assets/img/title_box_middle.png">
<span class="span-box-title" :style="comTitleSizeStyle">{{leftTitle}}</span>
<img :style="comTitleimgStyle" src="./src/assets/images/digitalDp/title-report-today.png">
<!-- <span class="span-box-title" :style="comTitleSizeStyle">{{leftTitle}}</span>-->
</span>
</div>
</el-col>
... ...
... ... @@ -39,17 +39,17 @@ export default {
computed: {
comboximgStyle () {
return {
height: this.titleFontSize * 4.5 + 'px'
height: this.titleFontSize * 4.3 + 'px'
}
},
comTitleimgStyle () {
return {
width: this.titleFontSize * 12 + 'px'
width: this.titleFontSize * 10 + 'px'
}
},
comTitleSizeStyle () {
return {
fontSize: this.titleFontSize / 1.5 + 'px'
fontSize: this.titleFontSize / 1.6 + 'px'
}
},
comtitlimgStyle () {
... ... @@ -153,15 +153,12 @@ export default {
};
proxy.$http.get("/api-web/bigScreen/digitalBoardData", params, function (res) {
if(res.success){
console.log(res.map)
const map = res.map
// 左边数
console.log(map.leftNumber)
if(map.leftNumber){
that.declaredAmountNumber = map.leftNumber
}
// 右边数
console.log(map.rightNumber)
if(map.rightNumber){
that.undeclaredAmountNumber = that.numberFilter(map.rightNumber,-1)
}
... ... @@ -196,7 +193,6 @@ export default {
let xs = num[1]
// 整数部分处理，增加,
const intPartFormat = zs.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
console.log("444",intPartFormat)
if (xs != null) {
if(places == 0){
return intPartFormat + '.' + xs
... ...
<div class="com-container" id="responsemonitor_ref">
<div class="cpu-dropdown">
<el-dropdown @command="handleCommand" >
<span class="el-dropdown-link">
请选择
<i class="icon-arrow"></i>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="max">最大值</el-dropdown-item>
<el-dropdown-item command="ave">平均值</el-dropdown-item>
<el-dropdown-item command="min">最小值</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
<!-- <div class="com-chart" id="responsemonitor_ref"></div>-->
<LineChart :optionData="optionData" v-if="optionData"></LineChart>
<LineChart :optionData="optionData" v-if="optionData" ref="responseLine"></LineChart>
</div>
\ No newline at end of file
... ...
export default {
name: 'ResponseMonitor',
template: '',
props:['commandVal'],
components: {
'LineChart': Vue.defineAsyncComponent(
() => myImport('views/zjdaping/components/lineChart/index')
... ... @@ -8,28 +9,28 @@ export default {
},
data () {
return {
domainName:sessionStorage.getItem('domainName'),
apiUrl:'/api-web/bigScreen/monitoring?function=',
optionData:'',
titleFontSize:'30',
allData: {
polyline: {
title: "系统响应请求数监控",
unit: "MB",
data: {
name: "请求相应数/秒",
data: ["1200","1500","2100","1800","2000","3700","4500","2300","1200","500","700","140"]
}
},
xAxis: {
today: ["00", "02", "04", "06", "08", "10", "12", "14", "16", "18", "20", "22"]
}
},
allData: '',
newCommandVal:this.commandVal,
startValue: 0, // 区域缩放的起点值
endValue: 6, // 区域缩放的终点值
timerId: null // 定时器的标识
}
},
setUp(){
const allData=ref({});
// const commandVal=ref();
// const optionData=ref({});
return{
allData,
// optionData
// commandVal
}
},
mounted () {
this.initChart()
this.getData()
window.addEventListener('resize', this.screenAdapter)
this.screenAdapter()
... ... @@ -38,53 +39,54 @@ export default {
window.removeEventListener('resize', this.screenAdapter)
clearInterval(this.timerId)
},
watch:{
commandVal(newValue, oldValue) {
this.newCommandVal=newValue
this.getData()
}
},
methods: {
initChart () {
/* this.chartInstance = echarts.init(document.getElementById('responsemonitor_ref'))
const initOption = {
grid: {
top: '15%',
left: '5%',
right: '4%',
bottom: '3%',
containLabel: true
},
legend: {
right: '2%',
top: '5%'
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLabel: {
textStyle: {
color: '#E6E8EB'
}
getData () {
let that=this;
// await this.$http.get()
// const { data: ret } = await proxy.$http.get('bigScreen/monitoring?function=')
$.get(this.domainName +this.apiUrl+this.newCommandVal,(ret)=>{
if(ret){
let dataArr=[];
let xAxisData='';
if(ret.concurrence){
dataArr=ret.concurrence.data.y
xAxisData=ret.concurrence.data.x
}else{
for(let i=0;i<12;i++){
dataArr.push('0')
}
},
yAxis: {
type: 'value',
splitLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#E6E8EB'
}
that.allData= {
polyline: {
title:"系统响应请求数监控",
unit: "MB",
data: {
name: "请求相应数/秒",
data: dataArr
}
},
xAxis: {
// today: ["10", "02", "04", "06", "08", "10", "12", "14", "16", "18", "20", "22"]
today:xAxisData
}
}
that.updateChart()
that.startInterval()
}
this.chartInstance.setOption(initOption)*/
},
async getData () {
// await this.$http.get()
// const { data: ret } = await this.$http.get('responsemonitor')
// this.allData = ret
// console.log(ret)
this.updateChart()
this.startInterval()
})
},
updateChart () {
console.log("ddd",this.allData)
// 半透明的颜色值
const colorArr1 = [
'rgba(11, 168, 44, 0.5)',
... ... @@ -106,7 +108,6 @@ export default {
const timeArr = this.allData.xAxis.today
const seriesData = this.allData.polyline.data.data
const seriesName = this.allData.polyline.data.name
console.log(seriesName)
// 图例的数据
// const legendArr = this.allData.polyline.data.map(item => {
// return item.name
... ... @@ -205,6 +206,7 @@ export default {
};
},
screenAdapter () {
this.titleFontSize = document.getElementById('responsemonitor_ref').offsetWidth / 100 * 3.6
const adapterOption = {
... ...
... ... @@ -138,7 +138,6 @@ export default {
kpiIdValue: that.kpiIdValue
};
proxy.$http.get("/api-web/bigScreen/topFive", params, function (res) {
console.log(res.data)
if(res.success){
that.allData = res.data
that.updateChart()
... ...
<div class="screen-container" id="bgscreen_ref">
<header class="screen-header" :style="screenheaderStyle">
<div>
<img style="width: 100%" src="/vue3/src/assets/images/digitalDp/header_border_dark.png" alt="">
<img style="width: 100%" src="/vue3/src/assets/images/digitalDp/head-bg.png" alt="">
</div>
<span class="title" :style="titleStyle">浙江省电子税务局系统监控大屏</span>
<!-- <span class="title" :style="titleStyle">浙江省电子税务局系统监控大屏</span>-->
<div class="title-left">
<img src="/vue3/src/assets/img/time-icon.png" :style="timelogoStyle" class="timelog">
<img src="/vue3/src/assets/images/digitalDp/icon-time.png" :style="timelogoStyle" class="timelog">
<span :style="datetimeStyle" >{{dateTime}}</span>
</div>
</header>
... ... @@ -66,8 +66,24 @@
<Availability></Availability>
</div>
<div id="right-bottom">
<div class="cpu-dropdown">
<el-dropdown @command="handleCommand" >
<span class="el-dropdown-link">
{{commandName}}
<i class="icon-arrow"></i>
</span>
<template #dropdown>
<el-dropdown-menu class="cpuDropdown">
<el-dropdown-item command="max">最大值</el-dropdown-item>
<el-dropdown-item command="avg">平均值</el-dropdown-item>
<el-dropdown-item command="min">最小值</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
<!-- 系统响应监控 折线 -->
<ResponseMonitor></ResponseMonitor>
<ResponseMonitor :commandVal="commandVal" ref="responseRef"></ResponseMonitor>
</div>
</section>
</div>
... ... @@ -87,7 +103,7 @@
</div>
<div id="bottom-four">
<!-- 带宽占用监控 折线 -->
<BandwidthCpu></BandwidthCpu>
<BandwidthCpu :commandVal="commandVal" ref="bandwidthRef" ></BandwidthCpu>
</div>
</section>
</div>
... ...
... ... @@ -52,7 +52,9 @@ export default {
return {
titleFontSize: 30,
dateTime: '00-00-00 00:00:00',
colorData:['#0D45FE','#00FFB9','#A35CFF']
colorData:['#0D45FE','#00FFB9','#A35CFF'],
commandName:'最大值',
commandVal:'max'
}
},
computed: {
... ... @@ -85,6 +87,21 @@ export default {
},
timeFormat (number) {
return number.length == 1 ? ('0' + number) : number
},
handleCommand(command){
console.log("newVal",command)
this.commandVal=command;
console.log("ne",this.commandVal)
if(command=='max'){
this.commandName="最大值";
}else if(command=='min'){
this.commandName="最小值";
}else{
this.commandName="平均值";
}
// this.$refs.responseRef.getData();
// this.$refs.bandwidthRef.getData();
}
},
mounted () {
... ...
... ... @@ -32,8 +32,8 @@
:showBorder="true" :currentPage="currentPage" :total="total" :loading="false"
:showPage="true" :height="(height - 95)">
<template #default="{row,prop,column}">
<a href="javascript:void(0)" v-if="prop == 'resPositon' || prop == 'cabinetNo'" style="border-bottom: solid 1px blue;margin-bottom: 3px;height: 30px;font-size: 15px;" @click="cellClick(row,prop,column)">{{row[prop]}}</a>
<el-link v-else :underline="false" @click="item.click(scope.row)">{{row[prop]}}</el-link>
<a href="javascript:void(0)" v-if="prop == 'resPositon' || prop == 'cabinetNo'" style="border-bottom: solid 1px blue;margin-bottom: 3px;height: 30px;font-size: 15px;" @click="cellClick(row,prop,column)">{{row[prop].value}}</a>
<el-link v-else :underline="false" @click="item.click(scope.row)">{{row[prop].value}}</el-link>
</template>
</cm-table-page>
</div>
... ...
... ... @@ -11,8 +11,6 @@ const configPage = () => {
dialogFlg.value = flg;
}
return {
showConfig: dialogFlg,
configObj:configPage,
... ... @@ -20,7 +18,6 @@ const configPage = () => {
}
}
export default {
name: 'resIndex',
template: '',
... ... @@ -28,6 +25,15 @@ export default {
'res-config': Vue.defineAsyncComponent(
() => myImport('components/page/res/treeconfig/index')
),
'rateComponents': Vue.defineAsyncComponent(
() => myImport('components/page/res/rateComponents/index')
),
'resNameComponents': Vue.defineAsyncComponent(
() => myImport('components/page/res/resNameComponents/index')
),
'statusComponents': Vue.defineAsyncComponent(
() => myImport('components/page/res/statusComponents/index')
),
},
data() {
return {
... ...
... ... @@ -40,21 +40,15 @@
<div class="declare-title">
<div class="declare-bg volume-today"></div>
</div>
<div class="volume-today-container" v-for="(item,index) in volumeData">
<div v-if="volumdData" class="volume-today-container" v-for="(item,index) in volumeData">
<span class="volume-text">{{item.name}}</span>
<span :class="['volume-proportion',{'volume-proportion-doc':index==1,'volume-proportion-net':index==2}]" :style="item.styleVolume"></span>
<span class="volume-num">{{item.num1}}</span>
</div>
<!-- <div class="volume-today-container">
<span class="volume-text">涉税文书</span>
<span class="volume-proportion volume-proportion-doc" :style="styleVolumeDoc"></span>
<span class="volume-num num-doc">{{volumeNumDoc}}</span>
<div class="volume-today-container" v-else style="justify-content: center;">
<span>暂无数据</span>
</div>
<div class="volume-today-container">
<span class="volume-text">网上申报</span>
<span class="volume-proportion volume-proportion-net" :style="styleVolumeNet"></span>
<span class="volume-num num-net">{{volumeNumNet}}</span>
</div>-->
</div>
</div>
<div class="declare-right">
... ...
... ... @@ -74,7 +74,6 @@ export default {
})
const optionInit=()=>{
console.log("3232",proxy.ySeriesCommon)
let xAxisDataLength=proxy.ySeriesCommon[0].length;
let xAxisData=[];
for(let i=1;i<=xAxisDataLength;i++){
... ...
... ... @@ -8,100 +8,122 @@ export default {
data(){
return {
domainName:'http://192.168.0.245:8180/api-web',
myChart:'',
titleFontSize:30,
yAxisData:'',//y序列的数据
seriesData:[],//y轴数据
newOptionData:this.optionData,
chartId:'line-echart'
}
},
watch:{
optionData(newValue,oldValue){
this.newOptionData=newValue
this.chartSetOption()
}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
// 挂载完
Vue.onMounted(() => {
/*$.get(proxy.domainName,function(res){
proxy.chartSetOption()
})*/
/* proxy.yAxisData=props.yAxisData;
proxy.seriesData=props.seriesData;
proxy.chartId=props.chartId;
// const chartDom = document.getElementById('line-echart-declare');
console.log("**!/",proxy.seriesData)
let xAxisDataLength=proxy.seriesData[0].data.length;
let xAxisData=[];
for(let i=1;i<=xAxisDataLength;i++){
xAxisData.push(i)
}*/
})
const chartSetOption=()=>{
const chartDom=proxy.$el
const myChart = echarts.init(chartDom);
proxy.myChart=myChart;
/* window.addEventListener('resize', proxy.screenAdapter)
proxy.screenAdapter()*/
let option=props.optionData;
console.log("testLIne0",chartDom,option)
/* option = {
title: {
text: ''
},
tooltip: {
trigger: 'axis',
backgroundColor:'rgba(50,50,50,0.7)',
borderColor:"#333",
textStyle:{
color:"#fff",
align:'left'
}
/* option = {
title: {
text: ''
},
tooltip: {
trigger: 'axis',
backgroundColor:'rgba(50,50,50,0.7)',
borderColor:"#333",
textStyle:{
color:"#fff",
align:'left'
}
},
legend: {
data: props.legendData,
itemHeight:0,//图例圆圈大小设置
y:'7px',
textStyle: {
color: '#ffffff',
fontsize:"12px"
}
},
legend: {
data: props.legendData,
itemHeight:0,//图例圆圈大小设置
y:'7px',
textStyle: {
color: '#ffffff',
fontsize:"12px"
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
/!*toolbox: {
feature: {
saveAsImage: {}
}
},*!/
xAxis: {
type: 'category',
boundaryGap: false,
data: xAxisData,
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
/!*toolbox: {
feature: {
saveAsImage: {}
}
},*!/
xAxis: {
type: 'category',
boundaryGap: false,
data: xAxisData,
axisLine:{
show:false,//是否显示坐标线
},
axisTick: {
show: false //是否显示坐标刻度
},
axisLabel:{
color:'#ffffff',
},
axisLine:{
show:false,//是否显示坐标线
},
axisTick: {
show: false //是否显示坐标刻度
},
axisLabel:{
color:'#ffffff',
},
},
yAxis: proxy.yAxisData,
series: proxy.seriesData,
itemStyle:{
showSymbol:false
}
};*/
},
yAxis: proxy.yAxisData,
series: proxy.seriesData,
itemStyle:{
showSymbol:false
}
};*/
option && myChart.setOption(option);
}
})
const screenAdapter= ()=> {
proxy.titleFontSize = proxy.myChart.offsetWidth / 100 * 3.6
const adapterOption = {
legend: {
itemWidth: proxy.titleFontSize,
itemHeight: proxy.titleFontSize,
itemGap: proxy.titleFontSize,
textStyle: {
fontSize: proxy.titleFontSize / 2
}
}
}
proxy.myChart.setOption(adapterOption)
proxy.myChart.resize()
}
return{
chartSetOption,
screenAdapter
}
},
unmounted () {
// window.removeEventListener('resize', this.screenAdapter)
}
}
\ No newline at end of file
... ...
... ... @@ -10,13 +10,31 @@ export default {
return {
domainName:sessionStorage.getItem('domainName'),
apiUrl:'/api-web/sxview/getBusinessAvailability',
resourceStatisticsData:'',
kpiIds:'KPI97B835A4,KPIFE85BE59,KPI7A29BAC3,KPIE7A7E3E4',
busId:'247c0c978f574285bf642f55611ea75d',
performanceData:'',
xAxisData:'',
yAxisData:'',
optionData:'',
ySeriesCommon:[]
}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
// 半透明的颜色值
const colorArr1 = [
'rgba(151,213,244, 0.8)',
'rgba(239,224,167, 0.8)',
'rgba(229,171,209, 0.8)',
'rgba(151,170,255, 0.8)'
]
// 全透明的颜色值
const colorArr2 = [
'rgba(151,213,244, 0)',
'rgba(239,224,167, 0)',
'rgba(229,171,209, 0)',
'rgba(151,170,255, 0)'
]
// 挂载完
... ... @@ -25,33 +43,88 @@ export default {
})
const getData=()=>{
$.get(proxy.domainName +proxy.apiUrl,function (res) {
let params = {
kpiIds: proxy.kpiIds,
busId: proxy.busId,
startTime:'',
endTime:'',
access_token:localStorage.getItem('access_token')
};
$.get(proxy.domainName +proxy.apiUrl,params,function (res) {
const data = res;
if (data && data.data) {
let resData=data.data;
console.log("ttttt",data)
if (data && data.map) {
let resData=data.map;
proxy.legendData=resData.legend;
proxy.xAxisData=resData.x;
proxy.yAxisData=resData.y;
}
// proxy.optionInit();
proxy.optionInit();
})
proxy.optionInit();
// proxy.optionInit();
}
const optionInit=()=>{
let data3=[350, 350, 350, 350, 350, 350, 350];
let data3=proxy.yAxisData[0];
let data4=[220, 182, 191, 234, 290, 330, 310];
let data2=[100, 100, 100, 100, 100, 100, 100];
let data1=[12.3, 7.56, 66.6, 5.44, 66.6, 5.44,6.52];
let data2=proxy.yAxisData[2];
let data1=proxy.yAxisData[1];
let min1=proxy.calMin([data1,data2]);
let max1=proxy.calMax([data1,data2]);
let min2=proxy.calMin([data3,data4]);
let max2=proxy.calMax([data3,data4]);
proxy.legendData.map((item,index)=>{
let i=0;
if(index%2==0 ||index%3==0){
i=0;
}else{
i=1;
}
proxy.ySeriesCommon.push(
{
name:item,
type: 'line',
smooth:true,
// stack: 'Total',
show:false,
data:proxy.yAxisData[index],
yAxisIndex:i,
showSymbol:false,
itemStyle : {
normal : {
color:colorArr1[index],//tooltip里的小圆点颜色
lineStyle:{
color:colorArr1[index],
width:1
}
}
},
areaStyle: {
// color:'rgba(151,213,244,0.4)',
normal:{
color:new echarts.graphic.LinearGradient(0, 0, 0, .6, [{ //关键在这里, 设置面积渐变
offset: 0,
color: colorArr1[index] //这里是我设置的渐变的颜色从线条颜色变为透明
}, {
offset: 1,
color: colorArr2[index]
}])
}
},
},
)
})
//业务双y轴数据
proxy.ySeriesCommon=[
/* proxy.ySeriesCommon=[
{
name:'可用性',
name:proxy.legendData[0],
type: 'line',
smooth:true,
// stack: 'Total',
... ... @@ -83,7 +156,7 @@ export default {
},
},
{
name:'成功率',
name:proxy.legendData[1],
type: 'line',
smooth:true,
// stack: 'Total',
... ... @@ -148,20 +221,18 @@ export default {
color:'rgba(151,170,255,0)'
},
}
]
]*/
// let xAxisDataLength=proxy.ySeriesCommon[0].length;
let xAxisData=[];
for(let i=0;i<=24;i++){
if(i%4==0){
xAxisData.push(i+':00')
if(proxy.xAxisData){
proxy.xAxisData.map((item,index)=>{
if(index%20==0){
xAxisData.push(item)
}
})
}
}
let legendData=[];
$.each(proxy.ySeriesCommon,function (i,v){
legendData.push(v.name)
})
proxy.legendData=legendData;
proxy.optionData = {
title: {
text: ''
... ... @@ -187,9 +258,10 @@ export default {
},
grid: {
top:'2%',
left: '3%',
right: '4%',
bottom: '3%',
// bottom: '3%',
containLabel: true,
},
xAxis: {
... ...