monitor_v3 / anji-plus-report · Commits

Go to a project

Authored by 鲁尚清
Commit 7fcdc1d59fa6c044a631754f53fb255d6f41478e 1 parent 878f73c6

仪表盘数据增加点击事件-自定义文本点击事件

Inline Side-by-side
Showing 6 changed files with 298 additions and 46 deletions
@@ -77,15 +77,23 @@ @@ -77,15 +77,23 @@
77 /> 77 />
78 </el-form-item> 78 </el-form-item>
79 <el-form-item label="关联组件:"> 79 <el-form-item label="关联组件:">
80 - <el-select v-model.trim="rowFormData['componentName']" size="small">  
81 - <el-option  
82 - v-for="item in componentNameData"  
83 - :key="item.value"  
84 - :label="item.label"  
85 - :value="item.value"  
86 - >  
87 - </el-option>  
88 - </el-select> 80 + <div class="flex-start">
  81 + <el-select v-model.trim="rowFormData['componentName']" size="small">
  82 + <el-option
  83 + v-for="item in componentNameData"
  84 + :key="item.value"
  85 + :label="item.label"
  86 + :value="item.value"
  87 + >
  88 + </el-option>
  89 + </el-select>
  90 + <div class="alt-text">
  91 + <span v-if="rowFormData['componentName']=='1'">显示正常内容</span>
  92 + <span v-if="rowFormData['componentName']=='textToImage'">值为'message',显示为信息图标，值为'',显示微信图标</span>
  93 + <span v-if="rowFormData['componentName']=='textToBg'">值为'1',显示为一般，值为'2'，显示为重要，值为'3'，显示为严重</span>
  94 + </div>
  95 + </div>
  96 +
89 </el-form-item> 97 </el-form-item>
90 </el-form> 98 </el-form>
91 <span slot="footer" class="dialog-footer"> 99 <span slot="footer" class="dialog-footer">
@@ -184,7 +192,7 @@ export default { @@ -184,7 +192,7 @@ export default {
184 value:1 192 value:1
185 }, 193 },
186 { 194 {
187 - label:'微信图标', 195 + label:'信息图标',
188 value:'textToImage' 196 value:'textToImage'
189 }, 197 },
190 { 198 {
@@ -380,4 +388,15 @@ export default { @@ -380,4 +388,15 @@ export default {
380 388
381 } 389 }
382 } 390 }
  391 +.flex-start{
  392 + display: flex;
  393 + align-items: center;
  394 + justify-content: start;
  395 +}
  396 +.alt-text{
  397 + margin-left:5px;
  398 + font-size: 12px;
  399 + color:#D81E06;
  400 + line-height: 12px;
  401 +}
383 </style> 402 </style>
1 <template> 1 <template>
2 <div> 2 <div>
3 <div class="basic-img"> 3 <div class="basic-img">
4 - <el-popover ref="popoverMenu" placement="right" trigger="click" auto-close="200" > 4 + <el-popover ref="popoverMenu" placement="right" trigger="click" auto-close="200" >
5 <template #reference> 5 <template #reference>
6 <img class="info-img" src="@/assets/images/healthStatus/icon_row_menu.png" alt="" @click.stop="pressingTimes()"> 6 <img class="info-img" src="@/assets/images/healthStatus/icon_row_menu.png" alt="" @click.stop="pressingTimes()">
7 </template> 7 </template>
@@ -80,7 +80,70 @@ export const monitorBasicInformation = { @@ -80,7 +80,70 @@ export const monitorBasicInformation = {
80 required: false, 80 required: false,
81 placeholder: '', 81 placeholder: '',
82 value: '14' 82 value: '14'
83 - } 83 + },
  84 + [
  85 + {
  86 + name: "下探设置",
  87 + list: [
  88 + {
  89 + type: 'el-switch',
  90 + label: '是否有下探',
  91 + name: 'probeDown',
  92 + required: false,
  93 + placeholder: '',
  94 + value: true,
  95 + },
  96 + {
  97 + type: 'el-switch',
  98 + label: '告警设置',
  99 + name: 'alarm_setting',
  100 + required: false,
  101 + placeholder: '',
  102 + value: false
  103 + },
  104 + {
  105 + type: 'el-switch',
  106 + label: '过滤单指标',
  107 + name: 'filter_sheet_indicator',
  108 + required: false,
  109 + placeholder: '',
  110 + value: false
  111 + },
  112 + {
  113 + type: 'el-switch',
  114 + label: '过滤多指标',
  115 + name: 'filter_multiple_indicators',
  116 + required: false,
  117 + placeholder: '',
  118 + value: false
  119 + },
  120 + {
  121 + type: 'el-switch',
  122 + label: '性能趋势',
  123 + name: 'performance_trends',
  124 + required: false,
  125 + placeholder: '',
  126 + value: false
  127 + },
  128 + {
  129 + type: 'el-switch',
  130 + label: '压制次数',
  131 + name: 'pressing_times',
  132 + required: false,
  133 + placeholder: '',
  134 + value: true
  135 + },
  136 + {
  137 + type: 'el-switch',
  138 + label: '纳入容量预测',
  139 + name: 'include_capacity_forecast',
  140 + required: false,
  141 + placeholder: '',
  142 + value: false
  143 + }
  144 + ]
  145 + },
  146 + ],
