monitor_v3 / anji-plus-report · Commits

Go to a project

Authored by 王涛
Commit 5172b17d4529ad4754bbca91b71782a5b9e0aed1 2 parents efd3cabe eb4d5354

Merge branch 'master' of http://192.168.1.136:82/monitor_v3/anji-plus-report

Inline Side-by-side
Showing 19 changed files with 3040 additions and 133 deletions
@@ -5,6 +5,7 @@ const prodEnv = require('./prod.env') @@ -5,6 +5,7 @@ const prodEnv = require('./prod.env')
5 module.exports = merge(prodEnv, { 5 module.exports = merge(prodEnv, {
6 NODE_ENV: '"development"', 6 NODE_ENV: '"development"',
7 BASE_API: '"http://127.0.0.1:9095"', 7 BASE_API: '"http://127.0.0.1:9095"',
8 - BASE_API_other: '"https://192.168.0.69:8080"' 8 + // BASE_API_other: '"https://192.168.0.69:8080"'
  9 + BASE_API_other: '"http://192.168.0.74:8080"'
9 // BASE_API: '"http://10.108.26.197:9095"' 10 // BASE_API: '"http://10.108.26.197:9095"'
10 }) 11 })
This diff could not be displayed because it is too large.
@@ -125,10 +125,39 @@ export default { @@ -125,10 +125,39 @@ export default {
125 return this.widgettext(params.chartProperties, data) 125 return this.widgettext(params.chartProperties, data)
126 } else if (chartType == "widget-stackchart") { 126 } else if (chartType == "widget-stackchart") {
127 return this.stackChartFn(params.chartProperties, data) 127 return this.stackChartFn(params.chartProperties, data)
128 - } else { 128 + }else if(chartType == "custom-linechart"){
  129 + return this.barOrLineChartFnCustom(params.chartProperties, data);
  130 + } else if(chartType == "monitor-stackchart"){
  131 + return this.stackChartFnCustom(params.chartProperties, data)
  132 + }else {
129 return data 133 return data
130 } 134 }
131 }, 135 },
  136 + // 柱状图、折线图、柱线图-自定义 // Start LSQ 2022/2/21
  137 + barOrLineChartFnCustom(chartProperties, data) {
  138 + const ananysicData = {};
  139 + let xAxisList = [];
  140 + let series = [];
  141 + if(data && data[0]){
  142 + if(data[0].data.names && data[0].data.names.length>0){
  143 + xAxisList=data[0].data.names;
  144 + }else{
  145 + xAxisList=['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00']
  146 + }
  147 + if(data[0].data.series && data[0].data.series.length>0){
  148 + series = data[0].data.series;
  149 +
  150 + }else{
  151 + series = [{
  152 + name: "",
  153 + datas: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
  154 + }];
  155 + }
  156 + }
  157 + ananysicData["xAxis"] = xAxisList;
  158 + ananysicData["series"] = series;
  159 + return ananysicData;
  160 + },
