monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit c3925ff2740ae0354a7143d6927834e5a0354547 1 parent b105aafe

对比分析

Inline Side-by-side
Showing 17 changed files with 982 additions and 26 deletions
@@ -4,7 +4,6 @@ @@ -4,7 +4,6 @@
4 4
5 /*最外层样式*/ 5 /*最外层样式*/
6 .container{ 6 .container{
7 - background: white;  
8 background-color: #CCCCCC; 7 background-color: #CCCCCC;
9 padding: 3px 3px; 8 padding: 3px 3px;
10 width:calc(100% - 10px); 9 width:calc(100% - 10px);
@@ -25,7 +25,12 @@ @@ -25,7 +25,12 @@
25 </slot> 25 </slot>
26 </template> 26 </template>
27 </el-table-column> 27 </el-table-column>
28 - <slot name="tools" v-if="columns.length > 0" ></slot> 28 +
  29 + <el-table-column v-if="showTools && columns.length > 0" label="操作" width="80">
  30 + <template #default="scope">
  31 + <slot name="tools" :scope="scope" ></slot>
  32 + </template>
  33 + </el-table-column>
29 </el-table> 34 </el-table>
30 <!-- 分页 --> 35 <!-- 分页 -->
31 <div style='text-align: center;background-color: white' v-if="showPage"> 36 <div style='text-align: center;background-color: white' v-if="showPage">
@@ -76,6 +76,10 @@ export default { @@ -76,6 +76,10 @@ export default {
76 type: Number, 76 type: Number,
77 default: window.innerWidth 77 default: window.innerWidth
78 }, 78 },
  79 + showTools:{
  80 + type: Boolean,
  81 + default: false
  82 + },
79 83
80 }, 84 },
81 data() { 85 data() {
  1 +<title>对比分析预览</title>
  2 +<script type="text/html" template>
  3 + {{#
  4 + var viewURL = window.location.origin + '/vue3/index.html#/analysis/view';
  5 + layui.use(['sessions','common','admin'], function () {
  6 + var $ = layui.$;
  7 + var common = layui.common;
  8 + var admin = layui.admin;
  9 + var arr = [];
  10 + window.location.hash.split('/').forEach(function (v, i) {
  11 + if (v.indexOf('=') != -1) {
  12 + arr.push(v);
  13 + }
  14 + });
  15 +
  16 + if (arr.length > 0) {
  17 + viewURL += "?" + arr.join("&");
  18 + }
  19 + $('#actionListIframe').attr('src',viewURL);
  20 + });
  21 + }}
  22 + <iframe id="actionListIframe" src="{{viewURL}}" frameborder="0" class="layadmin-iframe" style="height: 99.5%!important;"></iframe>
  23 +</script>
1 -<div class="analysis-index-container">  
2 - <div class="iconAdd">  
3 - 点击添加比对分析  
4 - </div>  
5 -</div>  
1 -export default {  
2 - name: 'addIndex',  
3 - template: '',  
4 - components:{},  
5 - data () {  
6 - return {  
7 -  
8 - }  
9 - },  
10 - setup(){  
11 -  
12 - }  
13 -}  
  1 +<div :style="{'height':'380px','padding':'6px'}">
  2 + <slot name="title">
  3 + <div style="text-align: left;margin-bottom: 10px;padding-left: 10px;">对比分析场景</div>
  4 + </slot>
  5 +
  6 + <el-row :gutter="5">
  7 + <el-col :span="4">
  8 + <div style="display: flex;flex-wrap: wrap;width: 100%">
  9 + <slot name="lineName">
  10 + 分析名称
  11 + </slot>
  12 + </div>
  13 + </el-col>
  14 + <el-col :span="20" style="text-align: right;padding-right: 10px">
  15 + <slot name="timeRange"></slot>
  16 + <slot name="frequency"></slot>
  17 + <slot name="tools"></slot>
  18 + </el-col>
  19 + </el-row>
  20 +
  21 + <div :style="{'height':'300px','width':width + 'px'}" :id="id"></div>
  22 +</div>
  1 +
  2 +
  3 +export default {
  4 + name: 'analysisLineChars',
  5 + template: '',
  6 + components: {},
  7 + data() {
  8 + },
  9 + props: {
  10 + showTitle: {
  11 + type: Boolean,
  12 + default: false
  13 + },
  14 + title: {
  15 + type: String,
  16 + default: '示例折线图'
  17 + },
  18 + legend: {
  19 + type: Object,
  20 + default: {
  21 + data: ['示例1']
  22 + }
  23 + },
  24 + xAxis: {
  25 + type: Array,
  26 + default: ['示例1', '示例2', '示例3', '示例4', '示例5', '示例6']
  27 + },
  28 + series: {
  29 + default: [{
  30 + name: '示例1',
  31 + type: 'bar',
  32 + data: [5, 20, 36, 10, 10, 20]
  33 + }]
  34 + }
  35 + },
  36 + setup(props, {attrs, slots, emit}) {
  37 + const {proxy} = Vue.getCurrentInstance();
  38 + let height = Vue.ref(window.innerHeight - 10);
  39 + let width = Vue.ref(window.innerWidth - 50);
  40 +
  41 + let id = Vue.ref('analysisLineChars'+(new Date()).getTime());
  42 + // echarts实例的dom
  43 + var myChart = null;
  44 +
  45 + let init = () => {
  46 + if(myChart == null){
  47 + myChart = echarts.init(document.getElementById(id.value));
  48 + }
  49 +
  50 + // 指定图表的配置项和数据
  51 + var option = {
  52 + title: {
  53 + text: props.title
  54 + },
  55 + grid: {
  56 + left: '1%',
  57 + right: '1%',
  58 + bottom: '1%',
  59 + containLabel: true,
  60 + },
  61 + tooltip: {},
  62 + legend: props.legend,
  63 + xAxis: {
  64 + data: props.xAxis
  65 + },
  66 + yAxis: {},
  67 + series: props.series
  68 + };
  69 +
  70 + if (!props.showTitle) {
  71 + delete option.title;
  72 + }
  73 +
  74 + // 使用刚指定的配置项和数据显示图表。
  75 + myChart.setOption(option);
  76 + }
  77 +
  78 +
  79 + // 挂载完
  80 + Vue.onMounted(() => {
  81 + init();
  82 +
  83 + console.log('onMounted');
  84 + })
  85 +
  86 + // 监听编辑状态
  87 + Vue.watch(
  88 + () => props.xAxis, (newValue, oldVlaue) => {
  89 + console.log("id=",id.value);
  90 + init();
  91 + }
  92 + );
  93 +
  94 + return {
  95 + height,
  96 + width,
  97 + id
  98 + }
  99 + }
  100 +}
@@ -48,7 +48,7 @@ @@ -48,7 +48,7 @@
48 48
49 <cm-table-page :columns="columns" :dataList="dataList" @loaddata="getPage" :showIndex="true" 49 <cm-table-page :columns="columns" :dataList="dataList" @loaddata="getPage" :showIndex="true"
50 :showBorder="true" :currentPage="currentPage" :loading="false" 50 :showBorder="true" :currentPage="currentPage" :loading="false"
51 - :showPage="false" :height="(height - 20)"> 51 + :showPage="false" :showTools="true" :height="(height - 20)">
52 <template #default="{row,prop,column}"> 52 <template #default="{row,prop,column}">
53 <span v-if="prop == 'resListId'">{{currentNode.label}}</span> 53 <span v-if="prop == 'resListId'">{{currentNode.label}}</span>
54 <div v-else> 54 <div v-else>
@@ -128,7 +128,7 @@ @@ -128,7 +128,7 @@
128 128
129 </div> 129 </div>
130 </template> 130 </template>
131 - <template #tools> 131 + <!-- <template #tools>
132 <el-table-column fixed="right" label="操作" width="80" align="center"> 132 <el-table-column fixed="right" label="操作" width="80" align="center">
133 <template #default="scope"> 133 <template #default="scope">
134 <el-button type="text" size="small" @click.prevent="deleteRow(row,scope.$index)"> 134 <el-button type="text" size="small" @click.prevent="deleteRow(row,scope.$index)">
@@ -136,6 +136,11 @@ @@ -136,6 +136,11 @@
136 </el-button> 136 </el-button>
137 </template> 137 </template>
138 </el-table-column> 138 </el-table-column>
  139 + </template>-->
  140 + <template #tools="{scope}">
  141 + <el-button type="text" size="small" @click.prevent="deleteRow(scope.row,scope.$index)">
  142 + <i class="el-icon-delete"/>
  143 + </el-button>
139 </template> 144 </template>
140 </cm-table-page> 145 </cm-table-page>
141 </div> 146 </div>
@@ -108,13 +108,17 @@ const routes = [{ @@ -108,13 +108,17 @@ const routes = [{
108 { 108 {
109 path: '/analysis', 109 path: '/analysis',
110 name: 'analysis', 110 name: 'analysis',
111 - // component: () => myImport('views/analysis/components/addIndex/index')  
112 component: () => myImport('views/analysis/index') 111 component: () => myImport('views/analysis/index')
113 }, 112 },
114 { 113 {
115 path: '/analysis/add', 114 path: '/analysis/add',
116 name: 'analysisAdd', 115 name: 'analysisAdd',
117 - component: () => myImport('components/page/analysis/add/index') 116 + component: () => myImport('views/analysis/config/index')
  117 + },
  118 + {
  119 + path: '/analysis/view',
  120 + name: 'view',
  121 + component: () => myImport('views/analysis/view/index')
118 } 122 }
119 ]; 123 ];
120 124
@@ -3,7 +3,7 @@ @@ -3,7 +3,7 @@
3 <div class="add-top"> 3 <div class="add-top">
4 <el-row> 4 <el-row>
5 <el-col :span="16" class="add-top-title"> 5 <el-col :span="16" class="add-top-title">
6 - <el-button type="primary">场景名称</el-button> 6 + <el-input v-model="input" placeholder="请输入场景名称" />
7 </el-col> 7 </el-col>
8 <el-col :span="8" class="add-top-select"> 8 <el-col :span="8" class="add-top-select">
9 <el-dropdown> 9 <el-dropdown>
@@ -59,7 +59,6 @@ export default { @@ -59,7 +59,6 @@ export default {
59 create: 'Create' 59 create: 'Create'
60 } 60 }
61 let columns = Vue.ref([ 61 let columns = Vue.ref([
62 -  
63 { 62 {
64 prop: 'busId', 63 prop: 'busId',
65 label: '业务系统', 64 label: '业务系统',
  1 +<div class="container" :style="{'height':height+'px','max-height':height+'px'}">
  2 + <div class="cm-card" :style="{'min-height':height+'px','height':'100%'}">
  3 + <analysis-line :legend="lineChart.legend" :xAxis="lineChart.xAxis" :series="lineChart.series">
  4 + <template #lineName="scope">
  5 + <el-input v-model="form.scene.name" placeholder="请输入场景名称"/>
  6 + </template>
  7 + <template #tools="scope">
  8 + <el-button type="primary" style="margin-left: 10px" @click="showDialogForm(true)">保存</el-button>
  9 + </template>
  10 + <template #timeRange="scope">
  11 + <el-dropdown>
  12 + <el-button>
  13 + 时间范围 <i class="el-icon el-icon-arrow-down"></i>
  14 + </el-button>
  15 + <template #dropdown>
  16 + <el-dropdown-menu>
  17 + <el-dropdown-item @click="timeRangeChange(item)" v-for="item in timeRangeArr"
  18 + :key="item.ddicId"
  19 + :command="{value:item.ddicCode,label:item.ddicName,flag:1}">
  20 + <el-radio v-model="form.scene.timeScope" :label="item.ddicCode">{{item.ddicName}}
  21 + </el-radio>
  22 + </el-dropdown-item>
  23 + </el-dropdown-menu>
  24 + </template>
  25 + </el-dropdown>
  26 + </template>
  27 + <template #frequency="scope">
  28 + <el-dropdown style="margin-left: 10px">
  29 + <el-button>
  30 + 聚合频率 <i class="el-icon el-icon-arrow-down"></i>
  31 + </el-button>
  32 + <template #dropdown>
  33 + <el-dropdown-menu>
  34 + <el-dropdown-item v-for="item in frequencyArr"
  35 + :key="item.ddicId"
  36 + :command="{value:item.ddicCode,label:item.ddicName,flag:1}">
  37 + <el-radio v-model="form.scene.frequency" :label="item.ddicCode">{{item.ddicName}}
  38 + </el-radio>
  39 + </el-dropdown-item>
  40 + </el-dropdown-menu>
  41 + </template>
  42 + </el-dropdown>
  43 + </template>
  44 + </analysis-line>
  45 + <el-divider content-position="left">
  46 + <div>
  47 + <i class="iconfont icon-liebiaomoshi"></i>
  48 + <span style="margin-left: 5px">查询条件</span>
  49 + </div>
  50 + </el-divider>
  51 + <div style="width: calc(100% - 12px);padding: 0px 6px">
  52 + <el-row :gutter="5">
  53 + <el-col :span="4">
  54 + <div style="display: flex;flex-wrap: wrap;width: 100%;padding-left: 15px;">
  55 + <el-dropdown>
  56 + <el-icon class="el-icon--right">
  57 + <arrow-down/>
  58 + </el-icon>
  59 + <cm-biz-type-tree-input multiple clearable collapseTags @callback="getBizType"/>
  60 + </el-dropdown>
  61 +
  62 + <el-dropdown>
  63 + <el-icon class="el-icon--right">
  64 + <arrow-down/>
  65 + </el-icon>
  66 + <cm-res-type-tree-input multiple clearable collapseTags @callback="getResType"/>
  67 + </el-dropdown>
  68 +
  69 + <el-dropdown>
  70 + <el-icon class="el-icon--right">
  71 + <arrow-down/>
  72 + </el-icon>
  73 + <cm-kpi-type-tree-input multiple clearable collapseTags @callback="getKpiType"/>
  74 + </el-dropdown>
  75 +
  76 + <el-input v-model="keyWords" placeholder="输入关键字" style="margin-top: 15px;width: 225px;"/>
  77 +
  78 + <div style="margin-top: 10px;text-align: center">
  79 + <el-button type="primary" @click="onReset()">重置</el-button>
  80 + <el-button type="primary" @click="onBtnSearch()" style="margin-left: 10px">查询</el-button>
  81 + </div>
  82 + </div>
  83 + </el-col>
  84 + <el-col :span="20">
  85 +
  86 + <el-tabs v-model="activeName" @tab-click="tabClick">
  87 + <el-tab-pane label="已添加" name="first">
  88 + <cm-table-page :columns="columns" :dataList="tabFirstList" @loaddata="loadFirstList"
  89 + :showIndex="true"
  90 + :showBorder="true" :loading="false"
  91 + :showPage="false" :showTools="true" :height="(height - 500)">
  92 + <template #tools="{scope}">
  93 + <el-button type="text" size="small"
  94 + @click.prevent="deleteRes(scope.row,scope.$index)">
  95 + <i class="el-icon-delete"/> 移除
  96 + </el-button>
  97 + </template>
  98 + </cm-table-page>
  99 + </el-tab-pane>
  100 + <el-tab-pane label="未添加" name="second">
  101 + <cm-table-page :columns="columns" :dataList="tabSecondList" @loaddata="loadSecondList"
  102 + :showIndex="true"
  103 + :showBorder="true" :loading="false"
  104 + :showPage="false" :showTools="true" :height="(height - 500)">
  105 + <template #tools="{scope}">
  106 + <el-button type="text" size="small" @click.prevent="addRes(scope.row,scope.$index)">
  107 + <i class="el-icon-plus"/> 添加
  108 + </el-button>
  109 + </template>
  110 + </cm-table-page>
  111 + </el-tab-pane>
  112 +
  113 + </el-tabs>
  114 +
  115 + </el-col>
  116 + </el-row>
  117 + </div>
  118 + </div>
  119 +
  120 + <cm-dialog title="保存场景" width="500px" :showDialogVisible="dialogFormVisible" @hidedialog="showDialogForm"
  121 + @okfunc="saveAnalysis">
  122 + <template v-slot>
  123 + <div style="display:inline-block;margin-bottom: 10px">
  124 + <el-radio-group v-model="isAdd" @change="analysisChange">
  125 + <el-radio :label="false" border>
  126 + 新增场景分类
  127 + </el-radio>
  128 + <el-radio :label="true" border>
  129 + 追加场景分类
  130 + </el-radio>
  131 + </el-radio-group>
  132 + </div>
  133 + <div v-if="!isAdd" style="padding: 3px 10px;">
  134 + <el-input v-model="form.parentName" placeholder="请输入场景分类"/>
  135 + </div>
  136 + <div v-else style="padding: 3px 10px;">
  137 + <el-select v-model="form.parentId" placeholder="请选择场景分类" style="width: 100%">
  138 + <el-option
  139 + v-for="item in parentList"
  140 + :key="item.id"
  141 + :label="item.configName"
  142 + :value="item.id">
  143 + </el-option>
  144 + </el-select>
  145 + </div>
  146 + <div style="padding: 3px 10px;">
  147 + <el-input v-model="form.scene.sort" type="number" placeholder="请输入排序"/>
  148 + </div>
  149 + </template>
  150 + </cm-dialog>
  151 +
  152 +</div>
  1 +/**
  2 + * 时间范围：time_scope
  3 + * <p>
  4 + * 作者： Wang
  5 + * 时间：2021/11/20 16:13
  6 + */
  7 +const timeRange = () => {
  8 + const {proxy} = Vue.getCurrentInstance();
  9 + let timeRangeArr = Vue.ref([]);
  10 +
  11 + let loadTimeRange = (callback) => {
  12 + if (timeRangeArr.value.length > 0) {
  13 + return;
  14 + }
  15 + proxy.$http.post(`/api-web/manage/ddic/findSucDdics/time_scope`, {}, function (res) {
  16 + if (res && res.data) {
  17 + timeRangeArr.value = res.data;
  18 +
  19 + if (callback) {
  20 + callback(res.data[0].ddicCode);
  21 + }
  22 + }
  23 + });
  24 + }
  25 +
  26 + return {
  27 + timeRangeArr,
  28 + loadTimeRange
  29 + }
  30 +}
  31 +
  32 +/**
  33 + * 契合频率
  34 + * <p>
  35 + * 作者： Wang
  36 + * 时间：2021/11/20 16:38
  37 + */
  38 +const frequency = () => {
  39 + const {proxy} = Vue.getCurrentInstance();
  40 + let frequencyArr = Vue.ref([]);
  41 +
  42 + let loadFrequency = (defCode, callback) => {
  43 + if (frequencyArr.value.lnegth > 0) {
  44 + return;
  45 + }
  46 +
  47 + let param = {
  48 + ddicName: defCode
  49 + }
  50 + proxy.$http.get(`/api-web/ContrastAnalysis/selectTogetherRate`, param, function (res) {
  51 + if (res && res.data) {
  52 + frequencyArr.value = res.data;
  53 + if (callback) {
  54 + callback();
  55 + }
  56 + }
  57 + });
  58 + }
  59 +
  60 + return {
  61 + frequencyArr,
  62 + loadFrequency
  63 + }
  64 +}
  65 +
  66 +export default {
  67 + name: 'resIndex',
  68 + template: '',
  69 + components: {
  70 + 'analysis-line': Vue.defineAsyncComponent(
  71 + () => myImport('components/page/analysis/lineChars/index')
  72 + ),
  73 + },
  74 + data() {
  75 + return {
  76 + props: {
  77 + label: 'label',
  78 + children: 'children'
  79 + }
  80 + }
  81 + },
  82 + setup() {
  83 + const {proxy} = Vue.getCurrentInstance();
  84 + let height = Vue.ref(window.innerHeight - 10);
  85 +
  86 + let columns = Vue.ref([
  87 + {
  88 + prop: 'busTypeName',
  89 + label: '业务系统',
  90 + sortable: true,
  91 + align: 'center',
  92 + },
  93 + {
  94 + prop: 'resTypeName',
  95 + label: '资源类型',
  96 + sortable: true,
  97 + align: 'center',
  98 + },
  99 + {
  100 + prop: 'resName',
  101 + label: '资源名称',
  102 + sortable: true,
  103 + align: 'center',
  104 + },
  105 + {
  106 + prop: 'ip',
  107 + label: 'ip地址',
  108 + sortable: true,
  109 + align: 'center',
  110 + },
  111 + {
  112 + prop: 'kpiName',
  113 + label: '指标名称',
  114 + sortable: true,
  115 + align: 'center',
  116 + },
  117 + {
  118 + prop: 'flag',
  119 + label: '指标标识',
  120 + sortable: true,
  121 + align: 'center',
  122 + }
  123 + ]);
  124 +
  125 +
  126 + var id = proxy.$global.getQueryVariable('configId');
  127 +
  128 + let resTypeArr = Vue.ref([]);
  129 + let kpiTypeArr = Vue.ref([]);
  130 + let busTypeArr = Vue.ref([]);
  131 + let keyWords = Vue.ref('');
  132 + let config = Vue.ref(id);
  133 + let lineChart = Vue.ref({
  134 + legend: {
  135 + data: []
  136 + },
  137 + xAxis: [],
  138 + series: [{
  139 + name: '',
  140 + type: 'bar',
  141 + data: []
  142 + }]
  143 + });
  144 + let activeName = Vue.ref('first');
  145 + const tabFirstList = Vue.ref([]);
  146 + const tabSecondList = Vue.ref([]);
  147 + let dialogFormVisible = Vue.ref(false);
  148 + let parentList = Vue.ref([]);
  149 + let isAdd = Vue.ref(false);
  150 +
  151 + let form = Vue.ref({
  152 + parentId: '',
  153 + parentName: '',
  154 + desc: '',
  155 + scene: {
  156 + name: '',
  157 + desc: '',
  158 + sort: 1,
  159 + timeScope: '',
  160 + frequency: '',
  161 + },
  162 + resourceList: []
  163 + });
  164 +
  165 +
  166 + let getResType = (arr) => {
  167 + console.log(arr);
  168 + var types = arr.map(function (v) {
  169 + return v.id;
  170 + });
  171 + resTypeArr.value = types;
  172 + loeadTable();
  173 + }
  174 + let getKpiType = (arr) => {
  175 + console.log(arr);
  176 + var types = arr.map(function (v) {
  177 + e
  178 + return v.kpiId;
  179 + });
  180 + kpiTypeArr.value = types;
  181 + loeadTable();
  182 + }
  183 + let getBizType = (arr) => {
  184 + console.log(arr);
  185 + var types = arr.map(function (v) {
  186 + return v.busId;
  187 + });
  188 + busTypeArr.value = types;
  189 + loeadTable();
  190 + }
  191 +
  192 + // 查询参数
  193 + let params = {
  194 + keyWords: keyWords.value,
  195 + resType: resTypeArr.value.join(','),
  196 + kpiType: kpiTypeArr.value.join(','),
  197 + bizType: busTypeArr.value.join(','),
  198 + configId: config.value
  199 + }
  200 +
  201 + let loadFirstList = (reload) => {
  202 + if (!reload && tabFirstList.value.length > 0) {
  203 + return false;
  204 + }
  205 +
  206 + proxy.$http.get(`/api-web/ContrastAnalysis/added`, params, function (res) {
  207 + if (res && res.data) {
  208 + tabFirstList.value = res.data;
  209 + }
  210 + });
  211 + }
  212 +
  213 + let loadSecondList = (reload) => {
  214 + if (!reload && tabSecondList.value.length > 0) {
  215 + return false;
  216 + }
  217 + proxy.$http.get(`/api-web/ContrastAnalysis/notAdded`, params, function (res) {
  218 + if (res && res.data) {
  219 + tabSecondList.value = res.data;
  220 + }
  221 + });
  222 + }
  223 +
  224 +
  225 + let tabClick = (tab, event) => {
  226 + let name = tab.paneName;
  227 + if (name == 'first') {
  228 + loadFirstList(false);
  229 + } else {
  230 + loadSecondList(false);
  231 + }
  232 + }
  233 +
  234 + let loeadTable = (reload) => {
  235 + if (activeName.value == 'first') {
  236 + loadFirstList(reload);
  237 + } else {
  238 + loadSecondList(reload);
  239 + }
  240 + }
  241 +
  242 + const {
  243 + frequencyArr,
  244 + loadFrequency
  245 + } = frequency();
  246 +
  247 + const {
  248 + timeRangeArr,
  249 + loadTimeRange,
  250 + } = timeRange();
  251 +
  252 + let timeRangeChange = (item) => {
  253 + let code = item.ddicCode;
  254 + loadFrequency(code);
  255 + }
  256 +
  257 + let addRes = (row, index) => {
  258 + tabFirstList.value.push(row);
  259 + activeName.value = 'first'
  260 + //proxy.$global.showMsg("添加成功！");
  261 +
  262 + // 加载折线图
  263 + getChartData();
  264 +
  265 + }
  266 + let deleteRes = (row, index) => {
  267 + proxy.$global.confirm("确认删除资源吗？", function () {
  268 + // proxy.$global.showMsg("删除成功！")
  269 + tabFirstList.value.splice(index, 1);
  270 + getChartData();
  271 + })
  272 + }
  273 +
  274 + let getChartData = () => {
  275 +
  276 + let timeScope = form.value.scene.timeScope.replaceAll("time_scope_", "")
  277 + if (timeScope == '') {
  278 + proxy.$global.showMsg("请选择时间范围！", "warning");
  279 + return;
  280 + }
  281 + if (form.value.scene.frequency == '') {
  282 + proxy.$global.showMsg("请选择契合频率！", "warning");
  283 + return;
  284 + }
  285 +
  286 + let resList = tabFirstList.value.map(function (v) {
  287 + return {resId: v.resId, kpiId: v.kpiId, kpiFlg: v.flag}
  288 + });
  289 +
  290 + // let p = {
  291 + // timeScope: timeScope,
  292 + // frequency: form.value.scene.frequency,
  293 + // resource: resList,
  294 + // type : 'avg'
  295 + // }
  296 + let p = {
  297 + "timeScope": timeScope,
  298 + "frequency": form.value.scene.frequency,
  299 + "resource": [
  300 + {
  301 + "resId": "F6F24DADC01ADE5DD9583144BE6E8E15",
  302 + "kpiId": "KPI20352505",
  303 + "kpiFlg": "mem"
  304 + },
  305 + {
  306 + "resId": "C5DC239D719ACAB61231ACED7CE68CD1",
  307 + "kpiId": "KPI7054BC34",
  308 + "kpiFlg": "cpu"
  309 + }
  310 + ],
  311 + "type": "avg"
  312 + }
  313 +
  314 + proxy.$http.post(`/api-web/ContrastAnalysis/getLineData`, p, function (res) {
  315 + if (res && res.map) {
  316 + let map = res.map;
  317 +
  318 + let legend = map.legend;
  319 + //let units = map.units;
  320 + let xAxis = map.x;
  321 +
  322 + let yArr = map.y;
  323 +
  324 + //
  325 + let series = [];
  326 + legend.forEach(function (v, i) {
  327 + series.push({
  328 + name: v,
  329 + type: 'line',
  330 + data: yArr[i]
  331 + });
  332 + })
  333 +
  334 +
  335 + lineChart.value = {
  336 + legend: {
  337 + data: legend
  338 + },
  339 + xAxis: xAxis,
  340 + series: series
  341 + }
  342 + }
  343 + });
  344 + }
  345 +
  346 +
  347 + // 点击按钮搜索
  348 + let onBtnSearch = () => {
  349 + loeadTable(true);
  350 + }
  351 +
  352 + let onReset = () => {
  353 + keyWords.value = '';
  354 + resTypeArr.value = [];
  355 + kpiTypeArr.value = [];
  356 + busTypeArr.value = [];
  357 + }
  358 +
  359 + let showDialogForm = (flg) => {
  360 + dialogFormVisible.value = flg;
  361 + }
  362 +
  363 + let analysisChange = (val) => {
  364 + if (val && val === true && parentList.value.length == 0) {
  365 + // 加载数据
  366 + proxy.$http.post(`/api-web/ContrastAnalysis/selectScene`, {}, function (res) {
  367 + if (res && res.data) {
  368 + parentList.value = res.data;
  369 + }
  370 + });
  371 + }
  372 + }
  373 + let saveAnalysis = () => {
  374 + let formVal = form.value;
  375 + let parentName = formVal.parentName;
  376 + let parentId = formVal.parentId;
  377 + let name = formVal.scene.name;
  378 + let sort = formVal.scene.sort;
  379 + let timeScope = formVal.scene.timeScope;
  380 + let frequency = formVal.scene.frequency;
  381 + let resourceList = tabFirstList.value;
  382 +
  383 + if(name == ''){
  384 + proxy.$global.showMsg("请输入场景名称！","warning");
  385 + return;
  386 + }
  387 +
  388 + if(resourceList && resourceList.length == 0){
  389 + proxy.$global.showMsg("请添加资源！","warning");
  390 + return;
  391 + }
  392 +
  393 + let resList = resourceList.map(function (v) {
  394 + return {resId: v.resId, kpiId: v.kpiId, kpiFlg: v.flag,resType:v.resType,kpiUnit:v.kpiUnit}
  395 + });
  396 +
  397 +
  398 + let addParam = {
  399 + scene: [{
  400 + name: name,
  401 + desc: '',
  402 + sort: sort,
  403 + timeScope: timeScope,
  404 + frequency: frequency,
  405 + resourceList: resList
  406 + }]
  407 + }
  408 +
  409 + let url = '';
  410 + if (isAdd.value == false) {
  411 + if(parentName == ''){
  412 + proxy.$global.showMsg("请输入场景分类！","warning");
  413 + return;
  414 + }
  415 + addParam['parentName'] = parentName;
  416 + url = '/api-web/ContrastAnalysis/insertScene';
  417 + } else {
  418 + if(parentId == ''){
  419 + proxy.$global.showMsg("请选择场景分类！","warning");
  420 + return;
  421 + }
  422 + addParam['parentId'] = parentId;
  423 + url = '/api-web/ContrastAnalysis/updateNode';
  424 + }
  425 +
  426 + proxy.$http.post(url, addParam, function (res) {
  427 + if (res && res.success) {
  428 + proxy.$global.showMsg("添加成功！");
  429 + setTimeout(function () {
  430 + window.top.location.href = window.top.location.origin + "/#/analysis/index"
  431 + }, 1500)
  432 + }
  433 + });
  434 + }
  435 +
  436 +
  437 + // 挂载完
  438 + Vue.onMounted(() => {
  439 + if(!id){
  440 + activeName.value = 'second';
  441 + }
  442 + loeadTable();
  443 +
  444 + // 先加载时间范围，然后在加载
  445 + loadTimeRange(function (defCode) {
  446 + form.value.scene.timeScope = defCode;
  447 + loadFrequency(defCode, function () {
  448 + if (frequencyArr.value.length > 0) {
  449 + form.value.scene.frequency = frequencyArr.value[0].ddicCode;
  450 + }
  451 + });
  452 + });
  453 + console.log('onMounted');
  454 + })
  455 +
  456 +
  457 + return {
  458 + height,
  459 + lineChart,
  460 + form,
  461 + columns,
  462 + tabFirstList,
  463 + tabSecondList,
  464 + addRes,
  465 + deleteRes,
  466 + onBtnSearch,
  467 + onReset,
  468 +
  469 + getResType,
  470 + getKpiType,
  471 + getBizType,
  472 + keyWords,
  473 +
  474 + loadFirstList,
  475 + loadSecondList,
  476 +
  477 + activeName,
  478 + tabClick,
  479 +
  480 + frequencyArr,
  481 + loadFrequency,
  482 + timeRangeArr,
  483 + loadTimeRange,
  484 + timeRangeChange,
  485 +
  486 + isAdd,
  487 + analysisChange,
  488 + dialogFormVisible,
  489 + showDialogForm,
  490 + saveAnalysis,
  491 + parentList
  492 + }
  493 + }
  494 +}
  1 +<div class="container" :style="{'height':height+'px','max-height':height+'px'}">
  2 + <div class="cm-card" :style="{'min-height':height+'px','max-height':height+'px','height':'100%'}">
  3 + <div v-for="(item,index) in childArr">
  4 + <analysis-line :legend="lineChart[item.node.id].legend" :xAxis="lineChart[item.node.id].xAxis" :series="lineChart[item.node.id].series">
  5 + <template #title="scope" >
  6 + {{ index == 0 ? item.node.configName : '' }}
  7 + </template>
  8 + <template #lineName="scope">
  9 + {{ item.node.configName }}
  10 + </template>
  11 +
  12 + <template #timeRange="scope">
  13 + {{ item.node.timeScope }}
  14 + </template>
  15 + <template #frequency="scope">
  16 + {{ item.node.frequency }}
  17 + </template>
  18 +
  19 + <template #tools="scope">
  20 + <router-link :to="'/analysis/add?configId=' + item.node.id " class="analysis link-type">
  21 + 编辑
  22 + </router-link>
  23 + </template>
  24 + </analysis-line>
  25 + <el-divider content-position="left">
  26 + <!--<div>
  27 + <i class="iconfont icon-liebiaomoshi"></i>
  28 + <span style="margin-left: 5px">查询条件</span>
  29 + </div>-->
  30 + </el-divider>
  31 + </div>
  32 + </div>
  33 +</div>
  1 +export default {
  2 + name: 'analysisViewIndex',
  3 + template: '',
  4 + components: {
  5 + 'analysis-line': Vue.defineAsyncComponent(
  6 + () => myImport('components/page/analysis/lineChars/index')
  7 + )
  8 + },
  9 + data() {
  10 + return {}
  11 + },
  12 + setup() {
  13 + const {proxy} = Vue.getCurrentInstance();
  14 + let height = Vue.ref(window.innerHeight - 10);
  15 + let parentInfo = Vue.ref([]);
  16 + let childArr = Vue.ref({});
  17 + let lineChart = Vue.ref({});
  18 +
  19 + var id = proxy.$global.getQueryVariable('id');
  20 +
  21 + if(id && id == ''){
  22 + proxy.$global.showMsg("获取场景信息异常，请联系管理员！","warning");
  23 + return;
  24 + }
  25 +
  26 + let loadDetail = () => {
  27 + // 加载数据
  28 + proxy.$http.get(`/api-web/ContrastAnalysis/getNode`, {id:id}, function (res) {
  29 + if (res && res.map) {
  30 + let child = res.map.sNode;
  31 + let parentList = res.map.pNode;
  32 +
  33 + parentInfo.value = parentList;
  34 + childArr.value =child;
  35 +
  36 + child.forEach(function (v){
  37 + getChartData(v);
  38 + })
  39 +
  40 + }
  41 + });
  42 + }
  43 +
  44 + let getChartData = (v) => {
  45 +
  46 + let nodeId = v.node.id;
  47 + let resource = v.resource;
  48 +
  49 + lineChart.value[nodeId] = {
  50 + legend: {
  51 + data: []
  52 + },
  53 + xAxis: [],
  54 + series: []
  55 + }
  56 +
  57 +
  58 + let resList = resource.map(function (v) {
  59 + return {resId: v.resId, kpiId: v.kpiId, kpiFlg: v.flag}
  60 + });
  61 +
  62 + // let p = {
  63 + // "timeScope": v.node.timeScope,
  64 + // "frequency": v.node.frequency,
  65 + // "resource": resList,
  66 + // "type": "avg"
  67 + // }
  68 +
  69 + let p = {
  70 + "timeScope": 'DAY',
  71 + "frequency": '15',
  72 + "resource": [
  73 + {
  74 + "resId": "F6F24DADC01ADE5DD9583144BE6E8E15",
  75 + "kpiId": "KPI20352505",
  76 + "kpiFlg": "mem"
  77 + },
  78 + {
  79 + "resId": "C5DC239D719ACAB61231ACED7CE68CD1",
  80 + "kpiId": "KPI7054BC34",
  81 + "kpiFlg": "cpu"
  82 + }
  83 + ],
  84 + "type": "avg"
  85 + }
  86 +
  87 + proxy.$http.post(`/api-web/ContrastAnalysis/getLineData`, p, function (res) {
  88 + if (res && res.map) {
  89 + let map = res.map;
  90 +
  91 + let legend = map.legend;
  92 + //let units = map.units;
  93 + let xAxis = map.x;
  94 +
  95 + let yArr = map.y;
  96 +
  97 + //
  98 + let series = [];
  99 + legend.forEach(function (v, i) {
  100 + series.push({
  101 + name: v,
  102 + type: 'line',
  103 + data: yArr[i]
  104 + });
  105 + })
  106 +
  107 +
  108 + lineChart.value[nodeId] = {
  109 + legend: {
  110 + data: legend
  111 + },
  112 + xAxis: xAxis,
  113 + series: series
  114 + }
  115 + }
  116 + },undefined,undefined,false);
  117 + }
  118 +
  119 +
  120 + // 挂载完
  121 + Vue.onMounted(() => {
  122 + loadDetail();
  123 + console.log('onMounted');
  124 + })
  125 +
  126 +
  127 + return {
  128 + height,
  129 + childArr,
  130 + parentInfo,
  131 + lineChart
  132 + }
  133 + }
  134 +}