84 ], 147 ],
85 data: [ 148 data: [
86 { 149 {
@@ -120,9 +183,10 @@ export const monitorBasicInformation = { @@ -120,9 +183,10 @@ export const monitorBasicInformation = {
120 relactiveDomValue: 'staticData', 183 relactiveDomValue: 'staticData',
121 value: [ 184 value: [
122 { 185 {
123 - name:'监控连接状态',  
124 - value:'连接成功',  
125 - code:'link' 186 + name:'监控连接状态1',
  187 + value:'连接成功1',
  188 + code:'link',
  189 + id:'KPIE13DD9A3'
126 }, 190 },
127 { 191 {
128 name:'最近采集时间', 192 name:'最近采集时间',
@@ -30,7 +30,7 @@ export const monitorGaugeRate = { @@ -30,7 +30,7 @@ export const monitorGaugeRate = {
30 placeholder: '', 30 placeholder: '',
31 value: 'CPU使用率', 31 value: 'CPU使用率',
32 }, 32 },
33 - { 33 + /*{
34 type: 'el-select', 34 type: 'el-select',
35 label: '标题位置', 35 label: '标题位置',
36 name: 'textAlign', 36 name: 'textAlign',
@@ -50,13 +50,18 @@ export const monitorGaugeRate = { @@ -50,13 +50,18 @@ export const monitorGaugeRate = {
50 required: false, 50 required: false,
51 placeholder: '', 51 placeholder: '',
52 value: '', 52 value: '',
53 - }, 53 + },*/
54 { 54 {
55 - type: 'el-input-text', 55 + type: 'el-select',
56 label: 'kpiId', 56 label: 'kpiId',
57 name: 'kpiId', 57 name: 'kpiId',
58 required: false, 58 required: false,
59 placeholder: '', 59 placeholder: '',
  60 + selectOptions: [
  61 + {code: 'KPI7054BC34', name: 'KPI7054BC34'},
  62 + {code: 'KPI31CB8D97', name: 'KPI31CB8D97'},
  63 + {code: 'KPI20352505', name: 'KPI20352505'},
  64 + ],
60 value: 'KPI7054BC34', 65 value: 'KPI7054BC34',
61 }, 66 },
62 { 67 {
@@ -67,6 +72,14 @@ export const monitorGaugeRate = { @@ -67,6 +72,14 @@ export const monitorGaugeRate = {
67 placeholder: '', 72 placeholder: '',
68 value: 'x86server_cpurate', 73 value: 'x86server_cpurate',
69 }, 74 },
  75 + {
  76 + type: 'el-input-text',
  77 + label: 'flag',
  78 + name: 'flag',
  79 + required: false,
  80 + placeholder: '',
  81 + value: '',
  82 + },
70 [ 83 [
71 { 84 {
72 name: "下探设置", 85 name: "下探设置",
1 <template> 1 <template>
2 - <div class="basicInformation-container" :style="styleObj" @click="closePressingDialog">  
3 - <div class="title-div" :style="styleColor"> 2 + <div class="basicInformation-container" :style="styleObj" @click="closePressingDialog" @click.stop="visible = false" >
  3 + <div class="title-div" :style="styleColor" v-if="hackReset">
4 <img v-if="!imgStyle.titleName" :src="imgStyle.imageAdress" :style="imgStyle" alt=""> 4 <img v-if="!imgStyle.titleName" :src="imgStyle.imageAdress" :style="imgStyle" alt="">
5 <div v-if="imgStyle.titleName" class="title-name"> 5 <div v-if="imgStyle.titleName" class="title-name">
6 {{imgStyle.titleName}} 6 {{imgStyle.titleName}}
7 - <el-tooltip v-model="visible"> 7 + <el-tooltip v-model="visible" :manual="true" placement="right-start">
8 <template #content> 8 <template #content>
9 <div class="basic-ul-all" style="width:720px;" @click="pressingVisibleTip=false"> 9 <div class="basic-ul-all" style="width:720px;" @click="pressingVisibleTip=false">
10 <el-row class="basic-item" :style="fontStyle" v-for="(item,index) in informationDataAll" :key="index"> 10 <el-row class="basic-item" :style="fontStyle" v-for="(item,index) in informationDataAll" :key="index">
11 <el-col class="basic-border basic-item-title basic-flex" :span="10"> 11 <el-col class="basic-border basic-item-title basic-flex" :span="10">
12 {{ item.name }} 12 {{ item.name }}
13 - <span class="basic-img" v-if="item.code=='link'">  
14 - <img src="@/assets/images/healthStatus/icon_row_menu.png" alt="" @click.stop="pressingVisibleTip=true"> 13 + <span class="basic-img" v-if="item.id=='KPIE13DD9A3'">
  14 +<!-- <img src="@/assets/images/healthStatus/icon_row_menu.png" alt="" @click.stop="pressingVisibleTip=true">
15 <span class="basic-pressing-times" @click="pressingDialog" v-if="pressingVisibleTip"> 15 <span class="basic-pressing-times" @click="pressingDialog" v-if="pressingVisibleTip">
16 <i class="el-icon-link"></i>压制次数 16 <i class="el-icon-link"></i>压制次数
17 - </span> 17 + </span>-->
  18 + <customMenuBox ref="customMenu" v-if="imgStyle.probeDown "
  19 + :detailMenubox="calcDetailMenubox"
  20 + :tableDataValue="tableDataValue" :flg="''"
  21 + :tableDataValueHead="tableDataValueHead"
  22 + :heightStyle="heightStyle" :marginStyle="marginStyle" :tableName="imgStyle.titleName"
  23 + :trendSrc="trendSrc"
  24 + :resType="resType"
  25 + ></customMenuBox>
18 </span> 26 </span>
19 </el-col> 27 </el-col>
20 - <el-col class="basic-border basic-item-content" :span="14">{{ item.value }}</el-col> 28 + <el-col class="basic-border basic-item-content" :span="14"><span :class="{'span-green':index==0}">{{ item.value }}</span></el-col>
21 </el-row> 29 </el-row>
22 </div> 30 </div>
23 </template> 31 </template>
24 - <i class="el-icon-info" @mouseenter="visible = true" @mouseleave="visible = false" /> 32 + <i class="el-icon-info" @mouseenter="visible = true"/>
25 </el-tooltip> 33 </el-tooltip>
26 34
27 </div> 35 </div>
@@ -30,14 +38,22 @@ @@ -30,14 +38,22 @@
30 <el-row class="basic-item" :style="fontStyle" v-for="(item,index) in informationData" :key="index"> 38 <el-row class="basic-item" :style="fontStyle" v-for="(item,index) in informationData" :key="index">
31 <el-col class="basic-border basic-item-title basic-flex" :span="10"> 39 <el-col class="basic-border basic-item-title basic-flex" :span="10">
32 {{ item.name }} 40 {{ item.name }}
33 - <span class="basic-img" v-if="item.code=='link'">  
34 - <img src="@/assets/images/healthStatus/icon_row_menu.png" alt="" @click.stop="pressingTimes"> 41 + <span class="basic-img" v-if="item.id=='KPIE13DD9A3'">
  42 +<!-- <img src="@/assets/images/healthStatus/icon_row_menu.png" alt="" @click.stop="pressingTimes">
35 <span class="basic-pressing-times" @click="pressingDialog" v-if="pressingVisible"> 43 <span class="basic-pressing-times" @click="pressingDialog" v-if="pressingVisible">
36 <i class="el-icon-link"></i>压制次数 44 <i class="el-icon-link"></i>压制次数
37 - </span> 45 + </span>-->
  46 + <customMenuBox ref="customMenu" v-if="imgStyle.probeDown"
  47 + :detailMenubox="calcDetailMenubox"
  48 + :tableDataValue="tableDataValue" :flg="''"
  49 + :tableDataValueHead="tableDataValueHead"
  50 + :heightStyle="heightStyle" :marginStyle="marginStyle" :tableName="imgStyle.titleName"
  51 + :trendSrc="trendSrc"
  52 + :resType="resType"
  53 + ></customMenuBox>
38 </span> 54 </span>
39 </el-col> 55 </el-col>
40 - <el-col class="basic-border basic-item-content" :span="14">{{ item.value }}</el-col> 56 + <el-col class="basic-border basic-item-content" :span="14"><span :class="{'span-green':index==0}">{{ item.value }}</span></el-col>
41 </el-row> 57 </el-row>
42 </div> 58 </div>
43 59
@@ -45,6 +61,7 @@ @@ -45,6 +61,7 @@
45 </template> 61 </template>
46 62
47 <script> 63 <script>
  64 +import customMenuBox from "../../designerComponents/customMenuBox";//下探组件
48 65
49 export default { 66 export default {
50 name: "basicInformation", 67 name: "basicInformation",
@@ -59,9 +76,17 @@ export default { @@ -59,9 +76,17 @@ export default {
59 pressingVisible:false, 76 pressingVisible:false,
60 pressingVisibleTip:false, 77 pressingVisibleTip:false,
61 visible:false, 78 visible:false,
  79 + hackReset:true,
  80 + tableDataValue: {kpiId:''},
  81 + tableDataValueHead: {},
  82 + resType:'',
  83 + marginStyle:'',//弹框距离顶部距离
  84 + heightStyle:'',//弹框遮罩层高度
  85 + widthStyle:';',//弹框宽度样式
  86 + trendSrc:'',
62 } 87 }
63 }, 88 },
64 - components: {}, 89 + components: {customMenuBox},
65 props: { 90 props: {
66 value: Object, 91 value: Object,
67 ispreview: Boolean 92 ispreview: Boolean
@@ -102,9 +127,53 @@ export default { @@ -102,9 +127,53 @@ export default {
102 imageAdress: this.transStyle.imageAdress?this.transStyle.imageAdress:require("../../../../../../assets/images/healthStatus/title-asset.png"), 127 imageAdress: this.transStyle.imageAdress?this.transStyle.imageAdress:require("../../../../../../assets/images/healthStatus/title-asset.png"),
103 titleName:this.transStyle.titleName, 128 titleName:this.transStyle.titleName,
104 isName:this.transStyle.isName, 129 isName:this.transStyle.isName,
105 - dataNum:this.transStyle.dataNum?this.transStyle.dataNum:'6' 130 + dataNum:this.transStyle.dataNum?this.transStyle.dataNum:'6',
  131 + probeDown:this.transStyle.probeDown
  132 +
106 }; 133 };
107 - } 134 + },
  135 + //表格下探列表
  136 + calcDetailMenubox(){
  137 + const menubox = this.transStyle;
  138 + let detailMenuBox=[];
  139 + if(menubox.alarm_setting){
  140 + detailMenuBox.push({
  141 + name:'告警设置',
  142 + type:'alarm_setting'
  143 + })
  144 + }
  145 + if(menubox.filter_sheet_indicator){
  146 + detailMenuBox.push({
  147 + name:'过滤单指标',
  148 + type:'filter_sheet_indicator'
  149 + })
  150 + }
  151 + if(menubox.filter_multiple_indicators){
  152 + detailMenuBox.push({
  153 + name:'过滤多指标',
  154 + type:'filter_multiple_indicators'
  155 + })
  156 + }
  157 + if(menubox.performance_trends){
  158 + detailMenuBox.push({
  159 + name:'性能趋势',
  160 + type:'performance_trends'
  161 + })
  162 + }
  163 + if(menubox.pressing_times){
  164 + detailMenuBox.push({
  165 + name:'压制次数',
  166 + type:'pressing_times'
  167 + })
  168 + }
  169 + if(menubox.include_capacity_forecast){
  170 + detailMenuBox.push({
  171 + name:'纳入容量预测',
  172 + type:'include_capacity_forecast'
  173 + })
  174 + }
  175 + return detailMenuBox;
  176 + },
108 177
109 }, 178 },
110 watch: { 179 watch: {
@@ -133,28 +202,53 @@ export default { @@ -133,28 +202,53 @@ export default {
133 202
134 handlerData() { 203 handlerData() {
135 const resData = this.optionsData; 204 const resData = this.optionsData;
136 - console.log("resdata",resData)  
137 resData.dataType == "staticData" 205 resData.dataType == "staticData"
138 ? this.handlerStaticData(resData.staticData) 206 ? this.handlerStaticData(resData.staticData)
139 : this.handlerDynamicData(resData.dynamicData, resData.refreshTime); 207 : this.handlerDynamicData(resData.dynamicData, resData.refreshTime);
140 }, 208 },
141 handlerStaticData(data) { 209 handlerStaticData(data) {
142 - this.informationData = data; 210 + // this.informationData = data;
143 this.informationDataAll = data; 211 this.informationDataAll = data;
  212 +
144 if(this.imgStyle.dataNum){ 213 if(this.imgStyle.dataNum){
145 - this.informationData=this.informationData.slice(0,this.imgStyle.dataNum); 214 + this.informationData=this.informationDataAll.slice(0,this.imgStyle.dataNum);
146 } 215 }
147 }, 216 },
148 handlerDynamicData(data, refreshTime) { 217 handlerDynamicData(data, refreshTime) {
149 if (!data) return; 218 if (!data) return;
150 - /* if (this.ispreview) { 219 + if (this.ispreview) {
151 this.getEchartData(data); 220 this.getEchartData(data);
152 this.flagInter = setInterval(() => { 221 this.flagInter = setInterval(() => {
153 this.getEchartData(data); 222 this.getEchartData(data);
154 }, refreshTime); 223 }, refreshTime);
155 } else { 224 } else {
156 this.getEchartData(data); 225 this.getEchartData(data);
157 - }*/ 226 + }
  227 + },
  228 + getEchartData(val) {
  229 + const data = this.queryEchartsData(val);
  230 + data.then(res => {
  231 + if(res && res[0].code==0)
  232 + this.informationDataAll = res[0].data;
  233 + if(this.informationDataAll && this.informationDataAll.length>0){
  234 + this.informationDataAll.map(item=>{
  235 + if(typeof (item.value)!='string'){
  236 + item.value=item.value[0].state
  237 + }
  238 + })
  239 + }
  240 + if(this.imgStyle.dataNum){
  241 + this.informationData=this.informationDataAll.slice(0,this.imgStyle.dataNum);
  242 + }
  243 + this.hackResetFun();
  244 + });
  245 + },
  246 + // vue hack 之强制刷新组件
  247 + hackResetFun() {
  248 + this.hackReset = false;
  249 + this.$nextTick(() => {
  250 + this.hackReset = true;
  251 + });
158 }, 252 },
159 pressingDialog(){ 253 pressingDialog(){
160 }, 254 },
@@ -253,4 +347,7 @@ export default { @@ -253,4 +347,7 @@ export default {
253 color:#f6f6f6; 347 color:#f6f6f6;
254 } 348 }
255 } 349 }
  350 +.span-green{
  351 + color:#0BAC33;
  352 +}
256 </style> 353 </style>
1 <template> 1 <template>
2 - <div :style="styleObj" > 2 + <div :style="styleObj" @click.stop="isDisplay=false">
3 <div class="title-div flex-start" :style="styleColor" @mouseenter.stop="isDisplay=true;"> 3 <div class="title-div flex-start" :style="styleColor" @mouseenter.stop="isDisplay=true;">
4 <img v-if="!imgStyle.titleName" :src="imgStyle.imageAdress" alt=""> 4 <img v-if="!imgStyle.titleName" :src="imgStyle.imageAdress" alt="">
5 <div v-if="imgStyle.titleName" class="title-name">{{imgStyle.titleName}}</div> 5 <div v-if="imgStyle.titleName" class="title-name">{{imgStyle.titleName}}</div>
@@ -13,24 +13,46 @@ @@ -13,24 +13,46 @@
13 ></customMenuBox> 13 ></customMenuBox>
14 14
15 </div> 15 </div>
16 - <v-chart :options="options" autoresize/> 16 +<!-- <div class="chart-div" style="height: 100%;height: 100%">-->
  17 + <v-chart :options="options" autoresize/>
  18 + <div class="chart-value" :style="chartValueStyle"><span @click="goTrend()">{{dataValue}}</span></div>
  19 +<!-- </div>-->
  20 + <!-- 直接点击数据展示 性能趋势弹框-->
  21 + <customDialog :dialogVisible="trendVisible" :heightStyle="heightStyle" :marginStyle="marginStyle" :widthStyle="widthStyle" :title-name="imgStyle.titleName"
  22 + :showFooter="true" :showCancelBtn="true" :showOkBtn="true" @hideDialog="hideDialog" @okFunc="okFunc"
  23 + >
  24 + <template v-slot>
  25 + <div class="txtScroll-top">
  26 + <iframe :src="trendSrc" class="layadmin-iframe" style="height: 99.5%!important;width: 100%;"/>
  27 + </div>
  28 + </template>
  29 + </customDialog>
17 </div> 30 </div>
18 </template> 31 </template>
19 32
20 <script> 33 <script>
21 import echarts from "echarts"; 34 import echarts from "echarts";
22 import customMenuBox from "../../designerComponents/customMenuBox";//下探组件 35 import customMenuBox from "../../designerComponents/customMenuBox";//下探组件
  36 +import customDialog from "../../designerComponents/customDialog";
23 import {getTrendBaseUrl} from "@/api/platform"; 37 import {getTrendBaseUrl} from "@/api/platform";
24 38
25 export default { 39 export default {
26 name: "gaugeRate", 40 name: "gaugeRate",
27 - components: {customMenuBox}, 41 + components: {customMenuBox,customDialog},
28 props: { 42 props: {
29 value: Object, 43 value: Object,
30 ispreview: Boolean 44 ispreview: Boolean
31 }, 45 },
32 data() { 46 data() {
  47 + /*this.myChart={
  48 + click:function(e){
  49 + console.log("111",e)
  50 +
  51 + }
  52 + }*/
33 return { 53 return {
  54 + trendVisible:false,//性能趋势弹框
  55 + dataValue:'',
34 trendSrc:'',//性能趋势图地址 56 trendSrc:'',//性能趋势图地址
35 marginStyle:'',//弹框距离顶部距离 57 marginStyle:'',//弹框距离顶部距离
36 heightStyle:'',//弹框遮罩层高度 58 heightStyle:'',//弹框遮罩层高度
@@ -164,7 +186,7 @@ export default { @@ -164,7 +186,7 @@ export default {
164 }, 186 },
165 styleColor() { 187 styleColor() {
166 return { 188 return {
167 - "text-align": this.optionsSetup.textAlign, 189 + // "text-align": this.optionsSetup.textAlign,
168 190
169 }; 191 };
170 }, 192 },
@@ -175,6 +197,13 @@ export default { @@ -175,6 +197,13 @@ export default {
175 probeDown:this.optionsSetup.probeDown 197 probeDown:this.optionsSetup.probeDown
176 }; 198 };
177 }, 199 },
  200 + chartValueStyle(){
  201 + return{
  202 + color: this.optionsSetup.labelColor,
  203 + 'font-size': this.optionsSetup.labelFontSize+'px',
  204 + 'font-weight': this.optionsSetup.labelFontWeight,
  205 + }
  206 + },
178 //表格下探列表 207 //表格下探列表
179 calcDetailMenubox(){ 208 calcDetailMenubox(){
180 const menubox = this.optionsSetup; 209 const menubox = this.optionsSetup;
@@ -221,10 +250,10 @@ export default { @@ -221,10 +250,10 @@ export default {
221 kpiIdStyle(){ 250 kpiIdStyle(){
222 this.$set(this.tableDataValue,'kpiId',this.optionsSetup.kpiId) 251 this.$set(this.tableDataValue,'kpiId',this.optionsSetup.kpiId)
223 this.tableDataValue.kpiId=this.optionsSetup.kpiId; 252 this.tableDataValue.kpiId=this.optionsSetup.kpiId;
224 - console.log("111",this.tableDataValue)  
225 let obj={ 253 let obj={
226 kpiId:this.optionsSetup.kpiId, 254 kpiId:this.optionsSetup.kpiId,
227 - targetId:this.optionsSetup.targetId 255 + targetId:this.optionsSetup.targetId,
  256 + flag:this.optionsSetup.flag
228 } 257 }
229 return obj; 258 return obj;
230 }, 259 },
@@ -258,6 +287,7 @@ export default { @@ -258,6 +287,7 @@ export default {
258 this.optionsCollapse = this.value.collapse; 287 this.optionsCollapse = this.value.collapse;
259 this.optionsSetup = this.value.setup; 288 this.optionsSetup = this.value.setup;
260 this.editorOptions(); 289 this.editorOptions();
  290 +
261 }, 291 },
262 methods: { 292 methods: {
263 editorOptions() { 293 editorOptions() {
@@ -367,6 +397,7 @@ export default { @@ -367,6 +397,7 @@ export default {
367 } 397 }
368 ] 398 ]
369 const detail = { 399 const detail = {
  400 + show:false,
370 valueAnimation: true, 401 valueAnimation: true,
371 formatter: '{value} %', 402 formatter: '{value} %',
372 color: optionsSetup.labelColor, 403 color: optionsSetup.labelColor,
@@ -375,7 +406,8 @@ export default { @@ -375,7 +406,8 @@ export default {
375 } 406 }
376 series[0].data = data 407 series[0].data = data
377 series[0].detail = detail 408 series[0].detail = detail
378 - console.log("val",val) 409 + this.dataValue=(num?num:'0') +'%';
  410 + this.tableDataValue=val[0];
379 this.setTrend(val[0]) 411 this.setTrend(val[0])
380 }, 412 },
381 dynamicDataFn(val, refreshTime) { 413 dynamicDataFn(val, refreshTime) {
@@ -392,6 +424,7 @@ export default { @@ -392,6 +424,7 @@ export default {
392 getEchartData(val) { 424 getEchartData(val) {
393 const data = this.queryEchartsData(val); 425 const data = this.queryEchartsData(val);
394 data.then(res => { 426 data.then(res => {
  427 + this.tableDataValue=res.map;
395 this.setTrend(res.map) 428 this.setTrend(res.map)
396 this.renderingFn(res); 429 this.renderingFn(res);
397 }); 430 });
@@ -405,6 +438,7 @@ export default { @@ -405,6 +438,7 @@ export default {
405 } 438 }
406 ] 439 ]
407 const detail = { 440 const detail = {
  441 + show:false,
408 valueAnimation: true, 442 valueAnimation: true,
409 formatter: '{value} %', 443 formatter: '{value} %',
410 color: optionsSetup.labelColor, 444 color: optionsSetup.labelColor,
@@ -413,8 +447,8 @@ export default { @@ -413,8 +447,8 @@ export default {
413 } 447 }
414 series[0].data = data 448 series[0].data = data
415 series[0].detail = detail 449 series[0].detail = detail
  450 + this.dataValue=(val[0].value?val[0].value:'0')+'%';
416 }, 451 },
417 -  
418 //设置性能趋势图 452 //设置性能趋势图
419 setTrend(data){ 453 setTrend(data){
420 let urlParams='resId='+this.getUrlToken.resId+'&kpiId='+this.kpiIdStyle.kpiId+'&flag='+data.flag+'&warning='+data.isWarning 454 let urlParams='resId='+this.getUrlToken.resId+'&kpiId='+this.kpiIdStyle.kpiId+'&flag='+data.flag+'&warning='+data.isWarning
@@ -425,6 +459,18 @@ export default { @@ -425,6 +459,18 @@ export default {
425 this.resType=data.resType; 459 this.resType=data.resType;
426 this.trendSrc=baseUrl+'/vue3/index.html#/vue3/pieDetailLine?'+urlParams+'&access_token='+this.getUrlToken.token; 460 this.trendSrc=baseUrl+'/vue3/index.html#/vue3/pieDetailLine?'+urlParams+'&access_token='+this.getUrlToken.token;
427 }, 461 },
  462 + goTrend(){
  463 + this.setTrend(this.tableDataValue);
  464 + this.trendVisible=true;
  465 +
  466 + },
  467 + //弹框关闭确定
  468 + hideDialog(){
  469 + this.trendVisible=false;
  470 + },
  471 + okFunc(){
  472 + this.trendVisible=false;
  473 + },
428 handleScroll(e){ 474 handleScroll(e){
429 let serviceTop = 44; 475 let serviceTop = 44;
430 476
@@ -484,4 +530,17 @@ export default { @@ -484,4 +530,17 @@ export default {
484 justify-content: start; 530 justify-content: start;
485 align-items: center; 531 align-items: center;
486 } 532 }
  533 +.detail-value{
  534 + color: #ff0000;
  535 +}
  536 +.chart-value{
  537 + position: absolute;
  538 + left: 0;
  539 + right: 0;
  540 + bottom: 6%;
  541 + span{
  542 + cursor: pointer;
  543 + text-decoration:underline;
  544 + }
  545 +}
487 </style> 546 </style>