132 // 柱状图、折线图、柱线图 161 // 柱状图、折线图、柱线图
133 barOrLineChartFn(chartProperties, data) { 162 barOrLineChartFn(chartProperties, data) {
134 const ananysicData = {}; 163 const ananysicData = {};
@@ -157,6 +186,38 @@ export default { @@ -157,6 +186,38 @@ export default {
157 ananysicData["series"] = series; 186 ananysicData["series"] = series;
158 return ananysicData; 187 return ananysicData;
159 }, 188 },
  189 + //堆叠图自定义
  190 + stackChartFnCustom(chartProperties, data){
  191 + const ananysicData = {};
  192 + const series = [];
  193 + //全部字段字典值
  194 + const types = Object.values(chartProperties)
  195 + let newData=data[0];
  196 + //x轴字段、y轴字段名
  197 + const xAxisField = Object.keys(chartProperties)[types.indexOf('xAxis')]
  198 + const yAxisField = Object.keys(chartProperties)[types.indexOf('yAxis')]
  199 + const dataField = Object.keys(chartProperties)[types.indexOf('bar')]
  200 + //x轴数值去重，y轴去重
  201 + const xAxisList = this.setUnique(data.map(item => item[xAxisField]))
  202 + const yAxisList = this.setUnique(data.map(item => item[yAxisField]))
  203 + const dataGroup = this.setGroupBy(data, yAxisField)
  204 + let yAxisListNew=yAxisList[0].series;
  205 +
  206 + if(yAxisListNew && yAxisListNew.length>0){
  207 + yAxisListNew.map(item=>{
  208 + series.push({
  209 + name: item.name,
  210 + type: item.type,
  211 + data: item.data,
  212 + })
  213 + })
  214 +
  215 + }
  216 + ananysicData["xAxis"] = xAxisList[0];
  217 + ananysicData["series"] = series;
  218 + ananysicData["kpiMap"] = newData.kpiMap;
  219 + return ananysicData;
  220 + },
160 //堆叠图 221 //堆叠图
161 stackChartFn(chartProperties, data) { 222 stackChartFn(chartProperties, data) {
162 const ananysicData = {}; 223 const ananysicData = {};
1 import cacheView from "./modules/cachaView" 1 import cacheView from "./modules/cachaView"
  2 +import tableHead from "./modules/tableHead"
2 3
3 const getters = { 4 const getters = {
4 sidebar: state => state.app.sidebar, 5 sidebar: state => state.app.sidebar,
5 device: state => state.app.device, 6 device: state => state.app.device,
6 token: state => state.user.token, 7 token: state => state.user.token,
7 accessUser: state => state.user.accessUser, 8 accessUser: state => state.user.accessUser,
8 - cacheViews: state => state.cacheView.cacheViews 9 + cacheViews: state => state.cacheView.cacheViews,
  10 + //lsq 2022-02-25
  11 + tableHeads:state => state.tableHead.tableHeadData
9 } 12 }
10 export default getters 13 export default getters
@@ -7,6 +7,8 @@ import app from './modules/app' @@ -7,6 +7,8 @@ import app from './modules/app'
7 import user from './modules/user' 7 import user from './modules/user'
8 import cacheView from './modules/cachaView' 8 import cacheView from './modules/cachaView'
9 import help from './modules/help' 9 import help from './modules/help'
  10 +//lsq 2022-02-25
  11 +import tableHead from './modules/tableHead'
10 12
11 Vue.use(Vuex) 13 Vue.use(Vuex)
12 14
@@ -18,7 +20,8 @@ const store = new Vuex.Store({ @@ -18,7 +20,8 @@ const store = new Vuex.Store({
18 app, 20 app,
19 user, 21 user,
20 cacheView, 22 cacheView,
21 - help 23 + help,
  24 + tableHead
22 }, 25 },
23 state: { }, 26 state: { },
24 plugins: [initPlugin], 27 plugins: [initPlugin],
  1 +
  2 +const tableHead = {
  3 + state: {
  4 + tableHeadData: []
  5 + },
  6 +
  7 + mutations: {
  8 + CHANGE_HEAD: (state, val) => {
  9 + state.tableHeadData=val;
  10 + }
  11 + },
  12 + actions: {
  13 +
  14 + }
  15 +}
  16 +
  17 +export default tableHead
1 <template> 1 <template>
2 <div> 2 <div>
3 - <el-button 3 +<!-- <el-button
4 type="primary" 4 type="primary"
5 size="small" 5 size="small"
6 plain 6 plain
7 @click="handleAddClick" 7 @click="handleAddClick"
8 >配置表头</el-button 8 >配置表头</el-button
9 - >  
10 - <el-table :data="formData" style="width: 100%"> 9 + >-->
  10 + <span>表头设置</span>
  11 + <el-table :data="formDataNew" style="width: 100%">
11 <el-table-column prop="name" label="名称" width="60" /> 12 <el-table-column prop="name" label="名称" width="60" />
12 <el-table-column prop="key" label="key值" width="70" /> 13 <el-table-column prop="key" label="key值" width="70" />
13 <el-table-column prop="width" label="宽度" width="50" /> 14 <el-table-column prop="width" label="宽度" width="50" />
@@ -97,13 +98,28 @@ @@ -97,13 +98,28 @@
97 </el-form-item> 98 </el-form-item>
98 </el-form> 99 </el-form>
99 <span slot="footer" class="dialog-footer"> 100 <span slot="footer" class="dialog-footer">
100 - <el-button size="mini" @click="editDialogVisible = false">取 消</el-button>  
101 - <el-button size="mini" type="primary" @click="handleSaveClick"  
102 - >确 定</el-button  
103 - > 101 + <el-button size="mini" @click="editDialogVisible = false">取 消</el-button>
  102 + <el-button size="mini" type="primary" @click="handleSaveClick"
  103 + >确 定</el-button
  104 + >
104 </span> 105 </span>
105 </el-dialog> 106 </el-dialog>
106 <el-dialog 107 <el-dialog
  108 + title="表头数据"
  109 + :visible.sync="dialogVisible"
  110 + width="60%"
  111 + :before-close="handleClose"
  112 + >
  113 +
  114 + <span slot="footer" class="dialog-footer">
  115 + <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
  116 +
  117 + <el-button size="mini" type="primary" @click="handleSaveClick"
  118 + >确 定</el-button
  119 + >
  120 + </span>
  121 + </el-dialog>
  122 +<!-- <el-dialog
107 title="性能指标" 123 title="性能指标"
108 :visible.sync="dialogVisible" 124 :visible.sync="dialogVisible"
109 width="60%" 125 width="60%"
@@ -113,6 +129,11 @@ @@ -113,6 +129,11 @@
113 <el-input v-model="keyword" placeholder="请输入指标名称" clearable /> 129 <el-input v-model="keyword" placeholder="请输入指标名称" clearable />
114 <el-button @click="searchKpi" class="search-btn" type="primary">搜索</el-button> 130 <el-button @click="searchKpi" class="search-btn" type="primary">搜索</el-button>
115 </div> 131 </div>
  132 + <div class="table-btn">
  133 + <el-button @click="selectKpi(false)" class="search-btn" :type="primaryType0">重新选择</el-button>
  134 + <el-button @click="selectKpi(true)" class="search-btn" :type="primaryType1">追加</el-button>
  135 +
  136 + </div>
116 <el-table :data="tableData" height="350" style="width: 100%" ref="multipleTableRef" @selection-change="handleSelectionChange" 137 <el-table :data="tableData" height="350" style="width: 100%" ref="multipleTableRef" @selection-change="handleSelectionChange"
117 :row-key="(row) => { return row.kpiId }" 138 :row-key="(row) => { return row.kpiId }"
118 > 139 >
@@ -130,7 +151,7 @@ @@ -130,7 +151,7 @@
130 <template #default="scope">{{ scope.row.policyNum>0?'':'暂无' }}</template> 151 <template #default="scope">{{ scope.row.policyNum>0?'':'暂无' }}</template>
131 </el-table-column> 152 </el-table-column>
132 </el-table> 153 </el-table>
133 - <!-- 分页 --> 154 + &lt;!&ndash; 分页 &ndash;&gt;
134 <div style='text-align: left;background-color: white'> 155 <div style='text-align: left;background-color: white'>
135 <el-pagination 156 <el-pagination
136 v-if="currentPage" 157 v-if="currentPage"
@@ -146,16 +167,20 @@ @@ -146,16 +167,20 @@
146 </div> 167 </div>
147 <span slot="footer" class="dialog-footer"> 168 <span slot="footer" class="dialog-footer">
148 <el-button size="mini" @click="dialogVisible = false">取 消</el-button> 169 <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
149 - <el-button size="mini" type="primary" @click="handleSaveClick"  
150 - >确 定</el-button  
151 - > 170 +
  171 + <el-tooltip class="item" effect="dark" content="默认为重新选择，追加请先点击追加按钮" placement="top-start">
  172 + <el-button size="mini" type="primary" @click="handleSaveClick"
  173 + >确 定</el-button
  174 + >
  175 + </el-tooltip>
152 </span> 176 </span>
153 - </el-dialog> 177 + </el-dialog>-->
154 </div> 178 </div>
155 </template> 179 </template>
156 <script> 180 <script>
157 -import {getKpiPage} from "@/api/platform"; 181 +import {getKpiPage,getDetailTableData} from "@/api/platform";
158 import {formatDate} from "../../../../../filter"; 182 import {formatDate} from "../../../../../filter";
  183 +import {mapGetters} from "vuex";
159 export default { 184 export default {
160 model: { 185 model: {
161 prop: "formData", 186 prop: "formData",
@@ -164,8 +189,19 @@ export default { @@ -164,8 +189,19 @@ export default {
164 props: { 189 props: {
165 formData: Array 190 formData: Array
166 }, 191 },
  192 + watch:{
  193 + tableHeads:{
  194 + handler(val){
  195 + this.setFormData();
  196 + },
  197 + deep:true
  198 + }
  199 + },
167 data() { 200 data() {
168 return { 201 return {
  202 + primaryTypeFlg:false,//默认为追加
  203 + primaryType1:'default',
  204 + primaryType0:'primary',
169 keyword:'', 205 keyword:'',
170 currentPage:1, 206 currentPage:1,
171 pageSize:10, 207 pageSize:10,
@@ -200,33 +236,47 @@ export default { @@ -200,33 +236,47 @@ export default {
200 value:'textToBg' 236 value:'textToBg'
201 } 237 }
202 ],//关联组件 238 ],//关联组件
  239 + formDataNew:this.formData,//表头数据
203 }; 240 };
204 }, 241 },
  242 + computed:{
  243 + ...mapGetters(['tableHeads']),
  244 + //获取url地址中的token
  245 + getUrlToken(){
  246 + let locationUrl=this.$route.query;
  247 + let resId=locationUrl.resId;
  248 + let token=locationUrl.access_token;
  249 + let urlObj={
  250 + resId:resId,
  251 + token:token
  252 + }
  253 + return urlObj;
  254 + }
  255 + },
  256 + created() {
  257 + this.setFormData();
  258 + },
205 methods: { 259 methods: {
  260 + setFormData(){
  261 + if(this.tableHeads){
  262 + this.formDataNew=this.tableHeads;
  263 + }
  264 + },
206 //搜索指标 265 //搜索指标
207 searchKpi(){ 266 searchKpi(){
208 this.getKpi(); 267 this.getKpi();
209 }, 268 },
210 //获取性能指标列表 269 //获取性能指标列表
211 - getKpi(){  
212 - let datas=getKpiPage();  
213 - if(datas.success){  
214 - this.tableData=datas.data;  
215 - 270 + async getKpi(){
  271 + let params={
  272 + page:this.currentPage,
  273 + limit:this.pageSize,
  274 + kpiName:this.keyword,
216 } 275 }
217 - },  
218 - //回显数据  
219 - setCheckedData(){  
220 - if(this.multipleSelection && this.multipleSelection.length>0){  
221 - this.tableData.map(item=>{  
222 - this.multipleSelection.map(v=>{  
223 - if(item.kpiId==v.kpiId){  
224 - setTimeout(()=>{  
225 - this.$refs.multipleTableRef.toggleRowSelection(item)  
226 - },300)  
227 - }  
228 - })  
229 - }) 276 + const { success,data,count } = await getKpiPage(params,this.getUrlToken);
  277 + this.total=count;
  278 + if(success){
  279 + this.tableData=data;
230 } 280 }
231 }, 281 },
232 //多选操作 282 //多选操作
@@ -288,23 +338,34 @@ export default { @@ -288,23 +338,34 @@ export default {
288 handleSaveClick() { 338 handleSaveClick() {
289 if (this.flag) { 339 if (this.flag) {
290 // 新增 340 // 新增
291 - // this.formData.push(this.rowFormData);  
292 - let arr=[]  
293 - this.multipleSelection.map((item,index)=>{  
294 - arr.push({name:item.kpiName,key:item.kpiId,width:'50%',sort:false,columnSort:index,componentName:1})  
295 - })  
296 - this.formData=arr;  
297 - this.formData.sort(this.compare('columnSort')); 341 + let arr=[];
  342 + if(this.primaryTypeFlg){
  343 + //追加
  344 + let arr1=[];
  345 + this.multipleSelection.map((item,index)=>{
  346 + arr1.push({name:item.kpiName,key:item.kpiId,width:'50%',sort:false,columnSort:index,componentName:1})
  347 + })
  348 + arr=this.formDataNew.concat(arr1);
  349 + }else{
  350 + //重新选择
  351 + this.multipleSelection.map((item,index)=>{
  352 + arr.push({name:item.kpiName,key:item.kpiId,width:'50%',sort:false,columnSort:index,componentName:1})
  353 + })
  354 + }
  355 +
  356 + this.formDataNew=arr;
  357 + this.formDataNew.sort(this.compare('columnSort'));
298 this.dialogVisible = false; 358 this.dialogVisible = false;
299 } else { 359 } else {
300 // 编辑 360 // 编辑
301 - this.formData[this.indexEditor] = this.rowFormData;  
302 - this.$set(this.formData, this.indexEditor, this.rowFormData);  
303 - this.formData.sort(this.compare('columnSort')); 361 + this.formDataNew[this.indexEditor] = this.rowFormData;
  362 + this.$set(this.formDataNew, this.indexEditor, this.rowFormData);
  363 + this.formDataNew.sort(this.compare('columnSort'));
304 this.editDialogVisible = false; 364 this.editDialogVisible = false;
305 } 365 }
306 - this.$emit("input", this.formData);  
307 - this.$emit("change", this.formData); 366 + console.log("AVX", this.formDataNew)
  367 + this.$emit("input", this.formDataNew);
  368 + this.$emit("change", this.formDataNew);
308 }, 369 },
309 //数组排序 370 //数组排序
310 compare(property){ 371 compare(property){
@@ -316,10 +377,10 @@ export default { @@ -316,10 +377,10 @@ export default {
316 }, 377 },
317 // 删除 378 // 删除
318 handleDeleteClick(index,row) { 379 handleDeleteClick(index,row) {
319 - this.formData.splice(index, 1); 380 + this.formDataNew.splice(index, 1);
320 this.setTableChecked(row.key); 381 this.setTableChecked(row.key);
321 - this.$emit("input", this.formData);  
322 - this.$emit("change", this.formData); 382 + this.$emit("input", this.formDataNew);
  383 + this.$emit("change", this.formDataNew);
323 }, 384 },
324 //设置表格选中状态 385 //设置表格选中状态
325 setTableChecked(kpiId){ 386 setTableChecked(kpiId){
@@ -338,6 +399,19 @@ export default { @@ -338,6 +399,19 @@ export default {
338 },300) 399 },300)
339 } 400 }
340 }) 401 })
  402 + },
  403 + //重新配置表头或者追加表头
  404 + selectKpi(flg){
  405 + this.primaryTypeFlg=flg;
  406 + if(flg){
  407 + //追加
  408 + this.primaryType1='primary';
  409 + this.primaryType0='default';
  410 + }else{
  411 + //重新选择
  412 + this.primaryType0='primary';
  413 + this.primaryType1='default';
  414 + }
341 } 415 }
342 } 416 }
343 }; 417 };
@@ -399,4 +473,7 @@ export default { @@ -399,4 +473,7 @@ export default {
399 color:#D81E06; 473 color:#D81E06;
400 line-height: 12px; 474 line-height: 12px;
401 } 475 }
  476 +.table-btn{
  477 + margin-top:10px;
  478 +}
402 </style> 479 </style>
@@ -40,7 +40,7 @@ export const monitorBgBorder = { @@ -40,7 +40,7 @@ export const monitorBgBorder = {
40 name: 'borderColor', 40 name: 'borderColor',
41 required: false, 41 required: false,
42 placeholder: '', 42 placeholder: '',
43 - value: '#dddddd', 43 + value: 'rgba(151, 151, 151, 0.13)',
44 }, 44 },
45 { 45 {
46 type: 'vue-color', 46 type: 'vue-color',
  1 +/*
  2 + * @Descripttion: 柱状堆叠图-使用情况
  3 + * @version:
  4 + * @Author: lsq
  5 + * @Date: 2022-02-24
  6 + * @LastEditors: lsq
  7 + * @LastEditTime: 2022-02-24
  8 + */
  9 +export const monitorCustomBarStack = {
  10 + code: 'monitorCustomBarStack',
  11 + type: 'chart',
  12 + label: '使用情况-柱状堆叠图',
  13 + icon: 'iconbianzu23',
  14 + options: {
  15 + // 配置
  16 + setup: [
  17 + {
  18 + type: 'el-input-text',
  19 + label: '图层名称',
  20 + name: 'layerName',
  21 + required: false,
  22 + placeholder: '',
  23 + value: '柱状堆叠图',
  24 + },
  25 + {
  26 + type: 'el-switch',
  27 + label: '竖展示',
  28 + name: 'verticalShow',
  29 + required: false,
  30 + placeholder: '',
  31 + value: false,
  32 + },
  33 + {
  34 + type: 'vue-color',
  35 + label: '背景颜色',
  36 + name: 'background',
  37 + required: false,
  38 + placeholder: '',
  39 + value: ''
  40 + },
  41 + {
  42 + type: 'el-select',
  43 + label: 'kpiId',
  44 + name: 'kpiId',
  45 + required: false,
  46 + placeholder: '',
  47 + selectOptions: [
  48 + {code: 'KPIA91F44E7,KPI98306224', name: 'KPIA91F44E7,KPI98306224(文件系统总大小)'},
  49 + ],
  50 + value: 'KPIA91F44E7,KPI98306224',
  51 + },
  52 + {
  53 + type: 'el-select',
  54 + label: '堆叠样式',
  55 + name: 'stackStyle',
  56 + required: false,
  57 + placeholder: '',
  58 + selectOptions: [
  59 + {code: 'leftRight', name: '左右堆叠'},
  60 + {code: 'upDown', name: '上下堆叠'},
  61 + ],
  62 + value: 'upDown'
  63 + },
  64 + [
  65 + {
  66 + name: '柱体设置',
  67 + list: [
  68 + {
  69 + type: 'el-slider',
  70 + label: '最大宽度',
  71 + name: 'maxWidth',
  72 + required: false,
  73 + placeholder: '',
  74 + value: 20,
  75 + },
  76 + {
  77 + type: 'el-slider',
  78 + label: '圆角',
  79 + name: 'radius',
  80 + require: false,
  81 + placeholder: '',
  82 + value: 0,
  83 + },
  84 + ],
  85 + },
  86 + {
  87 + name: '标题设置',
  88 + list: [
  89 + {
  90 + type: 'el-switch',
  91 + label: '标题',
  92 + name: 'isNoTitle',
  93 + required: false,
  94 + placeholder: '',
  95 + value: true,
  96 + },
  97 + {
  98 + type: 'el-input-text',
  99 + label: '标题',
  100 + name: 'titleText',
  101 + required: false,
  102 + placeholder: '',
  103 + value: '系统使用情况',
  104 + },
  105 + {
  106 + type: 'vue-color',
  107 + label: '字体颜色',
  108 + name: 'textColor',
  109 + required: false,
  110 + placeholder: '',
  111 + value: '#1e9fff'
  112 + },
  113 + {
  114 + type: 'el-select',
  115 + label: '字体粗细',
  116 + name: 'textFontWeight',
  117 + required: false,
  118 + placeholder: '',
  119 + selectOptions: [
  120 + {code: 'normal', name: '正常'},
  121 + {code: 'bold', name: '粗体'},
  122 + {code: 'bolder', name: '特粗体'},
  123 + {code: 'lighter', name: '细体'}
  124 + ],
  125 + value: 'bold'
  126 + },
  127 + {
  128 + type: 'el-input-number',
  129 + label: '字体大小',
  130 + name: 'textFontSize',
  131 + required: false,
  132 + placeholder: '',
  133 + value: 16
  134 + },
  135 + {
  136 + type: 'el-select',
  137 + label: '字体位置',
  138 + name: 'textAlign',
  139 + required: false,
  140 + placeholder: '',
  141 + selectOptions: [
  142 + {code: 'center', name: '居中'},
  143 + {code: 'left', name: '左对齐'},
  144 + {code: 'right', name: '右对齐'},
  145 + ],
  146 + value: 'left'
  147 + },
  148 + {
  149 + type: 'el-input-text',
  150 + label: '副标题',
  151 + name: 'subText',
  152 + required: false,
  153 + placeholder: '',
  154 + value: ''
  155 + },
  156 + {
  157 + type: 'vue-color',
  158 + label: '字体颜色',
  159 + name: 'subTextColor',
  160 + required: false,
  161 + placeholder: '',
  162 + value: 'rgba(30, 144, 255, 1)'
  163 + },
  164 + {
  165 + type: 'el-select',
  166 + label: '字体粗细',
  167 + name: 'subTextFontWeight',
  168 + required: false,
  169 + placeholder: '',
  170 + selectOptions: [
  171 + {code: 'normal', name: '正常'},
  172 + {code: 'bold', name: '粗体'},
  173 + {code: 'bolder', name: '特粗体'},
  174 + {code: 'lighter', name: '细体'}
  175 + ],
  176 + value: 'normal'
  177 + },
  178 + {
  179 + type: 'el-input-number',
  180 + label: '字体大小',
  181 + name: 'subTextFontSize',
  182 + required: false,
  183 + placeholder: '',
  184 + value: 20
  185 + },
  186 + ],
  187 + },
  188 + {
  189 + name: 'X轴设置',
  190 + list: [
  191 + {
  192 + type: 'el-switch',
  193 + label: '显示',
  194 + name: 'hideX',
  195 + required: false,
  196 + placeholder: '',
  197 + value: true,
  198 + },
  199 + {
  200 + type: 'el-input-text',
  201 + label: 'X轴别名',
  202 + name: 'xName',
  203 + required: false,
  204 + placeholder: '',
  205 + value: ''
  206 + },
  207 + {
  208 + type: 'vue-color',
  209 + label: '别名颜色',
  210 + name: 'xNameColor',
  211 + required: false,
  212 + placeholder: '',
  213 + value: '#fff'
  214 + },
  215 + {
  216 + type: 'el-input-number',
  217 + label: '别名字号',
  218 + name: 'xNameFontSize',
  219 + required: false,
  220 + placeholder: '',
  221 + value: 14
  222 + },
  223 + {
  224 + type: 'el-switch',
  225 + label: '轴反转',
  226 + name: 'reversalX',
  227 + required: false,
  228 + placeholder: '',
  229 + value: false
  230 + },
  231 + {
  232 + type: 'el-slider',
  233 + label: '文字角度',
  234 + name: 'textAngleX',
  235 + required: false,
  236 + placeholder: '',
  237 + value: 0
  238 + },
  239 + {
  240 + type: 'el-input-number',
  241 + label: '文字间隔',
  242 + name: 'textInterval',
  243 + required: false,
  244 + placeholder: '',
  245 + value: ''
  246 + },
  247 + {
  248 + type: 'vue-color',
  249 + label: '文字颜色',
  250 + name: 'Xcolor',
  251 + required: false,
  252 + placeholder: '',
  253 + value: '#666',
  254 + },
  255 + {
  256 + type: 'el-input-number',
  257 + label: '文字字号',
  258 + name: 'fontSizeX',
  259 + required: false,
  260 + placeholder: '',
  261 + value: 14,
  262 + },
  263 + {
  264 + type: 'vue-color',
  265 + label: '轴颜色',
  266 + name: 'lineColorX',
  267 + required: false,
  268 + placeholder: '',
  269 + value: '#c9c9c9',
  270 + },
  271 + {
  272 + type: 'el-switch',
  273 + label: '分割线显示',
  274 + name: 'isShowSplitLineX',
  275 + require: false,
  276 + placeholder: '',
  277 + value: false,
  278 + },
  279 + {
  280 + type: 'vue-color',
  281 + label: '分割线颜色',
  282 + name: 'splitLineColorX',
  283 + required: false,
  284 + placeholder: '',
  285 + value: '#c9c9c9',
  286 +
  287 + },
  288 + {
  289 + type: 'el-switch',
  290 + label: '分割区显示',
  291 + name: 'splitArea',
  292 + require: false,
  293 + placeholder: '',
  294 + value: true,
  295 + },
  296 + {
  297 + type: 'vue-color',
  298 + label: '分割区颜色',
  299 + name: 'splitAreaColor',
  300 + required: false,
  301 + placeholder: '',
  302 + value: 'rgba(200,200,200,0.1)',
  303 + },
  304 + ],
  305 + },
  306 + {
  307 + name: 'Y轴设置',
  308 + list: [
  309 + {
  310 + type: 'el-switch',
  311 + label: '显示',
  312 + name: 'isShowY',
  313 + require: false,
  314 + placeholder: '',
  315 + value: true,
  316 + },
  317 + {
  318 + type: 'el-input-text',
  319 + label: 'Y轴别名',
  320 + name: 'textNameY',
  321 + require: false,
  322 + placeholder: '',
  323 + value: ''
  324 + },
  325 + {
  326 + type: 'vue-color',
  327 + label: '别名颜色',
  328 + name: 'NameColorY',
  329 + required: false,
  330 + placeholder: '',
  331 + value: '#fff',
  332 + },
  333 + {
  334 + type: 'el-input-number',
  335 + label: '别名字号',
  336 + name: 'NameFontSizeY',
  337 + required: false,
  338 + placeholder: '',
  339 + value: 14,
  340 + },
  341 + {
  342 + type: 'el-switch',
  343 + label: '轴反转',
  344 + name: 'reversalY',
  345 + required: false,
  346 + placeholder: '',
  347 + value: false
  348 + },
  349 + {
  350 + type: 'el-slider',
  351 + label: '文字角度',
  352 + name: 'textAngleY',
  353 + required: false,
  354 + placeholder: '',
  355 + value: 0
  356 + },
  357 + {
  358 + type: 'vue-color',
  359 + label: '文字颜色',
  360 + name: 'colorY',
  361 + required: false,
  362 + placeholder: '',
  363 + value: '#666',
  364 + },
  365 + {
  366 + type: 'el-input-number',
  367 + label: '文字字号',
  368 + name: 'fontSizeY',
  369 + required: false,
  370 + placeholder: '',
  371 + value: 14,
  372 + },
  373 + {
  374 + type: 'vue-color',
  375 + label: '轴颜色',
  376 + name: 'lineColorY',
  377 + required: false,
  378 + placeholder: '',
  379 + value: '#c9c9c9',
  380 + },
  381 + {
  382 + type: 'el-switch',
  383 + label: '分割线显示',
  384 + name: 'isShowSplitLineY',
  385 + require: false,
  386 + placeholder: '',
  387 + value: true,
  388 + }, {
  389 + type: 'vue-color',
  390 + label: '分割线颜色',
  391 + name: 'splitLineColorY',
  392 + required: false,
  393 + placeholder: '',
  394 + value: '#c9c9c9',
  395 + }
  396 + ],
  397 + },
  398 + {
  399 + name: '数值设定',
  400 + list: [
  401 + {
  402 + type: 'el-switch',
  403 + label: '显示',
  404 + name: 'isShow',
  405 + required: false,
  406 + placeholder: '',
  407 + value: false
  408 + },
  409 + {
  410 + type: 'el-input-number',
  411 + label: '字体大小',
  412 + name: 'fontSize',
  413 + required: false,
  414 + placeholder: '',
  415 + value: 14
  416 + },
  417 + {
  418 + type: 'vue-color',
  419 + label: '字体颜色',
  420 + name: 'subTextColor',
  421 + required: false,
  422 + placeholder: '',
  423 + value: '#fff'
  424 + },
  425 + {
  426 + type: 'el-select',
  427 + label: '字体粗细',
  428 + name: 'fontWeight',
  429 + required: false,
  430 + placeholder: '',
  431 + selectOptions: [
  432 + {code: 'normal', name: '正常'},
  433 + {code: 'bold', name: '粗体'},
  434 + {code: 'bolder', name: '特粗体'},
  435 + {code: 'lighter', name: '细体'}
  436 + ],
  437 + value: 'normal'
  438 + },
  439 + ],
  440 + },
  441 + {
  442 + name: '提示语设置',
  443 + list: [
  444 + {
  445 + type: 'el-input-number',
  446 + label: '字体大小',
  447 + name: 'tipsFontSize',
  448 + required: false,
  449 + placeholder: '',
  450 + value: 16
  451 + },
  452 + {
  453 + type: 'vue-color',
  454 + label: '字体颜色',
  455 + name: 'lineColor',
  456 + required: false,
  457 + placeholder: '',
  458 + },
  459 + ],
  460 + },
  461 + {
  462 + name: '坐标轴边距设置',
  463 + list: [
  464 + {
  465 + type: 'el-slider',
  466 + label: '左边距(像素)',
  467 + name: 'marginLeft',
  468 + required: false,
  469 + placeholder: '',
  470 + value: 10,
  471 + }, {
  472 + type: 'el-slider',
  473 + label: '顶边距(像素)',
  474 + name: 'marginTop',
  475 + required: false,
  476 + placeholder: '',
  477 + value: 50,
  478 + }, {
  479 + type: 'el-slider',
  480 + label: '右边距(像素)',
  481 + name: 'marginRight',
  482 + required: false,
  483 + placeholder: '',
  484 + value: 40,
  485 + }, {
  486 + type: 'el-slider',
  487 + label: '底边距(像素)',
  488 + name: 'marginBottom',
  489 + required: false,
  490 + placeholder: '',
  491 + value: 10,
  492 + },
  493 + ],
  494 + },
  495 + {
  496 + name: '图例操作',
  497 + list: [
  498 + {
  499 + type: 'el-switch',
  500 + label: '显示',
  501 + name: 'isShowLegend',
  502 + required: false,
  503 + placeholder: '',
  504 + value: false,
  505 + },
  506 + {
  507 + type: 'vue-color',
  508 + label: '字体颜色',
  509 + name: 'lengedColor',
  510 + required: false,
  511 + placeholder: '',
  512 + value: '#fff',
  513 + },
  514 + {
  515 + type: 'el-input-number',
  516 + label: '字体大小',
  517 + name: 'lengedFontSize',
  518 + required: false,
  519 + placeholder: '',
  520 + value: 16,
  521 + },
  522 + {
  523 + type: 'el-input-number',
  524 + label: '图例宽度',
  525 + name: 'lengedWidth',
  526 + required: false,
  527 + placeholder: '',
  528 + value: 15,
  529 + },
  530 + {
  531 + type: 'el-select',
  532 + label: '横向位置',
  533 + name: 'lateralPosition',
  534 + required: false,
  535 + placeholder: '',
  536 + selectOptions: [
  537 + {code: 'center', name: '居中'},
  538 + {code: 'left', name: '左对齐'},
  539 + {code: 'right', name: '右对齐'},
  540 + ],
  541 + value: 'center'
  542 + },
  543 + {
  544 + type: 'el-select',
  545 + label: '纵向位置',
  546 + name: 'longitudinalPosition',
  547 + required: false,
  548 + placeholder: '',
  549 + selectOptions: [
  550 + {code: 'top', name: '顶部'},
  551 + {code: 'bottom', name: '底部'},
  552 + ],
  553 + value: 'top'
  554 + },
  555 + {
  556 + type: 'el-select',
  557 + label: '布局前置',
  558 + name: 'layoutFront',
  559 + required: false,
  560 + placeholder: '',
  561 + selectOptions: [
  562 + {code: 'vertical', name: '竖排'},
  563 + {code: 'horizontal', name: '横排'},
  564 + ],
  565 + value: 'horizontal'
  566 + },
  567 + ],
  568 + },
  569 + {
  570 + name: '自定义配色',
  571 + list: [
  572 + {
  573 + type: 'customColor',
  574 + label: '',
  575 + name: 'customColor',
  576 + required: false,
  577 + value: [{color: '#87cefa'}, {color: '#ff7f50'}, {color: '#da70d6'}, {color: '#32cd32'}, {color: '#6495ed'}],
  578 + },
  579 + ],
  580 + },
  581 + ],
  582 + ],
  583 + // 数据
  584 + data: [
  585 + {
  586 + type: 'el-radio-group',
  587 + label: '数据类型',
  588 + name: 'dataType',
  589 + require: false,
  590 + placeholder: '',
  591 + selectValue: true,
  592 + selectOptions: [
  593 + {
  594 + code: 'staticData',
  595 + name: '静态数据',
  596 + },
  597 + {
  598 + code: 'dynamicData',
  599 + name: '动态数据',
  600 + },
  601 + ],
  602 + value: 'staticData',
  603 + },
  604 + {
  605 + type: 'el-input-number',
  606 + label: '刷新时间(毫秒)',
  607 + name: 'refreshTime',
  608 + relactiveDom: 'dataType',
  609 + relactiveDomValue: 'dynamicData',
  610 + value: 5000
  611 + },
  612 + {
  613 + type: 'el-button',
  614 + label: '静态数据',
  615 + name: 'staticData',
  616 + required: false,
  617 + placeholder: '',
  618 + relactiveDom: 'dataType',
  619 + relactiveDomValue: 'staticData',
  620 + value: [
  621 + {"axis":"2021-07-25","name":"A","data":"12"},
  622 + {"axis":"2021-07-25","name":"B","data":"20"},
  623 + {"axis":"2021-07-26","name":"B","data":"5"},
  624 + {"axis":"2021-07-27","name":"A","data":"15"},
  625 + {"axis":"2021-07-27","name":"B","data":"30"},
  626 + ],
  627 + },
  628 + {
  629 + type: 'dycustComponents',
  630 + label: '',
  631 + name: 'dynamicData',
  632 + required: false,
  633 + placeholder: '',
  634 + relactiveDom: 'dataType',
  635 + relactiveDomValue: 'dynamicData',
  636 + chartType: 'monitor-stackchart',
  637 + dictKey: 'STACK_PROPERTIES',
  638 + value: '',
  639 + },
  640 + ],
  641 + // 坐标
  642 + position: [
  643 + {
  644 + type: 'el-input-number',
  645 + label: '左边距',
  646 + name: 'left',
  647 + required: false,
  648 + placeholder: '',
  649 + value: 0,
  650 + },
  651 + {
  652 + type: 'el-input-number',
  653 + label: '上边距',
  654 + name: 'top',
  655 + required: false,
  656 + placeholder: '',
  657 + value: 0,
  658 + },
  659 + {
  660 + type: 'el-input-number',
  661 + label: '宽度',
  662 + name: 'width',
  663 + required: false,
  664 + placeholder: '该容器在1920px大屏中的宽度',
  665 + value: 400,
  666 + },
  667 + {
  668 + type: 'el-input-number',
  669 + label: '高度',
  670 + name: 'height',
  671 + required: false,
  672 + placeholder: '该容器在1080px大屏中的高度',
  673 + value: 200,
  674 + },
  675 + ],
  676 + }
  677 +}
  1 +/*
  2 + * @Descripttion: 折线图json
  3 + * @version:
  4 + * @Author: lsq
  5 + * @Date: 2022/2/21 9:51
  6 + * @LastEditors: lsq
  7 + * @LastEditTime: 2022/2/21 9:52
  8 + */
  9 +export const monitorCustomLineChart = {
  10 + code: 'monitor-custom-line-chart',
  11 + type: 'chart',
  12 + label: '速率/使用率折线图',
  13 + icon: 'icontubiaozhexiantu',
  14 + options: {
  15 + // 配置
  16 + setup: [
  17 + {
  18 + type: 'el-input-text',
  19 + label: '图层名称',
  20 + name: 'layerName',
  21 + required: false,
  22 + placeholder: '',
  23 + value: '折线图',
  24 + },
  25 + {
  26 + type: 'vue-color',
  27 + label: '背景颜色',
  28 + name: 'background',
  29 + required: false,
  30 + placeholder: '',
  31 + value: ''
  32 + },
  33 + {
  34 + type: 'el-select',
  35 + label: 'kpiId',
  36 + name: 'kpiId',
  37 + required: false,
  38 + placeholder: '',
  39 + selectOptions: [
  40 + {code: 'KPID339D51B', name: 'KPID339D51B(网卡上行速率)'},
  41 + {code: 'KPI02062F43', name: 'KPI02062F43(网卡下行速率)'},
  42 + {code: 'KPI7054BC34', name: 'KPI7054BC34(CPU使用率走势)'},
  43 + {code: 'KPI31CB8D97', name: 'KPI31CB8D97(内存使用率走势)'},
  44 + {code: 'KPI449F5365', name: 'KPI449F5365(文件系统使用率)'},
  45 + {code: 'KPI97373ED0', name: 'KPI97373ED0(磁盘IO读速率)'},
  46 + {code: 'KPI95378FE0', name: 'KPI95378FE0(磁盘IO写速率)'},
  47 + {code: 'KPI66BD013F', name: 'KPI66BD013F(磁盘IO处理时间)'},
  48 + {code: 'KPI3E6ED38B', name: 'KPI3E6ED38B(磁盘IO响应时间)'},
  49 + ],
  50 + value: 'KPID339D51B',
  51 + },
  52 + {
  53 + type: 'el-input-text',
  54 + label: 'flag',
  55 + name: 'flag',
  56 + required: false,
  57 + placeholder: '',
  58 + value: '',
  59 + },
  60 + [
  61 + {
  62 + name: '折线设置',
  63 + list: [
  64 + {
  65 + type: 'el-switch',
  66 + label: '标记点',
  67 + name: 'markPoint',
  68 + required: false,
  69 + placeholder: '',
  70 + value: true,
  71 + },
  72 + {
  73 + type: 'el-slider',
  74 + label: '点大小',
  75 + name: 'pointSize',
  76 + required: false,
  77 + placeholder: '',
  78 + value: 6,
  79 + },
  80 + {
  81 + type: 'vue-color',
  82 + label: '点颜色',
  83 + name: 'itemStyleColor',
  84 + required: false,
  85 + placeholder: '',
  86 + value: '#2883d0'
  87 + },
  88 + {
  89 + type: 'el-switch',
  90 + label: '平滑曲线',
  91 + name: 'smoothCurve',
  92 + required: false,
  93 + placeholder: '',
  94 + value: true,
  95 + },
  96 + {
  97 + type: 'el-switch',
  98 + label: '面积堆积',
  99 + name: 'area',
  100 + required: false,
  101 + placeholder: '',
  102 + value: true,
  103 + },
  104 + {
  105 + type: 'el-slider',
  106 + label: '面积厚度',
  107 + name: 'areaThickness',
  108 + required: false,
  109 + placeholder: '',
  110 + value: 5,
  111 + },
  112 + {
  113 + type: 'el-slider',
  114 + label: '线条宽度',
  115 + name: 'lineWidth',
  116 + required: false,
  117 + placeholder: '',
  118 + value: 1,
  119 + },
  120 + ],
  121 + },
  122 + {
  123 + name: '标题设置',
  124 + list: [
  125 + {
  126 + type: 'el-switch',
  127 + label: '标题',
  128 + name: 'isNoTitle',
  129 + required: false,
  130 + placeholder: '',
  131 + value: true
  132 + },
  133 + {
  134 + type: 'el-input-text',
  135 + label: '标题',
  136 + name: 'titleText',
  137 + required: false,
  138 + placeholder: '',
  139 + value: '网卡上行速率',
  140 + },
  141 + {
  142 + type: 'vue-color',
  143 + label: '字体颜色',
  144 + name: 'textColor',
  145 + required: false,
  146 + placeholder: '',
  147 + value: '#1e9fff'
  148 + },
  149 + {
  150 + type: 'el-select',
  151 + label: '字体粗细',
  152 + name: 'textFontWeight',
  153 + required: false,
  154 + placeholder: '',
  155 + selectOptions: [
  156 + {code: 'normal', name: '正常'},
  157 + {code: 'bold', name: '粗体'},
  158 + {code: 'bolder', name: '特粗体'},
  159 + {code: 'lighter', name: '细体'}
  160 + ],
  161 + value: 'normal'
  162 + },
  163 + {
  164 + type: 'el-input-number',
  165 + label: '字体字号',
  166 + name: 'textFontSize',
  167 + required: false,
  168 + placeholder: '',
  169 + value: 16
  170 + },
  171 + {
  172 + type: 'el-select',
  173 + label: '字体位置',
  174 + name: 'textAlign',
  175 + required: false,
  176 + placeholder: '',
  177 + selectOptions: [
  178 + {code: 'center', name: '居中'},
  179 + {code: 'left', name: '左对齐'},
  180 + {code: 'right', name: '右对齐'},
  181 + ],
  182 + value: 'left'
  183 + },
  184 + {
  185 + type: 'el-input-text',
  186 + label: '副标题',
  187 + name: 'subText',
  188 + required: false,
  189 + placeholder: '',
  190 + value: ''
  191 + },
  192 + {
  193 + type: 'vue-color',
  194 + label: '字体颜色',
  195 + name: 'subTextColor',
  196 + required: false,
  197 + placeholder: '',
  198 + value: '#fff'
  199 + },
  200 + {
  201 + type: 'el-select',
  202 + label: '字体粗细',
  203 + name: 'subTextFontWeight',
  204 + required: false,
  205 + placeholder: '',
  206 + selectOptions: [
  207 + {code: 'normal', name: '正常'},
  208 + {code: 'bold', name: '粗体'},
  209 + {code: 'bolder', name: '特粗体'},
  210 + {code: 'lighter', name: '细体'}
  211 + ],
  212 + value: 'normal'
  213 + },
  214 + {
  215 + type: 'el-input-number',
  216 + label: '字体字号',
  217 + name: 'subTextFontSize',
  218 + required: false,
  219 + placeholder: '',
  220 + value: 20
  221 + },
  222 + ],
  223 + },
  224 + {
  225 + name: 'X轴设置',
  226 + list: [
  227 + {
  228 + type: 'el-switch',
  229 + label: '显示',
  230 + name: 'hideX',
  231 + required: false,
  232 + placeholder: '',
  233 + value: true,
  234 + },
  235 + {
  236 + type: 'el-input-text',
  237 + label: '坐标名',
  238 + name: 'xName',
  239 + required: false,
  240 + placeholder: '',
  241 + value: ''
  242 + },
  243 + {
  244 + type: 'vue-color',
  245 + label: '坐标名颜色',
  246 + name: 'nameColorX',
  247 + required: false,
  248 + placeholder: '',
  249 + value: '#fff',
  250 + },
  251 + {
  252 + type: 'el-input-number',
  253 + label: '坐标字号',
  254 + name: 'nameFontSizeX',
  255 + required: false,
  256 + placeholder: '',
  257 + value: 14,
  258 + },
  259 + {
  260 + type: 'vue-color',
  261 + label: '数值颜色',
  262 + name: 'Xcolor',
  263 + required: false,
  264 + placeholder: '',
  265 + value: '#666',
  266 + },
  267 + {
  268 + type: 'el-input-number',
  269 + label: '数值字号',
  270 + name: 'fontSizeX',
  271 + required: false,
  272 + placeholder: '',
  273 + value: 14,
  274 + },
  275 + {
  276 + type: 'el-slider',
  277 + label: '数值角度',
  278 + name: 'textAngle',
  279 + required: false,
  280 + placeholder: '',
  281 + value: 0
  282 + },
  283 + {
  284 + type: 'el-input-number',
  285 + label: '数值间隔',
  286 + name: 'textInterval',
  287 + required: false,
  288 + placeholder: '',
  289 + value: 1
  290 + },
  291 + {
  292 + type: 'el-switch',
  293 + label: '轴反转',
  294 + name: 'reversalX',
  295 + required: false,
  296 + placeholder: '',
  297 + value: false
  298 + },
  299 + {
  300 + type: 'vue-color',
  301 + label: '轴颜色',
  302 + name: 'lineColorX',
  303 + required: false,
  304 + placeholder: '',
  305 + value: '#c9c9c9',
  306 + },
  307 + {
  308 + type: 'el-switch',
  309 + label: '分割线显示',
  310 + name: 'isShowSplitLineX',
  311 + require: false,
  312 + placeholder: '',
  313 + value: false,
  314 + },
  315 + {
  316 + type: 'vue-color',
  317 + label: '分割线颜色',
  318 + name: 'splitLineColorX',
  319 + required: false,
  320 + placeholder: '',
  321 + value: '#fff',
  322 + },
  323 + {
  324 + type: 'el-switch',
  325 + label: '分割区显示',
  326 + name: 'splitArea',
  327 + require: false,
  328 + placeholder: '',
  329 + value: true,
  330 + },
  331 + {
  332 + type: 'vue-color',
  333 + label: '分割区颜色',
  334 + name: 'splitAreaColor',
  335 + required: false,
  336 + placeholder: '',
  337 + value: 'rgba(200,200,200,0.1)',
  338 + },
  339 + ],
  340 + },
  341 + {
  342 + name: 'Y轴设置',
  343 + list: [
  344 + {
  345 + type: 'el-switch',
  346 + label: '显示',
  347 + name: 'isShowY',
  348 + require: false,
  349 + placeholder: '',
  350 + value: true,
  351 + },
  352 + {
  353 + type: 'el-input-text',
  354 + label: '坐标名',
  355 + name: 'textNameY',
  356 + require: false,
  357 + placeholder: '',
  358 + value: ''
  359 + },
  360 + {
  361 + type: 'vue-color',
  362 + label: '坐标名颜色',
  363 + name: 'nameColorY',
  364 + required: false,
  365 + placeholder: '',
  366 + value: '#fff',
  367 + },
  368 + {
  369 + type: 'el-input-number',
  370 + label: '坐标字号',
  371 + name: 'namefontSizeY',
  372 + required: false,
  373 + placeholder: '',
  374 + value: 14,
  375 + },
  376 + {
  377 + type: 'vue-color',
  378 + label: '数值颜色',
  379 + name: 'colorY',
  380 + required: false,
  381 + placeholder: '',
  382 + value: '#666',
  383 + },
  384 + {
  385 + type: 'el-input-number',
  386 + label: '数值字号',
  387 + name: 'fontSizeY',
  388 + required: false,
  389 + placeholder: '',
  390 + value: 14,
  391 + },
  392 + {
  393 + type: 'el-slider',
  394 + label: '数值角度',
  395 + name: 'ytextAngle',
  396 + required: false,
  397 + placeholder: '',
  398 + value: 0
  399 + },
  400 + {
  401 + type: 'el-switch',
  402 + label: '缩放',
  403 + name: 'scale',
  404 + require: false,
  405 + placeholder: '',
  406 + value: false,
  407 + },
  408 + {
  409 + type: 'el-input-number',
  410 + label: '均分',
  411 + name: 'splitNumber',
  412 + required: false,
  413 + placeholder: '',
  414 + value: ''
  415 + },
  416 + {
  417 + type: 'el-switch',
  418 + label: '轴反转',
  419 + name: 'reversalY',
  420 + required: false,
  421 + placeholder: '',
  422 + value: false
  423 + },
  424 + {
  425 + type: 'vue-color',
  426 + label: '轴颜色',
  427 + name: 'lineColorY',
  428 + required: false,
  429 + placeholder: '',
  430 + value: '#c9c9c9',
  431 + },
  432 + {
  433 + type: 'el-switch',
  434 + label: '分割线显示',
  435 + name: 'isShowSplitLineY',
  436 + require: false,
  437 + placeholder: '',
  438 + value: true,
  439 + },
  440 + {
  441 + type: 'vue-color',
  442 + label: '分割线颜色',
  443 + name: 'splitLineColorY',
  444 + required: false,
  445 + placeholder: '',
  446 + value: '#c9c9c9',
  447 + }
  448 + ],
  449 + },
  450 + {
  451 + name: '数值设定',
  452 + list: [
  453 + {
  454 + type: 'el-switch',
  455 + label: '显示',
  456 + name: 'isShow',
  457 + required: false,
  458 + placeholder: '',
  459 + value: false
  460 + },
  461 + {
  462 + type: 'el-input-number',
  463 + label: '字体大小',
  464 + name: 'fontSize',
  465 + required: false,
  466 + placeholder: '',
  467 + value: 12
  468 + },
  469 + {
  470 + type: 'vue-color',
  471 + label: '字体颜色',
  472 + name: 'subTextColor',
  473 + required: false,
  474 + placeholder: '',
  475 + value: '#fff'
  476 + },
  477 + {
  478 + type: 'el-select',
  479 + label: '字体粗细',
  480 + name: 'fontWeight',
  481 + required: false,
  482 + placeholder: '',
  483 + selectOptions: [
  484 + {code: 'normal', name: '正常'},
  485 + {code: 'bold', name: '粗体'},
  486 + {code: 'bolder', name: '特粗体'},
  487 + {code: 'lighter', name: '细体'}
  488 + ],
  489 + value: 'normal'
  490 + },
  491 + ],
  492 + },
  493 + {
  494 + name: '提示语设置',
  495 + list: [
  496 + {
  497 + type: 'el-input-text',
  498 + label: '字体大小',
  499 + name: 'fontSize',
  500 + required: false,
  501 + placeholder: '',
  502 + value: '14'
  503 + },
  504 + {
  505 + type: 'vue-color',
  506 + label: '字体颜色',
  507 + name: 'lineColor',
  508 + required: false,
  509 + placeholder: '',
  510 + value: '#fff'
  511 + },
  512 + ],
  513 + },
  514 + {
  515 + name: '坐标轴边距设置',
  516 + list: [
  517 + {
  518 + type: 'el-slider',
  519 + label: '左边距(像素)',
  520 + name: 'marginLeft',
  521 + required: false,
  522 + placeholder: '',
  523 + value: 10,
  524 + },
  525 + {
  526 + type: 'el-slider',
  527 + label: '顶边距(像素)',
  528 + name: 'marginTop',
  529 + required: false,
  530 + placeholder: '',
  531 + value: 50,
  532 + },
  533 + {
  534 + type: 'el-slider',
  535 + label: '右边距(像素)',
  536 + name: 'marginRight',
  537 + required: false,
  538 + placeholder: '',
  539 + value: 40,
  540 + },
  541 + {
  542 + type: 'el-slider',
  543 + label: '底边距(像素)',
  544 + name: 'marginBottom',
  545 + required: false,
  546 + placeholder: '',
  547 + value: 10,
  548 + },
  549 + ],
  550 + },
  551 + {
  552 + name: '图例操作',
  553 + list: [
  554 + {
  555 + type: 'el-switch',
  556 + label: '图例',
  557 + name: 'isShowLegend',
  558 + required: false,
  559 + placeholder: '',
  560 + value: true,
  561 + },
  562 + {
  563 + type: 'vue-color',
  564 + label: '字体颜色',
  565 + name: 'lengedColor',
  566 + required: false,
  567 + placeholder: '',
  568 + value: '#fff',
  569 + },
  570 + {
  571 + type: 'el-input-number',
  572 + label: '字体大小',
  573 + name: 'lengedFontSize',
  574 + required: false,
  575 + placeholder: '',
  576 + value: 16,
  577 + },
  578 + {
  579 + type: 'el-input-number',
  580 + label: '图例宽度',
  581 + name: 'lengedWidth',
  582 + required: false,
  583 + placeholder: '',
  584 + value: 15,
  585 + },
  586 + {
  587 + type: 'el-select',
  588 + label: '横向位置',
  589 + name: 'lateralPosition',
  590 + required: false,
  591 + placeholder: '',
  592 + selectOptions: [
  593 + {code: 'left', name: '左对齐'},
  594 + {code: 'right', name: '右对齐'},
  595 + ],
  596 + value: 'left'
  597 + },
  598 + {
  599 + type: 'el-select',
  600 + label: '纵向位置',
  601 + name: 'longitudinalPosition',
  602 + required: false,
  603 + placeholder: '',
  604 + selectOptions: [
  605 + {code: 'top', name: '顶部'},
  606 + {code: 'bottom', name: '底部'},
  607 + ],
  608 + value: ''
  609 + },
  610 + {
  611 + type: 'el-select',
  612 + label: '布局前置',
  613 + name: 'layoutFront',
  614 + required: false,
  615 + placeholder: '',
  616 + selectOptions: [
  617 + {code: 'vertical', name: '竖排'},
  618 + {code: 'horizontal', name: '横排'},
  619 + ],
  620 + value: ''
  621 + },
  622 + ],
  623 + },
  624 + {
  625 + name: '自定义配色',
  626 + list: [
  627 + {
  628 + type: 'customColor',
  629 + label: '',
  630 + name: 'customColor',
  631 + required: false,
  632 + value: [{color: '#1E90FF'}],
  633 + },
  634 + ],
  635 + },
  636 + ],
  637 + ],
  638 + // 数据
  639 + data: [
  640 + {
  641 + type: 'el-radio-group',
  642 + label: '数据类型',
  643 + name: 'dataType',
  644 + require: false,
  645 + placeholder: '',
  646 + selectValue: true,
  647 + selectOptions: [
  648 + {
  649 + code: 'staticData',
  650 + name: '静态数据',
  651 + },
  652 + {
  653 + code: 'dynamicData',
  654 + name: '动态数据',
  655 + },
  656 + ],
  657 + value: 'staticData',
  658 + },
  659 + {
  660 + type: 'el-input-number',
  661 + label: '刷新时间(毫秒)',
  662 + name: 'refreshTime',
  663 + relactiveDom: 'dataType',
  664 + relactiveDomValue: 'dynamicData',
  665 + value: 5000
  666 + },
  667 + {
  668 + type: 'el-button',
  669 + label: '静态数据',
  670 + name: 'staticData',
  671 + required: false,
  672 + placeholder: '',
  673 + relactiveDom: 'dataType',
  674 + relactiveDomValue: 'staticData',
  675 + value: [
  676 + {"axis": "苹果", "data": 1000},
  677 + {"axis": "三星", "data": 2229},
  678 + {"axis": "小米", "data": 3879},
  679 + {"axis": "oppo", "data": 2379},
  680 + {"axis": "vivo", "data": 4079},
  681 + ],
  682 + },
  683 + {
  684 + type: 'dycustComponents',
  685 + label: '',
  686 + name: 'dynamicData',
  687 + required: false,
  688 + placeholder: '',
  689 + relactiveDom: 'dataType',
  690 + chartType: 'custom-linechart',
  691 + dictKey: 'LINE_PROPERTIES',
  692 + relactiveDomValue: 'dynamicData',
  693 + },
  694 + ],
  695 + // 坐标
  696 + position: [
  697 + {
  698 + type: 'el-input-number',
  699 + label: '左边距',
  700 + name: 'left',
  701 + required: false,
  702 + placeholder: '',
  703 + value: 0,
  704 + },
  705 + {
  706 + type: 'el-input-number',
  707 + label: '上边距',
  708 + name: 'top',
  709 + required: false,
  710 + placeholder: '',
  711 + value: 0,
  712 + },
  713 + {
  714 + type: 'el-input-number',
  715 + label: '宽度',
  716 + name: 'width',
  717 + required: false,
  718 + placeholder: '该容器在1920px大屏中的宽度',
  719 + value: 400,
  720 + },
  721 + {
  722 + type: 'el-input-number',
  723 + label: '高度',
  724 + name: 'height',
  725 + required: false,
  726 + placeholder: '该容器在1080px大屏中的高度',
  727 + value: 200,
  728 + },
  729 + ],
  730 + }
  731 +}
@@ -31,6 +31,42 @@ export const monitorDetailTable = { @@ -31,6 +31,42 @@ export const monitorDetailTable = {
31 }, 31 },
32 { 32 {
33 type: 'el-select', 33 type: 'el-select',
  34 + label: 'kpiId',
  35 + name: 'kpiId',
  36 + required: false,
  37 + placeholder: '',
  38 + selectOptions: [
  39 + {code: 'KPI7AC1664E,KPI449F5365,KPIA91F44E7,KPI98306224,KPIE25925F7,KPI77C28BBA', name: 'KPI7AC1664E,KPI449F5365,KPIA91F44E7,KPI98306224,KPIE25925F7,KPI77C28BBA(文件系统)'},
  40 + {code: 'KPI7AC1664E,KPI9C988E1F,KPI12994CF8,KPI15CCF495,KPIA339DF94,KPI77C28BBA', name: 'KPI7AC1664E,KPI9C988E1F,KPI12994CF8,KPI15CCF495,KPIA339DF94,KPI77C28BBA(INODE信息)'},
  41 + {code: 'KPIFABFD741,KPIA0A69A33,KPID339D51B,KPI02062F43', name: 'KPIFABFD741,KPIA0A69A33,KPID339D51B,KPI02062F43(网卡信息)'},
  42 + {code: 'KPI9D22EAB6,KPI5CA7AA50,KPI98183B26,KPI66BD013F,KPI3E6ED38B,KPI97373ED0,KPI95378FE0', name: 'KPI9D22EAB6,KPI5CA7AA50,KPI98183B26,KPI66BD013F,KPI3E6ED38B,KPI97373ED0,KPI95378FE0(磁盘信息)'},
  43 + ],
  44 + value: 'KPI7AC1664E,KPI449F5365,KPIA91F44E7,KPI98306224,KPIE25925F7,KPI77C28BBA',
  45 + },
  46 + {
  47 + type: 'el-select',
  48 + label: 'flag',
  49 + name: 'flag',
  50 + required: false,
  51 + placeholder: '',
  52 + selectOptions: [
  53 + {code: 'fs', name: 'fs(文件系统)'},
  54 + {code: 'inode', name: 'inode(INODE信息)'},
  55 + {code: 'net', name: 'net(网卡信息)'},
  56 + {code: 'disk', name: 'disk(磁盘信息)'},
  57 + ],
  58 + value: 'fs'
  59 + },
  60 + {
  61 + type: 'el-switch',
  62 + label: '告警表格',
  63 + name: 'isAlarm',
  64 + required: false,
  65 + placeholder: '',
  66 + value: false
  67 + },
  68 + {
  69 + type: 'el-select',
34 label: '字体位置', 70 label: '字体位置',
35 name: 'textAlign', 71 name: 'textAlign',
36 required: false, 72 required: false,
@@ -141,6 +177,14 @@ export const monitorDetailTable = { @@ -141,6 +177,14 @@ export const monitorDetailTable = {
141 list:[ 177 list:[
142 { 178 {
143 type: 'el-switch', 179 type: 'el-switch',
  180 + label: '是否有下探',
  181 + name: 'probeDown',
  182 + required: false,
  183 + placeholder: '',
  184 + value: true,
  185 + },
  186 + {
  187 + type: 'el-switch',
144 label: '告警设置', 188 label: '告警设置',
145 name: 'alarm_setting', 189 name: 'alarm_setting',
146 required: false, 190 required: false,
@@ -404,6 +448,7 @@ export const monitorDetailTable = { @@ -404,6 +448,7 @@ export const monitorDetailTable = {
404 {name: '文件系统总大小', key: 'KPIA91F44E7', width: '50%',isStatic:true,columnSort:2,componentName:1}, 448 {name: '文件系统总大小', key: 'KPIA91F44E7', width: '50%',isStatic:true,columnSort:2,componentName:1},
405 {name: '文件系统已使用大小', key: 'KPI98306224', width: '50%',isStatic:true,columnSort:3,componentName:1}, 449 {name: '文件系统已使用大小', key: 'KPI98306224', width: '50%',isStatic:true,columnSort:3,componentName:1},
406 {name: '卷名称', key: 'KPI77C28BBA', width: '50%',isStatic:true,columnSort:4,componentName:1}, 450 {name: '卷名称', key: 'KPI77C28BBA', width: '50%',isStatic:true,columnSort:4,componentName:1},
  451 + {name: '最近采集时间', key: 'KPIF74D9D2B', width: '50%',isStatic:true,columnSort:5,componentName:1},
407 ] 452 ]
408 } 453 }
409 ], 454 ],
@@ -58,9 +58,9 @@ export const monitorGaugeRate = { @@ -58,9 +58,9 @@ export const monitorGaugeRate = {
58 required: false, 58 required: false,
59 placeholder: '', 59 placeholder: '',
60 selectOptions: [ 60 selectOptions: [
61 - {code: 'KPI7054BC34', name: 'KPI7054BC34'},  
62 - {code: 'KPI31CB8D97', name: 'KPI31CB8D97'},  
63 - {code: 'KPI20352505', name: 'KPI20352505'}, 61 + {code: 'KPI7054BC34', name: 'KPI7054BC34(cpu使用率)'},
  62 + {code: 'KPI31CB8D97', name: 'KPI31CB8D97(内存使用率)'},
  63 + {code: 'KPI20352505', name: 'KPI20352505(虚拟内存)'},
64 ], 64 ],
65 value: 'KPI7054BC34', 65 value: 'KPI7054BC34',
66 }, 66 },
@@ -78,7 +78,7 @@ export const monitorGaugeRate = { @@ -78,7 +78,7 @@ export const monitorGaugeRate = {
78 name: 'flag', 78 name: 'flag',
79 required: false, 79 required: false,
80 placeholder: '', 80 placeholder: '',
81 - value: '', 81 + value: 'net',
82 }, 82 },
83 [ 83 [
84 { 84 {
@@ -169,7 +169,7 @@ export const monitorGaugeRate = { @@ -169,7 +169,7 @@ export const monitorGaugeRate = {
169 name: 'pieWeight', 169 name: 'pieWeight',
170 require: false, 170 require: false,
171 placeholder: '', 171 placeholder: '',
172 - value: 10, 172 + value: 30,
173 }, 173 },
174 ] 174 ]
175 }, 175 },
@@ -182,7 +182,7 @@ export const monitorGaugeRate = { @@ -182,7 +182,7 @@ export const monitorGaugeRate = {
182 name: 'color30p0', 182 name: 'color30p0',
183 required: false, 183 required: false,
184 placeholder: '', 184 placeholder: '',
185 - value: 'rgba(0, 237, 3,0.1)' 185 + value: 'rgba(255, 121, 93, 1)'
186 }, 186 },
187 { 187 {
188 type: 'vue-color', 188 type: 'vue-color',
@@ -190,7 +190,7 @@ export const monitorGaugeRate = { @@ -190,7 +190,7 @@ export const monitorGaugeRate = {
190 name: 'color30p5', 190 name: 'color30p5',
191 required: false, 191 required: false,
192 placeholder: '', 192 placeholder: '',
193 - value: 'rgba(0, 237, 3,0.6)' 193 + value: 'rgba(255, 121, 93, 1)'
194 }, 194 },
195 { 195 {
196 type: 'vue-color', 196 type: 'vue-color',
@@ -198,7 +198,7 @@ export const monitorGaugeRate = { @@ -198,7 +198,7 @@ export const monitorGaugeRate = {
198 name: 'color30p10', 198 name: 'color30p10',
199 required: false, 199 required: false,
200 placeholder: '', 200 placeholder: '',
201 - value: 'rgba(0, 237, 3,1)' 201 + value: 'rgba(255, 121, 93, 1)'
202 }, 202 },
203 ] 203 ]
204 }, 204 },
@@ -211,7 +211,7 @@ export const monitorGaugeRate = { @@ -211,7 +211,7 @@ export const monitorGaugeRate = {
211 name: 'color70p0', 211 name: 'color70p0',
212 required: false, 212 required: false,
213 placeholder: '', 213 placeholder: '',
214 - value: 'rgba(255, 184, 0,0.1)' 214 + value: 'rgba(255, 121, 93, 1)'
215 }, 215 },
216 { 216 {
217 type: 'vue-color', 217 type: 'vue-color',
@@ -219,7 +219,7 @@ export const monitorGaugeRate = { @@ -219,7 +219,7 @@ export const monitorGaugeRate = {
219 name: 'color70p5', 219 name: 'color70p5',
220 required: false, 220 required: false,
221 placeholder: '', 221 placeholder: '',
222 - value: 'rgba(255, 184, 0,0.6)' 222 + value: 'rgba(255, 121, 93, 1)'
223 }, 223 },
224 { 224 {
225 type: 'vue-color', 225 type: 'vue-color',
@@ -227,7 +227,7 @@ export const monitorGaugeRate = { @@ -227,7 +227,7 @@ export const monitorGaugeRate = {
227 name: 'color70p10', 227 name: 'color70p10',
228 required: false, 228 required: false,
229 placeholder: '', 229 placeholder: '',
230 - value: 'rgba(255, 184, 0,1)' 230 + value: 'rgba(255, 121, 93, 1)'
231 }, 231 },
232 ] 232 ]
233 }, 233 },
@@ -240,7 +240,7 @@ export const monitorGaugeRate = { @@ -240,7 +240,7 @@ export const monitorGaugeRate = {
240 name: 'color100p0', 240 name: 'color100p0',
241 required: false, 241 required: false,
242 placeholder: '', 242 placeholder: '',
243 - value: 'rgba(175, 36, 74,0.1)' 243 + value: 'rgba(255, 121, 93, 1)'
244 }, 244 },
245 { 245 {
246 type: 'vue-color', 246 type: 'vue-color',
@@ -248,7 +248,7 @@ export const monitorGaugeRate = { @@ -248,7 +248,7 @@ export const monitorGaugeRate = {
248 name: 'color100p5', 248 name: 'color100p5',
249 required: false, 249 required: false,
250 placeholder: '', 250 placeholder: '',
251 - value: 'rgba(255, 36, 74,0.6)' 251 + value: 'rgba(255, 121, 93, 1)'
252 }, 252 },
253 { 253 {
254 type: 'vue-color', 254 type: 'vue-color',
@@ -256,7 +256,7 @@ export const monitorGaugeRate = { @@ -256,7 +256,7 @@ export const monitorGaugeRate = {
256 name: 'color100p10', 256 name: 'color100p10',
257 required: false, 257 required: false,
258 placeholder: '', 258 placeholder: '',
259 - value: 'rgba(255, 36, 74,1)' 259 + value: 'rgba(255, 121, 93, 1)'
260 }, 260 },
261 ] 261 ]
262 }, 262 },
@@ -269,7 +269,7 @@ export const monitorGaugeRate = { @@ -269,7 +269,7 @@ export const monitorGaugeRate = {
269 name: 'tickShow', 269 name: 'tickShow',
270 required: false, 270 required: false,
271 placeholder: '', 271 placeholder: '',
272 - value: true, 272 + value: false,
273 }, 273 },
274 { 274 {
275 type: 'el-input-number', 275 type: 'el-input-number',
@@ -306,7 +306,7 @@ export const monitorGaugeRate = { @@ -306,7 +306,7 @@ export const monitorGaugeRate = {
306 name: 'splitShow', 306 name: 'splitShow',
307 required: false, 307 required: false,
308 placeholder: '', 308 placeholder: '',
309 - value: true, 309 + value: false,
310 }, 310 },
311 { 311 {
312 type: 'el-input-number', 312 type: 'el-input-number',
@@ -380,7 +380,7 @@ export const monitorGaugeRate = { @@ -380,7 +380,7 @@ export const monitorGaugeRate = {
380 name: 'labelColor', 380 name: 'labelColor',
381 required: false, 381 required: false,
382 placeholder: '', 382 placeholder: '',
383 - value: '#fff', 383 + value: 'rgba(18, 18, 18, 1)',
384 }, 384 },
385 { 385 {
386 type: 'el-input-number', 386 type: 'el-input-number',
@@ -40,6 +40,8 @@ import {monitorBasicInformation} from "./echartsConfigJson/monitorConfigJson/mon @@ -40,6 +40,8 @@ import {monitorBasicInformation} from "./echartsConfigJson/monitorConfigJson/mon
40 import {monitorDetailTable} from "./echartsConfigJson/monitorConfigJson/monitor-detail-table"; 40 import {monitorDetailTable} from "./echartsConfigJson/monitorConfigJson/monitor-detail-table";
41 import {monitorBgBorder} from "./echartsConfigJson/monitorConfigJson/monitor-bg-border"; 41 import {monitorBgBorder} from "./echartsConfigJson/monitorConfigJson/monitor-bg-border";
42 import {monitorGaugeRate} from "./echartsConfigJson/monitorConfigJson/monitor-gauge-rate"; 42 import {monitorGaugeRate} from "./echartsConfigJson/monitorConfigJson/monitor-gauge-rate";
  43 +import {monitorCustomLineChart} from "./echartsConfigJson/monitorConfigJson/monitor-custom-line-chart";
  44 +import {monitorCustomBarStack} from "./echartsConfigJson/monitorConfigJson/monitor-custom-bar-stack";
43 45
44 46
45 export const {widgetTool,monitor} = { 47 export const {widgetTool,monitor} = {
@@ -78,6 +80,8 @@ export const {widgetTool,monitor} = { @@ -78,6 +80,8 @@ export const {widgetTool,monitor} = {
78 monitorBasicInformation, 80 monitorBasicInformation,
79 monitorDetailTable, 81 monitorDetailTable,
80 monitorBgBorder, 82 monitorBgBorder,
81 - monitorGaugeRate 83 + monitorGaugeRate,
  84 + monitorCustomLineChart,
  85 + monitorCustomBarStack
82 ] 86 ]
83 } 87 }
  1 +<template>
  2 + <div :style="styleObj">
  3 + <v-chart :options="options" autoresize/>
  4 + </div>
  5 +</template>
  6 +
  7 +<script>
  8 +export default {
  9 + name: "customBarStack",
  10 + components: {},
  11 + props: {
  12 + value: Object,
  13 + ispreview: Boolean
  14 + },
  15 + data() {
  16 + return {
  17 + echartData:'',//动态数据
  18 + options: {
  19 + grid: {},
  20 + legend: {
  21 + textStyle: {
  22 + color: "#fff"
  23 + }
  24 + },
  25 + xAxis: {
  26 + type: "category",
  27 + data: [],
  28 + axisLabel: {
  29 + show: true,
  30 + textStyle: {
  31 + color: "#fff"
  32 + }
  33 + }
  34 + },
  35 + yAxis: {
  36 + type: "value",
  37 + data: [],
  38 + axisLabel: {
  39 + show: true,
  40 + textStyle: {
  41 + color: "#fff"
  42 + }
  43 + }
  44 + },
  45 + series: [
  46 + {
  47 + data: [],
  48 + name: '',
  49 + type: "bar",
  50 + barGap: "0%",
  51 + itemStyle: {
  52 + barBorderRadius: null
  53 + }
  54 + }
  55 + ]
  56 + },
  57 + optionsStyle: {}, // 样式
  58 + optionsData: {}, // 数据
  59 + optionsSetup: {},
  60 + flagInter: null
  61 + };
  62 + },
  63 + computed: {
  64 + styleObj() {
  65 + return {
  66 + position: this.ispreview ? "absolute" : "static",
  67 + width: this.optionsStyle.width + "px",
  68 + height: this.optionsStyle.height + "px",
  69 + left: this.optionsStyle.left + "px",
  70 + top: this.optionsStyle.top + "px",
  71 + background: this.optionsSetup.background
  72 + };
  73 + }
  74 + },
  75 + watch: {
  76 + value: {
  77 + handler(val) {
  78 + this.optionsStyle = val.position;
  79 + this.optionsData = val.data;
  80 + this.optionsCollapse = val.setup;
  81 + this.optionsSetup = val.setup;
  82 + this.editorOptions();
  83 + },
  84 + deep: true
  85 + }
  86 + },
  87 + mounted() {
  88 + this.optionsStyle = this.value.position;
  89 + this.optionsData = this.value.data;
  90 + this.optionsCollapse = this.value.setup;
  91 + this.optionsSetup = this.value.setup;
  92 + this.editorOptions();
  93 + },
  94 + methods: {
  95 + // 修改图标options属性
  96 + editorOptions() {
  97 + this.setOptionsTitle();
  98 + this.setOptionsX();
  99 + this.setOptionsY();
  100 + this.setOptionsTooltip();
  101 + this.setOptionsMargin();
  102 + this.setOptionsLegend();
  103 + this.setOptionsData();
  104 + },
  105 + // 标题修改
  106 + setOptionsTitle() {
  107 + const optionsSetup = this.optionsSetup;
  108 + const title = {};
  109 + title.text = optionsSetup.titleText;
  110 + title.show = optionsSetup.isNoTitle;
  111 + title.left = optionsSetup.textAlign;
  112 + title.textStyle = {
  113 + color: optionsSetup.textColor,
  114 + fontSize: optionsSetup.textFontSize,
  115 + fontWeight: optionsSetup.textFontWeight
  116 + };
  117 + title.subtext = optionsSetup.subText;
  118 + title.subtextStyle = {
  119 + color: optionsSetup.subTextColor,
  120 + fontWeight: optionsSetup.subTextFontWeight,
  121 + fontSize: optionsSetup.subTextFontSize
  122 + };
  123 + title.top='8px';
  124 + title.left='8px';
  125 + this.options.title = title;
  126 + },
  127 + // X轴设置
  128 + setOptionsX() {
  129 + const optionsSetup = this.optionsSetup;
  130 + const xAxis = {
  131 + type: "category",
  132 + show: optionsSetup.hideX, // 坐标轴是否显示
  133 + name: optionsSetup.xName, // 坐标轴名称
  134 + nameTextStyle: {
  135 + color: optionsSetup.xNameColor,
  136 + fontSize: optionsSetup.xNameFontSize
  137 + },
  138 + nameRotate: optionsSetup.textAngleX, // 文字角度
  139 + inverse: optionsSetup.reversalX, // 轴反转
  140 + axisLabel: {
  141 + show: true,
  142 + interval: optionsSetup.textInterval, // 文字角度
  143 + rotate: optionsSetup.textAngle, // 文字角度
  144 + textStyle: {
  145 + color: optionsSetup.Xcolor, // x轴 坐标文字颜色
  146 + fontSize: optionsSetup.fontSizeX
  147 + },
  148 + formatter: function (params) {
  149 + let newParamsName = "";
  150 + let paramsNameNumber = params.length;
  151 + let provideNumber = 6;
  152 + let rowNumber = Math.ceil(paramsNameNumber / provideNumber);
  153 + if (paramsNameNumber > provideNumber) {
  154 + for (let p = 0; p < rowNumber; p++) {
  155 + let tempStr = "";
  156 + let start = p * provideNumber;
  157 + let end = start + provideNumber;
  158 + if (p == rowNumber - 1) {
  159 + tempStr = params.substring(start, paramsNameNumber);
  160 + } else {
  161 + tempStr = params.substring(start, end) + "\n";
  162 + }
  163 + newParamsName += tempStr;
  164 + }
  165 +
  166 + } else {
  167 + newParamsName = params;
  168 + }
  169 + return newParamsName
  170 + }
  171 + },
  172 + axisLine: {
  173 + show: true,
  174 + lineStyle: {
  175 + color: optionsSetup.lineColorX
  176 + }
  177 + },
  178 + splitLine: {
  179 + show: optionsSetup.isShowSplitLineX,
  180 + lineStyle: {
  181 + color: optionsSetup.splitLineColorX
  182 + }
  183 + },
  184 + boundaryGap: ['10%', '10%'],
  185 + splitArea: {
  186 + show: optionsSetup.splitArea,
  187 + areaStyle: {
  188 + color: [optionsSetup.splitAreaColor, 'transparent'
  189 + ]
  190 + }
  191 + }
  192 + };
  193 + this.options.xAxis = xAxis;
  194 + },
  195 + // Y轴设置
  196 + setOptionsY() {
  197 + const optionsSetup = this.optionsSetup;
  198 + const yAxis = {
  199 + type: "value",
  200 + show: optionsSetup.isShowY, // 坐标轴是否显示
  201 + name: optionsSetup.textNameY, // 坐标轴名称
  202 + nameTextStyle: {
  203 + color: optionsSetup.NameColorY,
  204 + fontSize: optionsSetup.NameFontSizeY
  205 + },
  206 + inverse: optionsSetup.reversalY, // y轴反转
  207 + axisLabel: {
  208 + show: true,
  209 + rotate: optionsSetup.textAngleY,// 文字角度
  210 + textStyle: {
  211 + color: optionsSetup.colorY, // y轴 坐标文字颜色
  212 + fontSize: optionsSetup.fontSizeY
  213 + }
  214 + },
  215 + axisLine: {
  216 + show: true,
  217 + lineStyle: {
  218 + color: optionsSetup.lineColorY
  219 + }
  220 + },
  221 + splitLine: {
  222 + show: optionsSetup.isShowSplitLineY,
  223 + lineStyle: {
  224 + color: optionsSetup.splitLineColorY
  225 + }
  226 + }
  227 + };
  228 + this.options.yAxis = yAxis;
  229 + },
  230 + // tooltip 提示语设置，鼠标放置显示
  231 + setOptionsTooltip() {
  232 + const optionsSetup = this.optionsSetup;
  233 + let that=this;
  234 + let kpiList = optionsSetup.kpiId.split(',');
  235 + const tooltip = {
  236 + trigger: "axis",
  237 + show: true,
  238 + textStyle: {
  239 + color: optionsSetup.lineColor,
  240 + fontSize: optionsSetup.tipsFontSize
  241 + },
  242 + formatter: function (param) {
  243 + let tips = '<div style="text-align: left;margin-left:10px;">'+param[0].name + "</div>";
  244 + $.each(param, function (i, v) {
  245 + tips += '<div style="text-align: left;margin-left:5px;">'+v.marker + " ";
  246 + var kpiUnit = '';
  247 + if (that.echartData.kpiMap[kpiList[v.seriesIndex]]) {
  248 + kpiUnit = that.echartData.kpiMap[kpiList[v.seriesIndex]].kpiUnit;
  249 + }
  250 + tips += (v.seriesName && v.seriesName != '1') ? (" " + v.seriesName) : '';
  251 + tips += " : " + v.value + " " + kpiUnit + "</div>";
  252 + });
  253 + return tips;
  254 + }
  255 + };
  256 + this.options.tooltip = tooltip;
  257 + },
  258 + // 边距设置
  259 + setOptionsMargin() {
  260 + const optionsSetup = this.optionsSetup;
  261 + const grid = {
  262 + left: optionsSetup.marginLeft,
  263 + right: optionsSetup.marginRight,
  264 + bottom: optionsSetup.marginBottom,
  265 + top: optionsSetup.marginTop,
  266 + containLabel: true
  267 + };
  268 + this.options.grid = grid;
  269 + },
  270 + // 图例操作 legend
  271 + setOptionsLegend() {
  272 + const optionsSetup = this.optionsSetup;
  273 + const legend = this.options.legend;
  274 + legend.show = optionsSetup.isShowLegend;
  275 + legend.left = optionsSetup.lateralPosition;
  276 + legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto";
  277 + legend.bottom =
  278 + optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto";
  279 + legend.orient = optionsSetup.layoutFront;
  280 + legend.textStyle = {
  281 + color: optionsSetup.lengedColor,
  282 + fontSize: optionsSetup.lengedFontSize
  283 + };
  284 + legend.itemWidth = optionsSetup.lengedWidth;
  285 + },
  286 + // 数据解析
  287 + setOptionsData() {
  288 + const optionsSetup = this.optionsSetup;
  289 + const optionsData = this.optionsData; // 数据类型 静态 or 动态
  290 + optionsData.dataType == "staticData"
  291 + ? this.staticDataFn(optionsData.staticData, optionsSetup)
  292 + : this.dynamicDataFn(
  293 + optionsData.dynamicData,
  294 + optionsData.refreshTime,
  295 + optionsSetup
  296 + );
  297 + },
  298 + //去重
  299 + setUnique(arr) {
  300 + let newArr = [];
  301 + arr.forEach(item => {
  302 + return newArr.includes(item) ? '' : newArr.push(item);
  303 + });
  304 + return newArr;
  305 + },
  306 + //获取堆叠样式
  307 + getStackStyle() {
  308 + const optionsSetup = this.optionsSetup;
  309 + let style = ""
  310 + if (optionsSetup.stackStyle == "upDown") {
  311 + style = "total"
  312 + }
  313 + return style
  314 + },
  315 + //静态数据
  316 + staticDataFn(val) {
  317 + const optionsSetup = this.optionsSetup;
  318 + //颜色
  319 + const customColor = optionsSetup.customColor;
  320 + const arrColor = [];
  321 + for (let i = 0; i < customColor.length; i++) {
  322 + arrColor.push(customColor[i].color);
  323 + }
  324 + //数据
  325 + const series = [];
  326 + let xAxisList = []
  327 + let yAxisList = []
  328 + for (const i in val) {
  329 + xAxisList[i] = val[i].axis
  330 + yAxisList[i] = val[i].name
  331 + }
  332 + xAxisList = this.setUnique(xAxisList) // x轴 0725 0726 0727
  333 + yAxisList = this.setUnique(yAxisList) // y轴 A B C
  334 + for (const i in yAxisList) {
  335 + const data = new Array(yAxisList.length).fill(0)
  336 + for (const j in xAxisList) {
  337 + for (const k in val) {
  338 + if (val[k].name == yAxisList[i]) { // a = a
  339 + if (val[k].axis == xAxisList[j]) { // 0725
  340 + data[j] = val[k].data
  341 + }
  342 + }
  343 + }
  344 + }
  345 + series.push({
  346 + name: yAxisList[i],
  347 + type: "bar",
  348 + data: data,
  349 + barGap: "0%",
  350 + stack: this.getStackStyle(),
  351 + barWidth: optionsSetup.maxWidth,
  352 + label: {
  353 + show: optionsSetup.isShow,
  354 + position: "top",
  355 + distance: 10,
  356 + fontSize: optionsSetup.fontSize,
  357 + color: optionsSetup.subTextColor,
  358 + fontWeight: optionsSetup.fontWeight
  359 + },
  360 + //颜色，圆角属性
  361 + itemStyle: {
  362 + normal: {
  363 + color: arrColor[i],
  364 + barBorderRadius: optionsSetup.radius,
  365 + }
  366 + }
  367 + })
  368 + }
  369 + this.options.series = series
  370 + if (optionsSetup.verticalShow) {
  371 + this.options.xAxis.data = [];
  372 + this.options.yAxis.data = xAxisList;
  373 + this.options.xAxis.type = "value";
  374 + this.options.yAxis.type = "category";
  375 + } else {
  376 + this.options.xAxis.data = xAxisList;
  377 + this.options.yAxis.data = [];
  378 + this.options.xAxis.type = "category";
  379 + this.options.yAxis.type = "value";
  380 + }
  381 + },
  382 + // 动态数据
  383 + dynamicDataFn(val, refreshTime, optionsSetup) {
  384 + if (!val) return;
  385 + if (this.ispreview) {
  386 + this.getEchartData(val, optionsSetup);
  387 + this.flagInter = setInterval(() => {
  388 + this.getEchartData(val, optionsSetup);
  389 + }, refreshTime);
  390 + } else {
  391 + this.getEchartData(val, optionsSetup);
  392 + }
  393 + },
  394 + getEchartData(val, optionsSetup) {
  395 + const data = this.queryEchartsData(val);
  396 + data.then(res => {
  397 + this.echartData=res;
  398 + this.renderingFn(optionsSetup, res);
  399 + });
  400 + },
  401 + renderingFn(optionsSetup, val) {
  402 + //颜色
  403 + const customColor = optionsSetup.customColor;
  404 + const arrColor = [];
  405 + for (let i = 0; i < customColor.length; i++) {
  406 + arrColor.push(customColor[i].color);
  407 + }
  408 + // x轴
  409 + if (optionsSetup.verticalShow) {
  410 + this.options.xAxis.data = [];
  411 + this.options.yAxis.data = val.xAxis;
  412 + this.options.xAxis.type = "value";
  413 + this.options.yAxis.type = "category";
  414 + } else {
  415 + this.options.xAxis.data = val.xAxis;
  416 + this.options.yAxis.data = [];
  417 + this.options.xAxis.type = "category";
  418 + this.options.yAxis.type = "value";
  419 + }
  420 + const series = [];
  421 + for (const i in val.series) {
  422 + if (val.series[i].type == "bar") {
  423 + series.push({
  424 + name: val.series[i].name,
  425 + type: "bar",
  426 + data: val.series[i].data,
  427 + barGap: "0%",
  428 + stack: this.getStackStyle(),
  429 + barWidth: optionsSetup.maxWidth,
  430 + label: {
  431 + show: optionsSetup.isShow,
  432 + position: "top",
  433 + distance: 10,
  434 + fontSize: optionsSetup.fontSize,
  435 + color: optionsSetup.subTextColor,
  436 + fontWeight: optionsSetup.fontWeight
  437 + },
  438 + //颜色，圆角属性
  439 + itemStyle: {
  440 + normal: {
  441 + color: arrColor[i],
  442 + barBorderRadius: optionsSetup.radius,
  443 + }
  444 + }
  445 + })
  446 + }
  447 + }
  448 + this.options.series = series
  449 + }
  450 + }
  451 +};
  452 +</script>
  453 +
  454 +<style scoped lang="scss">
  455 +.echarts {
  456 + width: 100%;
  457 + height: 100%;
  458 + overflow: hidden;
  459 +}
  460 +
  461 +</style>
  1 +<template>
  2 + <div :style="styleObj">
  3 + <v-chart ref="myEchart" :options="options" autoresize/>
  4 + <!-- 直接点击数据展示 性能趋势弹框-->
  5 + <customDialog :dialogVisible="trendVisible" :heightStyle="heightStyle" :marginStyle="marginStyle"
  6 + :widthStyle="widthStyle" :title-name="optionsSetup.titleText"
  7 + :showFooter="true" :showCancelBtn="true" :showOkBtn="true" @hideDialog="hideDialog" @okFunc="okFunc"
  8 + >
  9 + <template v-slot>
  10 + <div class="txtScroll-top">
  11 + {{trendSrc}} <br/>
  12 + {{tableDataValue.name}}--{{tableDataValue.data}}
  13 + <iframe :src="trendSrc" class="layadmin-iframe" style="height: 99.5%!important;width: 100%;"/>
  14 + </div>
  15 + </template>
  16 + </customDialog>
  17 + </div>
  18 +</template>
  19 +
  20 +<script>
  21 +import customDialog from "../../designerComponents/customDialog";
  22 +import {getTrendBaseUrl} from "@/api/platform";
  23 +
  24 +export default {
  25 + name: "customLineChart",
  26 + components: {customDialog},
  27 + props: {
  28 + value: Object,
  29 + ispreview: Boolean
  30 + },
  31 + data() {
  32 + return {
  33 + dynamicData:'',//动态数据值
  34 + refreshTime:'',//刷新时间
  35 + flagInter:null,//定时
  36 + trendVisible:false,//性能趋势弹框
  37 + dataValue:'',
  38 + trendSrc:'',//性能趋势图地址
  39 + marginStyle:'',//弹框距离顶部距离
  40 + heightStyle:'',//弹框遮罩层高度
  41 + widthStyle:';',//弹框宽度样式
  42 + tableDataValue: {kpiId:'',name:'',data:''},
  43 + tableDataValueHead: {},
  44 + resType:'',
  45 + options: {
  46 + grid: {},
  47 + color: [],
  48 + title: {
  49 + text: "",
  50 + textStyle: {
  51 + color: "#fff"
  52 + }
  53 + },
  54 + tooltip: {
  55 + trigger: "item",
  56 + formatter: "{a} <br/>{b} : {c}%"
  57 + },
  58 + legend: {
  59 + textStyle: {
  60 + color: "#fff"
  61 + }
  62 + },
  63 + xAxis: {
  64 + type: "category",
  65 + data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  66 + axisLabel: {
  67 + show: true,
  68 + textStyle: {
  69 + color: "#fff"
  70 + }
  71 + }
  72 + },
  73 + yAxis: {
  74 + type: "value",
  75 + axisLabel: {
  76 + show: true,
  77 + textStyle: {
  78 + color: "#fff"
  79 + }
  80 + }
  81 + },
  82 + series: [
  83 + {
  84 + data: [],
  85 + type: "line"
  86 + }
  87 + ]
  88 + },
  89 + optionsStyle: {}, // 样式
  90 + optionsData: {}, // 数据
  91 + optionsCollapse: {}, // 图标属性
  92 + optionsSetup: {}
  93 + };
  94 + },
  95 + computed: {
  96 + styleObj() {
  97 + return {
  98 + position: this.ispreview ? "absolute" : "static",
  99 + width: this.optionsStyle.width + "px",
  100 + height: this.optionsStyle.height + "px",
  101 + left: this.optionsStyle.left + "px",
  102 + top: this.optionsStyle.top + "px",
  103 + background: this.optionsSetup.background
  104 + };
  105 + },
  106 + //获取url地址中的token
  107 + getUrlToken(){
  108 + let locationUrl=this.$route.query;
  109 + let resId=locationUrl.resId;
  110 + let token=locationUrl.access_token;
  111 + let urlObj={
  112 + resId:resId,
  113 + token:token
  114 + }
  115 + return urlObj;
  116 + },
  117 + //设置
  118 + kpiIdStyle(){
  119 + this.$set(this.tableDataValue,'kpiId',this.optionsSetup.kpiId)
  120 + this.tableDataValue.kpiId=this.optionsSetup.kpiId;
  121 + let obj={
  122 + kpiId:this.optionsSetup.kpiId,
  123 + targetId:this.optionsSetup.targetId,
  124 + flag:this.optionsSetup.flag
  125 + }
  126 + return obj;
  127 + },
  128 + },
  129 + watch: {
  130 + value: {
  131 + handler(val) {
  132 + this.optionsStyle = val.position;
  133 + this.optionsData = val.data;
  134 + this.optionsCollapse = val.collapse;
  135 + this.optionsSetup = val.setup;
  136 + this.editorOptions();
  137 + },
  138 + deep: true
  139 + }
  140 + },
  141 + created() {
  142 + this.optionsStyle = this.value.position;
  143 + this.optionsData = this.value.data;
  144 + this.optionsCollapse = this.value.collapse;
  145 + this.optionsSetup = this.value.setup;
  146 + this.editorOptions();
  147 + },
  148 + methods: {
  149 + // 修改图标options属性
  150 + editorOptions() {
  151 + this.setOptionsTitle();
  152 + this.setOptionsX();
  153 + this.setOptionsY();
  154 + this.setOptionsTop();
  155 + this.setOptionsTooltip();
  156 + this.setOptionsData();
  157 + this.setOptionsMargin();
  158 + this.setOptionsLegend();
  159 + this.setOptionsColor();
  160 + window.addEventListener("scroll", this.handleScroll, true); //监听滚动事件
  161 + },
  162 + // 标题修改
  163 + setOptionsTitle() {
  164 + const optionsSetup = this.optionsSetup;
  165 + const title = {};
  166 + title.text = optionsSetup.titleText;
  167 + title.show = optionsSetup.isNoTitle;
  168 + title.left = optionsSetup.textAlign;
  169 + title.textStyle = {
  170 + color: optionsSetup.textColor,
  171 + fontSize: optionsSetup.textFontSize,
  172 + fontWeight: optionsSetup.textFontWeight
  173 + };
  174 + title.subtext = optionsSetup.subText;
  175 + title.subtextStyle = {
  176 + color: optionsSetup.subTextColor,
  177 + fontWeight: optionsSetup.subTextFontWeight,
  178 + fontSize: optionsSetup.subTextFontSize
  179 + };
  180 + title.top='8px';
  181 + title.left='8px';
  182 + this.options.title = title;
  183 + },
  184 + // X轴设置
  185 + setOptionsX() {
  186 + const optionsSetup = this.optionsSetup;
  187 + const xAxis = {
  188 + type: "category",
  189 + show: optionsSetup.hideX, // 坐标轴是否显示
  190 + name: optionsSetup.xName, // 坐标轴名称
  191 + nameTextStyle: {
  192 + color: optionsSetup.nameColorX,
  193 + fontSize: optionsSetup.nameFontSizeX
  194 + },
  195 + nameRotate: optionsSetup.textAngle, // 文字角度
  196 + inverse: optionsSetup.reversalX, // 轴反转
  197 + axisLabel: {
  198 + show: true,
  199 + interval: optionsSetup.textInterval, // 文字间隔
  200 + rotate: optionsSetup.textAngle, // 文字角度
  201 + textStyle: {
  202 + color: optionsSetup.Xcolor, // x轴 坐标文字颜色
  203 + fontSize: optionsSetup.fontSizeX
  204 + }
  205 + },
  206 + axisLine: {
  207 + show: true,
  208 + lineStyle: {
  209 + color: optionsSetup.lineColorX
  210 + }
  211 + },
  212 + splitLine: {
  213 + show: optionsSetup.isShowSplitLineX,
  214 + lineStyle: {
  215 + color: optionsSetup.splitLineColorX
  216 + }
  217 + },
  218 + scale: true,
  219 + boundaryGap: ['10%', '10%'],
  220 + splitArea: {
  221 + show: optionsSetup.splitArea,
  222 + areaStyle: {
  223 + color: [optionsSetup.splitAreaColor, 'transparent'
  224 + ]
  225 + }
  226 + }
  227 + };
  228 + this.options.xAxis = xAxis;
  229 + },
  230 + // Y轴设置
  231 + setOptionsY() {
  232 + const optionsSetup = this.optionsSetup;
  233 + const yAxis = {
  234 + type: "value",
  235 + scale: optionsSetup.scale,
  236 + splitNumber: optionsSetup.splitNumber,// 均分
  237 + show: optionsSetup.isShowY, // 坐标轴是否显示
  238 + name: optionsSetup.textNameY, // 坐标轴名称
  239 + nameTextStyle: { // 别名
  240 + color: optionsSetup.nameColorY,
  241 + fontSize: optionsSetup.namefontSizeY
  242 + },
  243 + inverse: optionsSetup.reversalY, // 轴反转
  244 + axisLabel: {
  245 + show: true,
  246 + rotate: optionsSetup.ytextAngle, // 文字角度
  247 + textStyle: {
  248 + color: optionsSetup.colorY, // y轴 坐标文字颜色
  249 + fontSize: optionsSetup.fontSizeY
  250 + }
  251 + },
  252 + axisLine: {
  253 + show: false,//是否显示坐标线
  254 + lineStyle: {
  255 + color: optionsSetup.lineColorY
  256 + }
  257 + },
  258 + axisTick: {
  259 + show: false //是否显示坐标刻度
  260 + },
  261 + splitLine: {
  262 + show: optionsSetup.isShowSplitLineY,
  263 + lineStyle: {
  264 + color: optionsSetup.splitLineColorY
  265 + }
  266 + },
  267 + };
  268 + this.options.yAxis = yAxis;
  269 + },
  270 + // 折线设置
  271 + setOptionsTop() {
  272 + const optionsSetup = this.optionsSetup;
  273 + const series = this.options.series;
  274 + for (const key in series) {
  275 + if (series[key].type == "line") {
  276 + series[key].showSymbol = optionsSetup.markPoint;
  277 + series[key].symbolSize = optionsSetup.pointSize;
  278 + series[key].smooth = optionsSetup.smoothCurve;
  279 + /* series[key].itemStyle = {
  280 + normal : {
  281 + color:optionsSetup.itemStyleColor,
  282 + lineStyle:{
  283 + color:optionsSetup.itemStyleColor
  284 + }
  285 + }
  286 + }*/
  287 + if (optionsSetup.area) {
  288 + series[key].areaStyle = {
  289 + opacity: optionsSetup.areaThickness / 100
  290 + };
  291 + } else {
  292 + series[key].areaStyle = {
  293 + opacity: 0
  294 + };
  295 + }
  296 +
  297 + series[key].lineStyle = {
  298 + width: optionsSetup.lineWidth,
  299 + };
  300 + series[key].label = {
  301 + show: optionsSetup.isShow,
  302 + position: "top",
  303 + distance: 10,
  304 + fontSize: optionsSetup.fontSize,
  305 + color: optionsSetup.subTextColor,
  306 + fontWeight: optionsSetup.fontWeight
  307 + };
  308 + }
  309 + }
  310 + this.options.series = series;
  311 + },
  312 + // tooltip 设置
  313 + setOptionsTooltip() {
  314 + const optionsSetup = this.optionsSetup;
  315 + const tooltip = {
  316 + trigger: "axis",
  317 + show: true,
  318 + textStyle: {
  319 + color: optionsSetup.lineColor,
  320 + fontSize: optionsSetup.fontSize
  321 + },
  322 + formatter:function (param) {
  323 + let kpiName=optionsSetup.titleText;
  324 + let kpiUnit='';
  325 + // 鼠标悬浮线上提示
  326 + // 顶部提示
  327 + let tips = '<table>';
  328 + if (param.length == 1) {
  329 + tips += "<tr><td style='text-align:left;' colspan='4'>" + param[0].name + "</td></tr>";
  330 + } else {
  331 + tips += "<tr><td style='text-align:left;' colspan='4'>" + kpiName + " " + param[0].name + "</td></tr>";
  332 + }
  333 + // 每一条提示
  334 + $.each(param, function (i, v) {
  335 + tips += "<tr><td>" + v.marker + "</td>";
  336 + tips += '<td>';
  337 + if (param.length == 1) {
  338 + tips += (kpiName + ' ');
  339 + }
  340 + // tips += (v.seriesName && v.seriesName != '1' && !/series[0-9]+/.test(v.seriesName)) ? v.seriesName : '';
  341 + tips += '</td>'
  342 + tips += "<td>:&nbsp;</td><td>" + v.value;
  343 + tips += (kpiUnit == '%' ? kpiUnit : (' ' + kpiUnit)) + "</td></tr>";
  344 + });
  345 +
  346 +
  347 +
  348 + tips += '</table>'
  349 + return tips;
  350 + }
  351 + };
  352 + this.options.tooltip = tooltip;
  353 + },
  354 + // 边距设置
  355 + setOptionsMargin() {
  356 + const optionsSetup = this.optionsSetup;
  357 + const grid = {
  358 + left: optionsSetup.marginLeft,
  359 + right: optionsSetup.marginRight,
  360 + bottom: optionsSetup.marginBottom,
  361 + top: optionsSetup.marginTop,
  362 + containLabel: true
  363 + };
  364 + this.options.grid = grid;
  365 + },
  366 + // 图例操作 legend
  367 + setOptionsLegend() {
  368 + const optionsSetup = this.optionsSetup;
  369 + const legend = this.options.legend;
  370 + legend.show = optionsSetup.isShowLegend;
  371 + legend.left = optionsSetup.lateralPosition == "left" ? 0 : "auto";
  372 + legend.right = optionsSetup.lateralPosition == "right" ? 0 : "auto";
  373 + legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto";
  374 + legend.bottom =
  375 + optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto";
  376 + legend.orient = optionsSetup.layoutFront;
  377 + legend.textStyle = {
  378 + color: optionsSetup.lengedColor,
  379 + fontSize: optionsSetup.fontSize
  380 + };
  381 + legend.itemWidth = optionsSetup.lengedWidth;
  382 + },
  383 + // 图例颜色修改
  384 + setOptionsColor() {
  385 + const optionsSetup = this.optionsSetup;
  386 + const customColor = optionsSetup.customColor;
  387 + if (!customColor) return;
  388 + const arrColor = [];
  389 + for (let i = 0; i < customColor.length; i++) {
  390 + arrColor.push(customColor[i].color);
  391 + }
  392 + this.options.color = arrColor;
  393 + this.options = Object.assign({}, this.options);
  394 + },
  395 + // 处理数据
  396 + setOptionsData() {
  397 + const optionsData = this.optionsData; // 数据类型 静态 or 动态
  398 + optionsData.dataType == "staticData"
  399 + ? this.staticDataFn(optionsData.staticData)
  400 + : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
  401 + },
  402 + staticDataFn(val) {
  403 + const series = this.options.series;
  404 + let axis = [];
  405 + let data = [];
  406 + for (const i in val) {
  407 + axis[i] = val[i].axis;
  408 + data[i] = val[i].data
  409 + }
  410 + // x轴
  411 + this.options.xAxis.data = axis;
  412 + // series
  413 + for (const i in series) {
  414 + if (series[i].type == "line") {
  415 + series[i].data = data;
  416 + }
  417 + }
  418 + },
  419 + dynamicDataFn(val, refreshTime) {
  420 + if (!val) return;
  421 + if (this.ispreview) {
  422 + this.getEchartData(val);
  423 + this.dynamicData=val;
  424 + this.refreshTime=refreshTime;
  425 + this.flagInter = setInterval(() => {
  426 + this.getEchartData(val);
  427 + }, refreshTime);
  428 + } else {
  429 + this.getEchartData(val);
  430 + }
  431 + },
  432 + getEchartData(val) {
  433 + const data = this.queryEchartsData(val);
  434 + data.then(res => {
  435 + this.renderingFn(res);
  436 + });
  437 + },
  438 + renderingFn(val) {
  439 + // x轴
  440 + this.options.xAxis.data = val.xAxis;
  441 + // series
  442 + const series = this.options.series;
  443 + for (const i in series) {
  444 + if (series[i].type == "line") {
  445 + series[i].data = val.series[i].datas;
  446 + }
  447 + }
  448 + this.echartsClick();
  449 + },
  450 + echartsClick(){
  451 + let that=this;
  452 + this.$refs.myEchart.chart.on('click',function (params){
  453 + console.log("()()()()()",params.name,params.data,params)
  454 + that.$set(that.tableDataValue,'name',params.name)
  455 + that.$set(that.tableDataValue,'data',params.data)
  456 + that.goTrend();
  457 + })
  458 + },
  459 + //设置性能趋势图
  460 + setTrend(data){
  461 + let flg='&flg=';
  462 + if(data.flag){
  463 + flg+=data.flag;
  464 + }else {
  465 + flg+=data.subResId;
  466 + }
  467 + let urlParams='resId='+this.getUrlToken.resId+'&kpiId='+this.kpiIdStyle.kpiId+flg+'&warning='+data.isWarning
  468 + +'&ident='+data.ident
  469 + +'&trend='+data.trend
  470 + +'&name='+data.name;
  471 + let baseUrl=getTrendBaseUrl();
  472 + this.resType=data.resType;
  473 + this.trendSrc=baseUrl+'/vue3/index.html#/vue3/pieDetailLine?'+urlParams+'&access_token='+this.getUrlToken.token;
  474 + },
  475 + goTrend(){
  476 + this.setTrend(this.tableDataValue);
  477 + this.trendVisible=true;
  478 + if(this.flagInter){
  479 + clearInterval(this.flagInter);
  480 + }
  481 + },
  482 + //弹框关闭确定
  483 + hideDialog(){
  484 + this.trendVisible=false;
  485 + this.flagInter = setInterval(() => {
  486 + this.getEchartData(this.dynamicData);
  487 + }, this.refreshTime);
  488 + },
  489 + okFunc(){
  490 + this.trendVisible=false;
  491 + this.flagInter = setInterval(() => {
  492 + this.getEchartData(this.dynamicData);
  493 + }, this.refreshTime);
  494 + },
  495 + handleScroll(e){
  496 + let serviceTop = 44;
  497 +
  498 + let hotelTop = 344;
  499 +
  500 + if (e.target.scrollTop > 44 && e.target.scrollTop < 344) {
  501 +
  502 + this.selectNum = 0;
  503 + }
  504 +
  505 + if (e.target.scrollTop > 344) {
  506 +
  507 + this.selectNum = 1;
  508 +
  509 + }
  510 + // let scroll=window.pageYOffset;
  511 + let scroll=document.documentElement.scrollTop;
  512 + let documentHeight=document.documentElement.clientHeight;
  513 + if (self != top) {
  514 + //嵌入到监控系统iframe中弹框位置样式
  515 + // let documentHeight=document.body.scrollHeight;
  516 + this.heightStyle="height:"+(documentHeight+230)+'px;top:'+scroll+'px';
  517 + if(scroll<600){
  518 + this.marginStyle+="margin-top:"+(110)+'px;';
  519 +
  520 + }else{
  521 + this.marginStyle+="margin-top:"+(230)+'px;';
  522 +
  523 + }
  524 + }else{
  525 + //ajreport中弹框位置样式
  526 + this.heightStyle="height:"+(documentHeight+scroll)+'px;';
  527 + this.marginStyle+="margin-top:"+(scroll+100)+'px;';
  528 + }
  529 + },
  530 + }
  531 +};
  532 +</script>
  533 +
  534 +<style scoped lang="scss">
  535 +.echarts {
  536 + width: 100%;
  537 + height: 100%;
  538 + overflow: hidden;
  539 +}
  540 +</style>
@@ -2,8 +2,8 @@ @@ -2,8 +2,8 @@
2 <div :style="styleObj" @mouseleave.stop="closePressingDialog" ref="detailTable"> 2 <div :style="styleObj" @mouseleave.stop="closePressingDialog" ref="detailTable">
3 <div class="detail-table-title title-flex-between"> 3 <div class="detail-table-title title-flex-between">
4 <div class="title-left">{{tableStyle.tableName}}</div> 4 <div class="title-left">{{tableStyle.tableName}}</div>
5 - <div class="title-right">  
6 - <span class="title-link" @click="handlerDetailDataNoPage()">更多</span> 5 + <div class="title-right" v-if="!getUrlToken.isAlarm">
  6 + <span class="title-link" @click="handlerDetailDataNoPage">更多</span>
7 <span class="title-link" @click="downloadTableList">下载</span> 7 <span class="title-link" @click="downloadTableList">下载</span>
8 </div> 8 </div>
9 </div> 9 </div>
@@ -23,6 +23,8 @@ @@ -23,6 +23,8 @@
23 <i class="sort-caret descending" @click="changeSort(item,'descending')"></i> 23 <i class="sort-caret descending" @click="changeSort(item,'descending')"></i>
24 </span> 24 </span>
25 </div> 25 </div>
  26 + <div v-if="getUrlToken.isAlarm" class="padding-10" :style="[headerTableStlye,tableRowHeight(),handleStyle]">操作</div>
  27 +
26 </div> 28 </div>
27 <!--数据--> 29 <!--数据-->
28 <div class="bd"> 30 <div class="bd">
@@ -39,16 +41,21 @@ @@ -39,16 +41,21 @@
39 > 41 >
40 <el-tooltip v-if="!itemChild.componentName || itemChild.componentName==1" :disabled="isEllipsis[index+'-'+idx]" ref="elTooltip" trigger="hover" > 42 <el-tooltip v-if="!itemChild.componentName || itemChild.componentName==1" :disabled="isEllipsis[index+'-'+idx]" ref="elTooltip" trigger="hover" >
41 <template #content> 43 <template #content>
42 - <span>{{ item[itemChild.key].kpiValue}}</span> 44 + <span v-if="!getUrlToken.isAlarm">{{ item[itemChild.key].kpiValue}}</span>
  45 + <span v-if="getUrlToken.isAlarm">{{ item[itemChild.key][itemChild.key]}}</span>
43 </template> 46 </template>
44 - <span @mouseleave="" :ref="'isOverflow'+index+'-'+idx" :data-num="index+'-'+idx" @click="clickListName(item[itemChild.key],itemChild)" :style="colorStyle(item[itemChild.key].kpiValue)" 47 + <span v-if="!getUrlToken.isAlarm" @mouseleave="" :ref="'isOverflow'+index+'-'+idx" :data-num="index+'-'+idx" @click="clickListName(item[itemChild.key],itemChild)" :style="colorStyle(item[itemChild.key].kpiValue)"
45 :class="['listName','width-80','text-overflow',{'listName-link':item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)}]"> 48 :class="['listName','width-80','text-overflow',{'listName-link':item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)}]">
46 {{ item[itemChild.key].kpiValue}} 49 {{ item[itemChild.key].kpiValue}}
47 </span> 50 </span>
  51 + <span v-if="getUrlToken.isAlarm" @mouseleave="" :ref="'isOverflow'+index+'-'+idx" :data-num="index+'-'+idx" @click="clickListName(item[itemChild.key],itemChild)" :style="colorStyle(item[itemChild.key][itemChild.key])"
  52 + :class="['listName','width-80','text-overflow',{'listName-link':item[itemChild.key] &&itemChild.key=='kpiName' && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)}]">
  53 + {{ item[itemChild.key][itemChild.key]}}
  54 + </span>
48 </el-tooltip> 55 </el-tooltip>
49 <component v-if="itemChild.componentName && itemChild.componentName!=1" :is="itemChild.componentName" :alarmLevel="item[itemChild.key].alarmLevel?item[itemChild.key].alarmLevel:'2'" :way="item[itemChild.key].way?item[itemChild.key].way:'message'" /> 56 <component v-if="itemChild.componentName && itemChild.componentName!=1" :is="itemChild.componentName" :alarmLevel="item[itemChild.key].alarmLevel?item[itemChild.key].alarmLevel:'2'" :way="item[itemChild.key].way?item[itemChild.key].way:'message'" />
50 57
51 - <customMenuBox ref="customMenu" v-if="pressingVisible==index+'-'+idx && item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)" 58 + <customMenuBox ref="customMenu" v-if="tableStyle.probeDown && pressingVisible==index+'-'+idx && item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)"
52 :detailMenubox="calcDetailMenubox" 59 :detailMenubox="calcDetailMenubox"
53 :tableDataValue="item[itemChild.key]" :flg="''" 60 :tableDataValue="item[itemChild.key]" :flg="''"
54 :tableDataValueHead="itemChild" 61 :tableDataValueHead="itemChild"
@@ -57,6 +64,8 @@ @@ -57,6 +64,8 @@
57 :resType="resType" 64 :resType="resType"
58 ></customMenuBox> 65 ></customMenuBox>
59 </div> 66 </div>
  67 + <div @click="clearAlarm(item)" v-if="getUrlToken.isAlarm" :class="['infoList-flex','padding-10',{'listName-link':getUrlToken.isAlarm}]" :style="[handleStyle]">
  68 + 告警消除</div>
60 </li> 69 </li>
61 </ul> 70 </ul>
62 </div> 71 </div>
@@ -98,23 +107,21 @@ @@ -98,23 +107,21 @@
98 > 107 >
99 <el-tooltip v-if="!itemChild.componentName || itemChild.componentName==1" :disabled="isEllipsisMore[index+'-'+idx]" ref="elTooltip" trigger="hover" > 108 <el-tooltip v-if="!itemChild.componentName || itemChild.componentName==1" :disabled="isEllipsisMore[index+'-'+idx]" ref="elTooltip" trigger="hover" >
100 <template #content> 109 <template #content>
101 - <span>{{ item[itemChild.key].kpiValue}}</span> 110 + <span v-if="!getUrlToken.isAlarm">{{ item[itemChild.key].kpiValue}}</span>
  111 + <span v-if="getUrlToken.isAlarm">{{ item[itemChild.key][itemChild.key]}}</span>
102 </template> 112 </template>
103 - <span @mouseleave="" :ref="'isOverflow1'+index+'-'+idx" :data-num="index+'-'+idx" @click="clickListName(item[itemChild.key],itemChild)" :style="colorStyle(item[itemChild.key].kpiValue)" 113 + <span v-if="!getUrlToken.isAlarm" @mouseleave="" :ref="'isOverflow1'+index+'-'+idx" :data-num="index+'-'+idx" @click="clickListName(item[itemChild.key],itemChild)" :style="colorStyle(item[itemChild.key].kpiValue)"
104 :class="['listName','width-80','text-overflow',{'listName-link':item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)}]"> 114 :class="['listName','width-80','text-overflow',{'listName-link':item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)}]">
105 {{ item[itemChild.key].kpiValue}} 115 {{ item[itemChild.key].kpiValue}}
106 </span> 116 </span>
  117 + <span v-if="getUrlToken.isAlarm" @mouseleave="" :ref="'isOverflow1'+index+'-'+idx" :data-num="index+'-'+idx" @click="clickListName(item[itemChild.key],itemChild)" :style="colorStyle(item[itemChild.key][itemChild.key])"
  118 + :class="['listName','width-80','text-overflow',{'listName-link':item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)}]">
  119 + {{ item[itemChild.key][itemChild.key]}}
  120 + </span>
107 </el-tooltip> 121 </el-tooltip>
108 <component v-if="itemChild.componentName && itemChild.componentName!=1" :is="itemChild.componentName" :alarmLevel="item[itemChild.key].alarmLevel?item[itemChild.key].alarmLevel:'2'" :way="item[itemChild.key].way?item[itemChild.key].way:'message'" /> 122 <component v-if="itemChild.componentName && itemChild.componentName!=1" :is="itemChild.componentName" :alarmLevel="item[itemChild.key].alarmLevel?item[itemChild.key].alarmLevel:'2'" :way="item[itemChild.key].way?item[itemChild.key].way:'message'" />
109 123
110 -  
111 -  
112 -  
113 -  
114 -<!-- <span @click="clickListName(item[itemChild.key])" :style="colorStyle(item[itemChild.key].kpiValue)"  
115 - :class="['listName',{'listName-link':item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)}]">  
116 - {{ item[itemChild.key]?item[itemChild.key].kpiValue:'' }}</span>-->  
117 - <customMenuBox v-if="pressingVisible==index+'-'+idx && item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)" 124 + <customMenuBox v-if="tableStyle.probeDown && pressingVisible==index+'-'+idx && item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)"
118 :detailMenubox="calcDetailMenubox" 125 :detailMenubox="calcDetailMenubox"
119 :tableDataValue="item[itemChild.key]" :flg="''" 126 :tableDataValue="item[itemChild.key]" :flg="''"
120 :tableDataValueHead="itemChild" 127 :tableDataValueHead="itemChild"
@@ -144,7 +151,8 @@ @@ -144,7 +151,8 @@
144 </template> 151 </template>
145 </customDialog> 152 </customDialog>
146 <!-- 直接点击表格数据展示 性能趋势弹框--> 153 <!-- 直接点击表格数据展示 性能趋势弹框-->
147 - <customDialog :dialogVisible="trendVisible" :heightStyle="heightStyle" :marginStyle="marginStyle" :widthStyle="widthStyle" :title-name="dialogName" 154 + <customDialog :dialogVisible="trendVisible" :heightStyle="heightStyle" :marginStyle="marginStyle"
  155 + :widthStyle="widthStyle" :title-name="dialogName"
148 :showFooter="true" :showCancelBtn="true" :showOkBtn="true" @hideDialog="hideDialog" @okFunc="okFunc" 156 :showFooter="true" :showCancelBtn="true" :showOkBtn="true" @hideDialog="hideDialog" @okFunc="okFunc"
149 > 157 >
150 <template v-slot> 158 <template v-slot>
@@ -153,6 +161,30 @@ @@ -153,6 +161,30 @@
153 </div> 161 </div>
154 </template> 162 </template>
155 </customDialog> 163 </customDialog>
  164 +<!-- 告警消除弹框-->
  165 + <customDialog :dialogVisible="alarmTableVisible" :heightStyle="heightStyle" :marginStyle="marginStyle" widthStyle="width:360px;height:275px;min-height:275px;max-height:275px;overflow:hidden;"
  166 + title-name="告警消除" :showFooter="true" :showCancelBtn="true" :showOkBtn="true"
  167 + @hideDialog="hideDialogTableAlarm" @okFunc="okFuncTableAlarm"
  168 + >
  169 + <template v-slot>
  170 + <div class="alarmClear">
  171 + <el-input
  172 + v-model="reason"
  173 + :rows="4"
  174 + type="textarea"
  175 + placeholder="消除意见（必填）"
  176 + />
  177 + </div>
  178 + <div class="alarmRadio">
  179 + <span class="radioLabel">是否通知：</span>
  180 + <el-radio-group v-model="noticeFlag">
  181 + <el-radio :label="1">是</el-radio>
  182 + <el-radio :label="0">否</el-radio>
  183 + </el-radio-group>
  184 + </div>
  185 +
  186 + </template>
  187 + </customDialog>
156 188
157 </div> 189 </div>
158 </template> 190 </template>
@@ -163,7 +195,12 @@ import {getDetailTableData,getDetailTableDataNoPage,getResType,getTrendBaseUrl} @@ -163,7 +195,12 @@ import {getDetailTableData,getDetailTableDataNoPage,getResType,getTrendBaseUrl}
163 import customDialog from "../../designerComponents/customDialog"; 195 import customDialog from "../../designerComponents/customDialog";
164 import customMenuBox from "../../designerComponents/customMenuBox";//下探组件 196 import customMenuBox from "../../designerComponents/customMenuBox";//下探组件
165 import textToImage from "../../designerComponents/textToImage";//文字转图片 197 import textToImage from "../../designerComponents/textToImage";//文字转图片
166 -import textToBg from "../../designerComponents/textToBg";//文字转背景 198 +import textToBg from "../../designerComponents/textToBg";
  199 +import {saveClearAalarm} from "../../../../../../api/platform";
  200 +import {Message} from "element-ui";
  201 +import {mapGetters} from "vuex";
  202 +import tableHead from "../../../../../../store/modules/tableHead";
  203 +//文字转背景
167 204
168 vue.use(VueSuperSlide); 205 vue.use(VueSuperSlide);
169 export default { 206 export default {
@@ -176,6 +213,9 @@ export default { @@ -176,6 +213,9 @@ export default {
176 }, 213 },
177 data() { 214 data() {
178 return { 215 return {
  216 + alarmId:'',//消除告警的id
  217 + noticeFlag:0,//是否通知
  218 + reason:'',//消除意见
179 currentPage:1, 219 currentPage:1,
180 pageSize:10, 220 pageSize:10,
181 pageSizes:[10,50,100, 200, 300, 400], 221 pageSizes:[10,50,100, 200, 300, 400],
@@ -183,6 +223,7 @@ export default { @@ -183,6 +223,7 @@ export default {
183 trendVisible:false,//性能趋势弹框 223 trendVisible:false,//性能趋势弹框
184 headerAll:[], 224 headerAll:[],
185 listAll:[], 225 listAll:[],
  226 + alarmTableVisible:false,//告警消除弹框
186 tableVisible:false,//更多表格弹框 227 tableVisible:false,//更多表格弹框
187 dialogVisible:false,//表格下探后的弹框 228 dialogVisible:false,//表格下探后的弹框
188 popoverVisible:false,//下探弹框 229 popoverVisible:false,//下探弹框
@@ -275,10 +316,20 @@ export default { @@ -275,10 +316,20 @@ export default {
275 316
276 } 317 }
277 }, 318 },
  319 + handleStyle(){
  320 + const bodyStyle = this.optionsSetUp;
  321 + return{
  322 + width:'30%',
  323 + "border-left":bodyStyle.isLine? bodyStyle.borderWidth + "px "+"solid "+bodyStyle.borderColor:'none',
  324 + "border-bottom":bodyStyle.isLine? bodyStyle.borderWidth + "px "+"solid "+bodyStyle.borderColor:'none'
  325 + }
  326 +
  327 + },
278 tableStyle(){ 328 tableStyle(){
279 const tableStyleSetup=this.optionsSetUp; 329 const tableStyleSetup=this.optionsSetUp;
280 return{ 330 return{
281 - tableName:tableStyleSetup.tableName 331 + tableName:tableStyleSetup.tableName,
  332 + probeDown:tableStyleSetup.probeDown
282 } 333 }
283 }, 334 },
284 //表格下探列表 335 //表格下探列表
@@ -325,11 +376,16 @@ export default { @@ -325,11 +376,16 @@ export default {
325 }, 376 },
326 //获取url地址中的token 377 //获取url地址中的token
327 getUrlToken(){ 378 getUrlToken(){
  379 + const tableStyleSetup=this.optionsSetUp;
328 let locationUrl=this.$route.query; 380 let locationUrl=this.$route.query;
329 let resId=locationUrl.resId; 381 let resId=locationUrl.resId;
330 let token=locationUrl.access_token; 382 let token=locationUrl.access_token;
  383 + let flag=tableStyleSetup.flag;
  384 + let isAlarm=tableStyleSetup.isAlarm;
331 let urlObj={ 385 let urlObj={
332 resId:resId, 386 resId:resId,
  387 + flag:flag,
  388 + isAlarm:isAlarm,
333 token:token 389 token:token
334 } 390 }
335 return urlObj; 391 return urlObj;
@@ -459,24 +515,26 @@ export default { @@ -459,24 +515,26 @@ export default {
459 } 515 }
460 colArr.push(columnObj) 516 colArr.push(columnObj)
461 }) 517 })
462 -  
463 - content.map((cv) => {  
464 - let kpi = {};  
465 - cv.map((ccv) => {  
466 - if (ccv.kpiValue || ccv.kpiValue === 0) {  
467 - kpi[ccv.kpiId] = ccv;  
468 - } else {  
469 - kpi[ccv.kpiId] = {  
470 - kpiValue: "",  
471 - kpiUnit: "",  
472 - kpiIdent: "0",  
473 - isWarning: 0,  
474 - };  
475 - }  
476 - 518 + if(this.getUrlToken.isAlarm){
  519 + datas=content;
  520 + }else{
  521 + content.map((cv) => {
  522 + let kpi = {};
  523 + cv.map((ccv) => {
  524 + if (ccv.kpiValue || ccv.kpiValue === 0) {
  525 + kpi[ccv.kpiId] = ccv;
  526 + } else {
  527 + kpi[ccv.kpiId] = {
  528 + kpiValue: "",
  529 + kpiUnit: "",
  530 + kpiIdent: "0",
  531 + isWarning: 0,
  532 + };
  533 + }
  534 + })
  535 + datas.push(kpi);
477 }) 536 })
478 - datas.push(kpi);  
479 - }) 537 + }
480 if(flg=='all'){ 538 if(flg=='all'){
481 this.headerAll=colArr; 539 this.headerAll=colArr;
482 this.listAll=datas; 540 this.listAll=datas;
@@ -486,7 +544,7 @@ export default { @@ -486,7 +544,7 @@ export default {
486 } 544 }
487 this.tableFiledColumnSort(); 545 this.tableFiledColumnSort();
488 }, 546 },
489 - handlerDetailData(valData,sortBy){ 547 + async handlerDetailData(valData,sortBy,order){
490 let kpiArr=[] 548 let kpiArr=[]
491 let kpiIdStr=''; 549 let kpiIdStr='';
492 if(this.header && this.header.length>0){ 550 if(this.header && this.header.length>0){
@@ -502,33 +560,86 @@ export default { @@ -502,33 +560,86 @@ export default {
502 kpiIdStr=kpiArr.join(','); 560 kpiIdStr=kpiArr.join(',');
503 } 561 }
504 let param={ 562 let param={
505 - kpiId:kpiIdStr 563 + resId:this.getUrlToken.resId,
  564 + kpiId:kpiIdStr,
  565 + flagPrifix:this.getUrlToken.flag,
  566 + page:this.currentPage,
  567 + size:this.pageSize
506 } 568 }
507 let sort=sortBy; 569 let sort=sortBy;
508 if(sort){ 570 if(sort){
509 - param.sort=sort; 571 + param.sortBy=sort;
  572 + }
  573 + if(order){
  574 + param.order=order;
510 } 575 }
511 let headTable = valData; 576 let headTable = valData;
512 if(kpiIdStr){ 577 if(kpiIdStr){
513 //根据kpiId集合获取表格数据 578 //根据kpiId集合获取表格数据
514 - let tableData=getDetailTableData(param);  
515 - headTable=tableData.data[0]; 579 + let tableData='';
  580 + const { success,data } = await getDetailTableData(param,this.getUrlToken);
  581 + if (success ){
  582 + tableData=data;
  583 + }
  584 + if(tableData && tableData.length>0){
  585 + headTable=tableData[0];
  586 + }
  587 + }
  588 + if(headTable){
  589 + this.handleHeadContent(headTable)
516 } 590 }
517 -  
518 - this.handleHeadContent(headTable)  
519 -  
520 }, 591 },
521 //打开更多表格 592 //打开更多表格
522 - handlerDetailDataNoPage(){  
523 - let headTable =getDetailTableDataNoPage();  
524 - this.handleHeadContent(headTable.data[0],'all');  
525 - this.widthStyle='';  
526 - // this.setDialog('table');  
527 - this.tableVisible=true; 593 + async handlerDetailDataNoPage(sortBy){
  594 + let kpiArr=[];
  595 + let kpiIdStr='';
  596 + if(this.header && this.header.length>0){
  597 + this.header.map(item=>{
  598 + if(item.isStatic){
  599 +
  600 + }else{
  601 + if(item.key!='KPIF74D9D2B'){
  602 + kpiArr.push(item.key)
  603 + }
  604 + }
  605 + })
  606 + }
  607 + if(kpiArr && kpiArr.length>0){
  608 + kpiIdStr=kpiArr.join(',');
  609 + }
  610 + let param={
  611 + resId:this.getUrlToken.resId,
  612 + kpiId:kpiIdStr,
  613 + flagPrifix:this.getUrlToken.flag,
  614 + }
  615 + let sort=sortBy;
  616 + if(sort){
  617 + param.sortBy=sort;
  618 + }
  619 +
  620 + const { success,data } = await getDetailTableDataNoPage(param,this.getUrlToken);
  621 + if(success){
  622 + let headTable =data;
  623 + console.log("alalalal",data)
  624 +
  625 + this.handleHeadContent(headTable[0],'all');
  626 + this.widthStyle='';
  627 + // this.setDialog('table');
  628 + this.tableVisible=true;
  629 + }
  630 +
528 }, 631 },
529 //点击表格内容名称事件 632 //点击表格内容名称事件
530 clickListName(obj,tableDataValueHead){ 633 clickListName(obj,tableDataValueHead){
531 - if(obj.kpiIdent==1 || obj.isWarning==1){ 634 + let isIf=obj.kpiIdent==1 || obj.isWarning==1;
  635 +
  636 + if(this.getUrlToken.isAlarm){
  637 + //告警表格的判断
  638 + isIf=tableDataValueHead.key=='kpiName' && (obj.kpiIdent==1 || obj.isWarning==1);
  639 + }else{
  640 + isIf=obj.kpiIdent==1 || obj.isWarning==1;
  641 + }
  642 + if(isIf){
532 this.widthStyle=''; 643 this.widthStyle='';
533 this.pressingValue=obj; 644 this.pressingValue=obj;
534 this.dialogNameStyle(obj) 645 this.dialogNameStyle(obj)
@@ -536,6 +647,7 @@ export default { @@ -536,6 +647,7 @@ export default {
536 this.trendVisible=true; 647 this.trendVisible=true;
537 } 648 }
538 649
  650 +
539 }, 651 },
540 //设置性能趋势图 652 //设置性能趋势图
541 setTrend(tableDataValueHead){ 653 setTrend(tableDataValueHead){
@@ -580,7 +692,97 @@ export default { @@ -580,7 +692,97 @@ export default {
580 getEchartData(val) { 692 getEchartData(val) {
581 const data = this.queryEchartsData(val); 693 const data = this.queryEchartsData(val);
582 data.then(res => { 694 data.then(res => {
583 - this.list = res; 695 + let resTable='';
  696 + if(res && res.length>0){
  697 + // this.handlerDetailData(res[0].data[0]);
  698 + if(!this.getUrlToken.isAlarm){
  699 + //普通详情表格
  700 + resTable=res[0].data[0];
  701 + this.handleHeadContent(res[0].data[0]);
  702 +
  703 + }else{
  704 + //告警表格
  705 + let tableData=res[0].data;
  706 + //alarmLevel,alarmContent,kpiName,updateTime
  707 + if(tableData && tableData.length>0){
  708 + let head=[{
  709 + id: "alarmLevel",
  710 + name: "告警级别",
  711 + unit: ""
  712 + },
  713 + {
  714 + id: "alarmContent",
  715 + name: "告警内容",
  716 + unit: ""
  717 + },
  718 + {
  719 + id: "kpiName",
  720 + name: "指标名称",
  721 + unit: ""
  722 + },
  723 + {
  724 + id: "updateTime",
  725 + name: "告警时间",
  726 + unit: ""
  727 + }
  728 + ]
  729 + let content=[];
  730 +
  731 + tableData.map(item=>{
  732 + let contentObj={};
  733 + head.map(hv=>{
  734 + contentObj[hv.id]=item;
  735 + })
  736 + content.push(contentObj)
  737 + })
  738 + let obj={
  739 + header:head,
  740 + content:content
  741 + }
  742 + resTable=obj;
  743 + this.handleHeadContent(obj);
  744 +
  745 + }
  746 +
  747 + }
  748 + }
  749 + // this.list = res;
  750 + let isNewData=false;
  751 + let addTableData=[];
  752 + let head=resTable.header;
  753 + let addTableDataOld=this.optionsSetUp.dynamicAddTable;
  754 + addTableDataOld.map(v=>{
  755 + head.map((item,index)=>{
  756 + if(v.key==item.key){
  757 + isNewData=false;
  758 + addTableData.push({
  759 + columnSort:v.columnSort?v.columnSort:index,
  760 + componentName:v.componentName?v.componentName:1,
  761 + isStatic:false,
  762 + key:item.id,
  763 + name:item.name,
  764 + width:v.width
  765 + })
  766 + }else{
  767 + isNewData=true;
  768 +
  769 + }
  770 +
  771 + })
  772 + })
  773 + if(isNewData){
  774 + head.map((item,index)=>{
  775 + addTableData.push({
  776 + columnSort:index,
  777 + componentName:1,
  778 + isStatic:false,
  779 + key:item.id,
  780 + name:item.name,
  781 + width:"50%"
  782 + })
  783 + })
  784 + }
  785 + this.$store.commit('CHANGE_HEAD', addTableData);
584 this.hackResetFun(); 786 this.hackResetFun();
585 }); 787 });
586 }, 788 },
@@ -591,6 +793,7 @@ export default { @@ -591,6 +793,7 @@ export default {
591 this.hackReset = true; 793 this.hackReset = true;
592 }); 794 });
593 }, 795 },
  796 +
594 // 计算 奇偶背景色 797 // 计算 奇偶背景色
595 bodyTable(index) { 798 bodyTable(index) {
596 var styleJson = {}; 799 var styleJson = {};
@@ -702,6 +905,15 @@ export default { @@ -702,6 +905,15 @@ export default {
702 this.tableVisible=false; 905 this.tableVisible=false;
703 906
704 }, 907 },
  908 + //告警消除弹框关闭确定
  909 + hideDialogTableAlarm(){
  910 + this.alarmTableVisible=false;
  911 + },
  912 + okFuncTableAlarm(){
  913 + // this.alarmTableVisible=false;
  914 + this.clearAlarmHandle();
  915 +
  916 + },
705 //排序 917 //排序
706 changeSort(item,flg){ 918 changeSort(item,flg){
707 if(this.sortCaret==flg){ 919 if(this.sortCaret==flg){
@@ -711,16 +923,37 @@ export default { @@ -711,16 +923,37 @@ export default {
711 this.sortCaret=flg; 923 this.sortCaret=flg;
712 this.sortBy=item.key; 924 this.sortBy=item.key;
713 } 925 }
  926 + console.log(" this.optionsData", this.optionsData)
  927 + console.log("iiiiiiii",item)
714 if(this.sortCaret=='ascending'){ 928 if(this.sortCaret=='ascending'){
715 //正序 929 //正序
  930 + this.order='ASC';
716 }else if(this.sortCaret=='ascending'){ 931 }else if(this.sortCaret=='ascending'){
717 //倒序 932 //倒序
  933 + this.order='DESC';
718 }else{ 934 }else{
719 //不排序 935 //不排序
  936 + this.order='';
720 } 937 }
721 - // this.handlerDetailData('',item.key) 938 + this.handlerDetailData('',this.sortBy,this.order)
  939 +
722 // this.handlerDetailDataNoPage(); 940 // this.handlerDetailDataNoPage();
723 }, 941 },
  942 + //获取表格数据
  943 + async reGetDetailTableData(param){
  944 + let tableData='';
  945 + let headTable='';
  946 + const { success,data } = await getDetailTableData(param,this.getUrlToken);
  947 + if (success ){
  948 + tableData=data;
  949 + }
  950 + if(tableData && tableData.length>0){
  951 + headTable=tableData[0];
  952 + }
  953 + if(headTable){
  954 + this.handleHeadContent(headTable)
  955 + }
  956 + },
724 // 每页展示多少条 957 // 每页展示多少条
725 handleSizeChange(val){ 958 handleSizeChange(val){
726 // 切换页码重置初始页 959 // 切换页码重置初始页
@@ -792,6 +1025,44 @@ export default { @@ -792,6 +1025,44 @@ export default {
792 } 1025 }
793 1026
794 }, 1027 },
  1028 + //消除告警
  1029 + clearAlarm(obj){
  1030 + ///
  1031 + this.alarmId=obj.alarmContent.id;
  1032 + this.alarmTableVisible=true;
  1033 + },
  1034 + async clearAlarmHandle(){
  1035 + if(this.reason){
  1036 + let params={
  1037 + ids:this.alarmId,
  1038 + reason:this.reason,
  1039 + access_token: this.getUrlToken.token,
  1040 + noticeFlag:this.noticeFlag
  1041 + }
  1042 + const { success } = await saveClearAalarm(params,this.getUrlToken);
  1043 + if(success){
  1044 + Message({
  1045 + message: '告警已消除！',
  1046 + type: 'success',
  1047 + duration: 3 * 1000
  1048 + });
  1049 + }else{
  1050 + Message({
  1051 + message: '告警消除失败，请与管理员联系！',
  1052 + type: 'error',
  1053 + duration: 3 * 1000
  1054 + });
  1055 + }
  1056 + this.alarmTableVisible=false;
  1057 + }else{
  1058 + Message({
  1059 + message: '请填写消除意见',
  1060 + type: 'warning',
  1061 + duration: 3 * 1000
  1062 + });
  1063 + }
  1064 +
  1065 + }
795 1066
796 } 1067 }
797 }; 1068 };
@@ -1029,4 +1300,12 @@ export default { @@ -1029,4 +1300,12 @@ export default {
1029 .padding-10{ 1300 .padding-10{
1030 padding:5px; 1301 padding:5px;
1031 } 1302 }
  1303 +.alarmClear{
  1304 + margin:15px;
  1305 + overflow: hidden;
  1306 +}
  1307 +.alarmRadio{
  1308 + margin:20px;
  1309 + text-align: left;
  1310 +}
1032 </style> 1311 </style>
@@ -44,12 +44,6 @@ export default { @@ -44,12 +44,6 @@ export default {
44 ispreview: Boolean 44 ispreview: Boolean
45 }, 45 },
46 data() { 46 data() {
47 - /*this.myChart={  
48 - click:function(e){  
49 - console.log("111",e)  
50 -  
51 - }  
52 - }*/  
53 return { 47 return {
54 trendVisible:false,//性能趋势弹框 48 trendVisible:false,//性能趋势弹框
55 dataValue:'', 49 dataValue:'',
@@ -425,7 +419,7 @@ export default { @@ -425,7 +419,7 @@ export default {
425 const data = this.queryEchartsData(val); 419 const data = this.queryEchartsData(val);
426 data.then(res => { 420 data.then(res => {
427 this.tableDataValue=res.map; 421 this.tableDataValue=res.map;
428 - this.setTrend(res.map) 422 + this.setTrend(res[0].value)
429 this.renderingFn(res); 423 this.renderingFn(res);
430 }); 424 });
431 }, 425 },
@@ -434,7 +428,7 @@ export default { @@ -434,7 +428,7 @@ export default {
434 const series = this.options.series; 428 const series = this.options.series;
435 const data = [ 429 const data = [
436 { 430 {
437 - value: val[0].value 431 + value: val[0].value.value
438 } 432 }
439 ] 433 ]
440 const detail = { 434 const detail = {
@@ -447,11 +441,17 @@ export default { @@ -447,11 +441,17 @@ export default {
447 } 441 }
448 series[0].data = data 442 series[0].data = data
449 series[0].detail = detail 443 series[0].detail = detail
450 - this.dataValue=(val[0].value?val[0].value:'0')+'%'; 444 + this.dataValue=(val[0].value.value?val[0].value.value:'0')+'%';
451 }, 445 },
452 //设置性能趋势图 446 //设置性能趋势图
453 setTrend(data){ 447 setTrend(data){
454 - let urlParams='resId='+this.getUrlToken.resId+'&kpiId='+this.kpiIdStyle.kpiId+'&flag='+data.flag+'&warning='+data.isWarning 448 + let flg='&flg=';
  449 + if(data.flag){
  450 + flg+=data.flag;
  451 + }else {
  452 + flg+=data.subResId;
  453 + }
  454 + let urlParams='resId='+this.getUrlToken.resId+'&kpiId='+this.kpiIdStyle.kpiId+flg+'&warning='+data.isWarning
455 +'&ident='+data.ident 455 +'&ident='+data.ident
456 +'&trend='+data.trend 456 +'&trend='+data.trend
457 +'&name='+data.name; 457 +'&name='+data.name;
@@ -43,6 +43,8 @@ import monitorBasicInformation from "./monitor/basicInformation"; @@ -43,6 +43,8 @@ import monitorBasicInformation from "./monitor/basicInformation";
43 import monitorDetailTable from "./monitor/detailTable"; 43 import monitorDetailTable from "./monitor/detailTable";
44 import monitorBgBorder from "./monitor/bgBorder"; 44 import monitorBgBorder from "./monitor/bgBorder";
45 import monitorGaugeRate from "./monitor/gaugeRate"; 45 import monitorGaugeRate from "./monitor/gaugeRate";
  46 +import monitorCustomLineChart from "./monitor/customLineChart";
  47 +import monitorCustomBarStack from "./monitor/customBarStack";
46 48
47 export default { 49 export default {
48 name: "WidgetTemp", 50 name: "WidgetTemp",
@@ -78,7 +80,9 @@ export default { @@ -78,7 +80,9 @@ export default {
78 monitorBasicInformation, 80 monitorBasicInformation,
79 monitorDetailTable, 81 monitorDetailTable,
80 monitorBgBorder, 82 monitorBgBorder,
81 - monitorGaugeRate 83 + monitorGaugeRate,
  84 + monitorCustomLineChart,
  85 + monitorCustomBarStack
82 }, 86 },
83 model: { 87 model: {
84 prop: "value", 88 prop: "value",
@@ -54,6 +54,8 @@ import monitorBasicInformation from "./monitor/basicInformation"; @@ -54,6 +54,8 @@ import monitorBasicInformation from "./monitor/basicInformation";
54 import monitorDetailTable from "./monitor/detailTable"; 54 import monitorDetailTable from "./monitor/detailTable";
55 import monitorBgBorder from "./monitor/bgBorder"; 55 import monitorBgBorder from "./monitor/bgBorder";
56 import monitorGaugeRate from "./monitor/gaugeRate"; 56 import monitorGaugeRate from "./monitor/gaugeRate";
  57 +import monitorCustomLineChart from "./monitor/customLineChart";
  58 +import monitorCustomBarStack from "./monitor/customBarStack";
57 59
58 60
59 export default { 61 export default {
@@ -89,7 +91,9 @@ export default { @@ -89,7 +91,9 @@ export default {
89 monitorBasicInformation, 91 monitorBasicInformation,
90 monitorDetailTable, 92 monitorDetailTable,
91 monitorBgBorder, 93 monitorBgBorder,
92 - monitorGaugeRate 94 + monitorGaugeRate,
  95 + monitorCustomLineChart,
  96 + monitorCustomBarStack
93 }, 97 },
94 model: { 98 model: {
95 prop: "value", 99 prop: "value",