monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by XuHaoJie
Commit be70e76064f84937d50cd2ae392e59638d088da1 2 parents 45eb1d90 2f754b69

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

Inline Side-by-side
Showing 17 changed files with 587 additions and 180 deletions
  1 +INSERT INTO `cloud_backend_monitor`.`sys_ddic`(`ddicId`, `ddicCode`, `ddicName`, `ddicDesc`, `ddicSort`, `ddicCategory`, `createTime`) VALUES ('3a83b4dafeff44fe85e32ae824146b91', 'topoBindKpiIds', '拓扑绑定指标', '拓扑绑定指标', 1, '0', '2021-11-18 14:55:53');
  2 +
  3 +INSERT INTO sys_ddic (ddicId, ddicCode,ddicName,ddicDesc,ddicSort,ddicCategory,createTime )
  4 +select UUID(),kpiId,kpiName,kpiType, 0 as ddicSort,'topoBindKpiIds' as ddicCategory,NOW() as createTime from b_kpi where kpiIdent = 1 or isWarning = 1
@@ -31,6 +31,12 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele @@ -31,6 +31,12 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
31 // 获取编辑指标 31 // 获取编辑指标
32 getEditKpiList:function (){ 32 getEditKpiList:function (){
33 33
  34 + var editFlag = localStorage.getItem("editFlag");//是否编辑状态
  35 + if(!(editFlag && editFlag == "true")){
  36 + editKpiList.push('----');
  37 + return editKpiList;
  38 + }
  39 +
34 if(editKpiList.length != 0){ 40 if(editKpiList.length != 0){
35 return editKpiList; 41 return editKpiList;
36 } 42 }
@@ -51,6 +57,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele @@ -51,6 +57,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
51 }, 57 },
52 checkKpi : function (kpiId){ 58 checkKpi : function (kpiId){
53 var data = {} 59 var data = {}
  60 +
54 var kpiIds = kpiId.split(','); 61 var kpiIds = kpiId.split(',');
55 $.each(kpiIds, function (i, v) { 62 $.each(kpiIds, function (i, v) {
56 data[v] = editKpiList.includes(v); 63 data[v] = editKpiList.includes(v);
@@ -218,7 +225,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele @@ -218,7 +225,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
218 } else { 225 } else {
219 // 按照指标配置展示 226 // 按照指标配置展示
220 let kpiObject = obj.checkKpi(kpiId) 227 let kpiObject = obj.checkKpi(kpiId)
221 - if(kpiObject[data.id] && kpiObject[data.id] == true){ 228 + if(kpiObject[data.id] && kpiObject[data.id] == true && editFlag && editFlag == "true"){
222 pie.find(".pie-half-text").html(piechbox+"<b><u style='"+resStyle+"'>"+val + "%</u></b>"); 229 pie.find(".pie-half-text").html(piechbox+"<b><u style='"+resStyle+"'>"+val + "%</u></b>");
223 form.render(); 230 form.render();
224 } else { 231 } else {
@@ -1783,7 +1790,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele @@ -1783,7 +1790,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
1783 var kpiId = d[v.id].kpiId; 1790 var kpiId = d[v.id].kpiId;
1784 // 按照指标配置展示 1791 // 按照指标配置展示
1785 let kpiObject = obj.checkKpi(kpiId) 1792 let kpiObject = obj.checkKpi(kpiId)
1786 - if(kpiObject[kpiId] && kpiObject[kpiId] == true){ 1793 + if(kpiObject[kpiId] && kpiObject[kpiId] == true && editFlag && editFlag == "true"){
1787 return chbox + '<a class="link showlinechart_' + tableId + '" style="padding-left:5px;' + resStyle + '" ' + 'data-isWarning="' + value.isWarning + '" data-ident="' + value.kpiIdent + '"' + 1794 return chbox + '<a class="link showlinechart_' + tableId + '" style="padding-left:5px;' + resStyle + '" ' + 'data-isWarning="' + value.isWarning + '" data-ident="' + value.kpiIdent + '"' +
1788 'data-trend="' + value.isTrend + '" data-id="' + v.id + '" data-kpiname="' + kpiname + '" data-name="' + v.name + '" data-flag="' + value.flag + '">' + value.kpiValue + '</a>' + 1795 'data-trend="' + value.isTrend + '" data-id="' + v.id + '" data-kpiname="' + kpiname + '" data-name="' + v.name + '" data-flag="' + value.flag + '">' + value.kpiValue + '</a>' +
1789 '<a class="detail_row_menu hide" data-isWarning="' + value.isWarning + '" data-ident="' + value.kpiIdent + '" data-trend="' + value.isTrend + '" ' + 1796 '<a class="detail_row_menu hide" data-isWarning="' + value.isWarning + '" data-ident="' + value.kpiIdent + '" data-trend="' + value.isTrend + '" ' +
  1 +<div>
  2 + <el-select @visible-change="selectClose" v-model="modelValueLabel" :filter-method="selectFilterMethod"
  3 + style="min-width: 120px;" :size="size" placeholder="所属系统" :filterable="isFilter" clearable
  4 + :collapse-tags="true" @change="selectChangeMethod">
  5 + <el-option :value="modelValue" style="height: auto;padding: 0;">
  6 + <el-tree ref="bizTree" :data="list" :check-on-click-node="true" :default-expand-all="isDefaultAll"
  7 + :expand-on-click-node="true" :filter-node-method="filterNode" :check-strictly="false"
  8 + :empty-text="emptyText" :show-checkbox="isMultiple" node-key="busId" :show-checkbox="checkbox"
  9 + @check-change="handleCheckChange" node-key="busId" :props="defaultProps">
  10 + </el-tree>
  11 + </el-option>
  12 + </el-select>
  13 +</div>
  1 +export default {
  2 + template: '',
  3 + name: 'biz-type-tree-input',
  4 + props: {
  5 + // echoObj 可以用于回显，它的值为需要回显的对象，多个时可以使用数组
  6 + echoObj: {},
  7 + // 是否开启搜索
  8 + isFilter: {
  9 + default: true
  10 + },
  11 + // 尺寸
  12 + size: {
  13 + default: ''
  14 + },
  15 + placeholderText: {
  16 + default: '所属业务'
  17 + },
  18 + isTag: {
  19 + default: true
  20 + },
  21 + isDefaultAll: {
  22 + default: true
  23 + },
  24 + // 点击节点是否展开
  25 + expandClickNode: {
  26 + default: false
  27 + },
  28 + // 字段key，用于取出数据中的名字
  29 + fieldName: {
  30 + default: 'title'
  31 + },
  32 + emptyText: {
  33 + default: '无匹配项'
  34 + },
  35 + // 字段key， 数据中的id
  36 + fieldId: {
  37 + default: ''
  38 + },
  39 + // 配置是否可多选
  40 + isMultiple: {
  41 + type: Boolean,
  42 + default: true
  43 + },
  44 +
  45 + },
  46 + data() {
  47 + return {
  48 + defaultProps: {
  49 + children: 'children',
  50 + label: 'busTypeName'
  51 + },
  52 + list:[],
  53 + // 实际选中值
  54 + modelValue: [],
  55 + // 下拉框绑定值(选中值名字)
  56 + modelValueLabel: []
  57 + }
  58 + },
  59 + methods: {
  60 + selectClose(bool) {
  61 + if (bool) {
  62 + this.selectFilterMethod('')
  63 + }
  64 + },
  65 + selectFilterMethod(val) {
  66 + // 下拉框调用tree树筛选
  67 + this.$refs.kpiTree.filter(val)
  68 + },
  69 + selectChangeMethod(e) {
  70 + var arrNew = []
  71 + var dataLength = this.modelValue.length
  72 + var eLength = e.length
  73 + for (var i = 0; i < dataLength; i++) {
  74 + for (var j = 0; j < eLength; j++) {
  75 + if (e[j] === JSON.parse('this.modelValue[i].' + this.fieldName)) {
  76 + arrNew.push(this.modelValue[i])
  77 + }
  78 + }
  79 + }
  80 + // 设置勾选的值
  81 + this.$refs.kpiTree.setCheckedNodes(arrNew)
  82 + },
  83 + filterNode(value, data) {
  84 + if (!value) return true
  85 +
  86 + return data[this.fieldName].indexOf(value) !== -1
  87 + },
  88 + handleCheckChange(data, checked, indeterminate) {
  89 + let that = this;
  90 +
  91 + var selectArr = [];
  92 + selectArr.push(data);
  93 + // data[that.defaultProps.children].forEach(function (v) {
  94 + // selectArr.push(data);
  95 + // });
  96 +
  97 + if (checked) {
  98 + // 已选中
  99 + that.modelValue = that.modelValue.concat(selectArr)
  100 + } else {
  101 + that.modelValue.forEach(function(v, i) {
  102 + selectArr.forEach(function(v1) {
  103 + if (v.busId == v1.busId) {
  104 + that.modelValue.splice(i, 1);
  105 + }
  106 + })
  107 + })
  108 + }
  109 + that.modelValueLabel = that.modelValue.map(function(v) {
  110 + return v[that.defaultProps.label];
  111 + });
  112 + that.$emit('callback', this.modelValue)
  113 + }
  114 + },
  115 + watch: {},
  116 + mounted() {
  117 + let that = this;
  118 + //加载资源列表
  119 + const { proxy } = Vue.getCurrentInstance()
  120 + // 加载列表
  121 + proxy.$http.get("/api-web/home/business/findAllBusType", {}, function(res) {
  122 + if (res && res.data) {
  123 + that.list = res.data;
  124 + console.log("getTree:",that.list);
  125 + }
  126 + })
  127 + },
  128 + created() {
  129 +
  130 +
  131 + }
  132 +}
  1 +<div>
  2 + <el-select @visible-change="selectClose" v-model="modelValueLabel" :filter-method="selectFilterMethod"
  3 + style="min-width: 120px;" :size="size" placeholder="指标类型" :filterable="isFilter" clearable
  4 + :collapse-tags="true" @change="selectChangeMethod">
  5 + <el-option :value="modelValue" style="height: auto;padding: 0;">
  6 + <el-tree ref="kpiTree" :data="list" :check-on-click-node="true" :default-expand-all="isDefaultAll"
  7 + :expand-on-click-node="true" :filter-node-method="filterNode" :check-strictly="false"
  8 + :empty-text="emptyText" :show-checkbox="isMultiple" node-key="kpiId" :show-checkbox="checkbox"
  9 + @check-change="handleCheckChange" node-key="kpiId" :props="defaultProps">
  10 + </el-tree>
  11 + </el-option>
  12 + </el-select>
  13 +</div>
  1 +export default {
  2 + template: '',
  3 + name: 'kpi-type-tree-input',
  4 + props: {
  5 + // echoObj 可以用于回显，它的值为需要回显的对象，多个时可以使用数组
  6 + echoObj: {},
  7 + // 是否开启搜索
  8 + isFilter: {
  9 + default: true
  10 + },
  11 + // 尺寸
  12 + size: {
  13 + default: ''
  14 + },
  15 + placeholderText: {
  16 + default: '指标类型'
  17 + },
  18 + isTag: {
  19 + default: true
  20 + },
  21 + isDefaultAll: {
  22 + default: true
  23 + },
  24 + // 点击节点是否展开
  25 + expandClickNode: {
  26 + default: false
  27 + },
  28 + // 字段key，用于取出数据中的名字
  29 + fieldName: {
  30 + default: 'title'
  31 + },
  32 + emptyText: {
  33 + default: '无匹配项'
  34 + },
  35 + // 字段key， 数据中的id
  36 + fieldId: {
  37 + default: ''
  38 + },
  39 + // 配置是否可多选
  40 + isMultiple: {
  41 + type: Boolean,
  42 + default: true
  43 + },
  44 +
  45 + },
  46 + data() {
  47 + return {
  48 + defaultProps: {
  49 + children: 'children',
  50 + label: 'kpiName'
  51 + },
  52 + list:[],
  53 + // 实际选中值
  54 + modelValue: [],
  55 + // 下拉框绑定值(选中值名字)
  56 + modelValueLabel: []
  57 + }
  58 + },
  59 + methods: {
  60 + selectClose(bool) {
  61 + if (bool) {
  62 + this.selectFilterMethod('')
  63 + }
  64 + },
  65 + selectFilterMethod(val) {
  66 + // 下拉框调用tree树筛选
  67 + this.$refs.kpiTree.filter(val)
  68 + },
  69 + selectChangeMethod(e) {
  70 + var arrNew = []
  71 + var dataLength = this.modelValue.length
  72 + var eLength = e.length
  73 + for (var i = 0; i < dataLength; i++) {
  74 + for (var j = 0; j < eLength; j++) {
  75 + if (e[j] === JSON.parse('this.modelValue[i].' + this.fieldName)) {
  76 + arrNew.push(this.modelValue[i])
  77 + }
  78 + }
  79 + }
  80 + // 设置勾选的值
  81 + this.$refs.kpiTree.setCheckedNodes(arrNew)
  82 + },
  83 + filterNode(value, data) {
  84 + if (!value) return true
  85 +
  86 + return data[this.fieldName].indexOf(value) !== -1
  87 + },
  88 + handleCheckChange(data, checked, indeterminate) {
  89 + let that = this;
  90 +
  91 + var selectArr = [];
  92 + selectArr.push(data);
  93 + // data[that.defaultProps.children].forEach(function (v) {
  94 + // selectArr.push(data);
  95 + // });
  96 +
  97 + if (checked) {
  98 + // 已选中
  99 + that.modelValue = that.modelValue.concat(selectArr)
  100 + } else {
  101 + that.modelValue.forEach(function(v, i) {
  102 + selectArr.forEach(function(v1) {
  103 + if (v.kpiId == v1.kpiId) {
  104 + that.modelValue.splice(i, 1);
  105 + }
  106 + })
  107 + })
  108 + }
  109 + that.modelValueLabel = that.modelValue.map(function(v) {
  110 + return v[that.defaultProps.label];
  111 + });
  112 + that.$emit('callback', this.modelValue)
  113 + }
  114 + },
  115 + watch: {},
  116 + mounted() {
  117 + let that = this;
  118 + //加载资源列表
  119 + const { proxy } = Vue.getCurrentInstance()
  120 + // 加载列表
  121 + proxy.$http.get("/api-web/manage/kpi/list", {}, function(res) {
  122 + if (res && res.data) {
  123 + that.list = res.data;
  124 + console.log("getTree:",that.list);
  125 + }
  126 + })
  127 + },
  128 + created() {
  129 +
  130 +
  131 + }
  132 +}
1 const ver = window.__ver || ''; 1 const ver = window.__ver || '';
2 2
3 Promise.all([ 3 Promise.all([
4 - import('./store/index.js' + ver),  
5 - import('./router/index.js' + ver),  
6 - import('./app.js' + ver),  
7 - import('./script/global.js' + ver),  
8 - import('./script/http.js' + ver), 4 + import('./store/index.js' + ver),
  5 + import('./router/index.js' + ver),
  6 + import('./app.js' + ver),
  7 + import('./script/global.js' + ver),
  8 + import('./script/http.js' + ver),
9 ]).then((res) => { 9 ]).then((res) => {
10 10
11 - // 创建vue3的实例  
12 - const app = Vue.createApp(res[2].default)  
13 - .use(res[0].default) // 挂载vuex  
14 - .use(res[1].default) // 挂载路由 11 + // 创建vue3的实例
  12 + const app = Vue.createApp(res[2].default)
  13 + .use(res[0].default) // 挂载vuex
  14 + .use(res[1].default) // 挂载路由
15 15
16 - .use(ElementPlus, {  
17 - locale: ElementPlus.lang.zhCn  
18 - })  
19 - .use(ElementPlus) // 加载ElementPlus  
20 - .use(vant) // 加载vant  
21 - .use(vant.Lazyload) // 加载vant 16 + .use(ElementPlus, {
  17 + locale: ElementPlus.lang.zhCn
  18 + })
  19 + .use(ElementPlus) // 加载ElementPlus
  20 + .use(vant) // 加载vant
  21 + .use(vant.Lazyload) // 加载vant
22 22
23 - // 全局注册公共组件  
24 - // 下拉列表资源树  
25 - .component('cm-res-type-tree-input', Vue.defineAsyncComponent(() => myImport('components/common/inputrestypetree/index')))  
26 - // 机房下拉  
27 - .component('cm-machine-room',Vue.defineAsyncComponent(() => myImport('components/common/machineroom/index')))  
28 - // 资源类型树  
29 - .component('cm-res-type-tree-view',Vue.defineAsyncComponent(() => myImport('components/common/restypetree/index')))  
30 - // 资源类型树  
31 - .component('cm-table-page',Vue.defineAsyncComponent(() => myImport('components/common/table-page/index')))  
32 - // 弹框  
33 - .component('cm-dialog',Vue.defineAsyncComponent(() => myImport('components/common/dialog/index')))  
34 - // 用户授权  
35 - .component('cm-userright',Vue.defineAsyncComponent(() => myImport('components/common/userright/index')))  
36 - // 上传组件  
37 - .component('cm-upload',Vue.defineAsyncComponent(() => myImport('components/common/upload/index')))  
38 - // 文档管理  
39 - .component('cm-document',Vue.defineAsyncComponent(() => myImport('components/common/document/index'))); 23 + // 全局注册公共组件
  24 + // 下拉列表资源树
  25 + .component('cm-res-type-tree-input', Vue.defineAsyncComponent(() => myImport('components/common/inputrestypetree/index')))
  26 + // 机房下拉
  27 + .component('cm-machine-room', Vue.defineAsyncComponent(() => myImport('components/common/machineroom/index')))
  28 + // 资源类型树
  29 + .component('cm-res-type-tree-view', Vue.defineAsyncComponent(() => myImport('components/common/restypetree/index')))
  30 + // 资源类型树
  31 + .component('cm-table-page', Vue.defineAsyncComponent(() => myImport('components/common/table-page/index')))
  32 + // 弹框
  33 + .component('cm-dialog', Vue.defineAsyncComponent(() => myImport('components/common/dialog/index')))
  34 + // 用户授权
  35 + .component('cm-userright', Vue.defineAsyncComponent(() => myImport('components/common/userright/index')))
  36 + // 上传组件
  37 + .component('cm-upload', Vue.defineAsyncComponent(() => myImport('components/common/upload/index')))
  38 + // 文档管理
  39 + .component('cm-document', Vue.defineAsyncComponent(() => myImport('components/common/document/index')))
  40 + //指标类型数
  41 + .component('cm-kpi-type-tree-input', Vue.defineAsyncComponent(() => myImport('components/common/inputkpitree/index')))
  42 + //所属系统
  43 + .component('cm-biz-type-tree-input', Vue.defineAsyncComponent(() => myImport('components/common/inputbiztypetree/index')));
40 44
41 45
42 // // 自定义指令 46 // // 自定义指令
@@ -57,7 +61,7 @@ Promise.all([ @@ -57,7 +61,7 @@ Promise.all([
57 // } 61 // }
58 // }) 62 // })
59 63
60 - app.config.globalProperties.$global = res[3].default  
61 - app.config.globalProperties.$http = res[4].default  
62 - app.mount('#app'); // 挂载Vue的app实例 64 + app.config.globalProperties.$global = res[3].default
  65 + app.config.globalProperties.$http = res[4].default
  66 + app.mount('#app'); // 挂载Vue的app实例
63 }) 67 })
@@ -55,14 +55,13 @@ @@ -55,14 +55,13 @@
55 .bottom-condition .el-input__inner,.bottom-condition .el-button{ 55 .bottom-condition .el-input__inner,.bottom-condition .el-button{
56 border-color:#409eff; 56 border-color:#409eff;
57 } 57 }
58 -.analysis {  
59 - position: relative;  
60 - text-align: center;  
61 - height:100%;  
62 - width: 100%;  
63 - /*max-width: 490px;*/ 58 +.analysis-bottom-button{
  59 + padding: 20px 30px 30px 45px;
  60 + display: flex;
  61 + flex-flow: column;
64 } 62 }
65 -.analysis .drop { 63 +
  64 +.analysis-drop {
66 padding-top: 20px; 65 padding-top: 20px;
67 border: 2px dashed #0a93be; 66 border: 2px dashed #0a93be;
68 width: 600px; 67 width: 600px;
@@ -75,15 +74,6 @@ @@ -75,15 +74,6 @@
75 color: #bbb; 74 color: #bbb;
76 position: relative; 75 position: relative;
77 } 76 }
78 -  
79 -.analysis .el-upload__text {  
80 - height: 50px;  
81 - line-height: 50px;  
82 - em {  
83 - color: #0C4493;  
84 - font-style: normal;  
85 - }  
86 -}  
87 .analysis .link-type, 77 .analysis .link-type,
88 .analysis .link-type:focus { 78 .analysis .link-type:focus {
89 color: #337ab7; 79 color: #337ab7;
@@ -92,4 +82,3 @@ @@ -92,4 +82,3 @@
92 82
93 83
94 84
95 -}  
@@ -13,13 +13,13 @@ @@ -13,13 +13,13 @@
13 } 13 }
14 .busniess-circle-left { 14 .busniess-circle-left {
15 position: absolute; 15 position: absolute;
16 - left: 19%;  
17 - top: 59%; 16 + left: 18%;
  17 + top: 38%;
18 } 18 }
19 .busniess-circle-right { 19 .busniess-circle-right {
20 position: absolute; 20 position: absolute;
21 - left: 63%;  
22 - top: 59%; 21 + left: 62%;
  22 + top: 38%;
23 } 23 }
24 .busniess-circle-text { 24 .busniess-circle-text {
25 text-align: center; 25 text-align: center;
@@ -3,34 +3,38 @@ @@ -3,34 +3,38 @@
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-button type="primary">场景名称</el-button>
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>
10 <el-button type="primary"> 10 <el-button type="primary">
11 - 时间范围<el-icon class="el-icon--right"><arrow-down /></el-icon> 11 + 时间范围
  12 + <el-icon class="el-icon--right">
  13 + <arrow-down/>
  14 + </el-icon>
12 </el-button> 15 </el-button>
13 <template #dropdown> 16 <template #dropdown>
14 - <el-dropdown-menu>  
15 - <el-date-picker v-model="displayTime" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="请选择时间" /> 17 + <el-dropdown-menu slot = "dropdown">
  18 + <el-date-picker v-model="displayTime" type="datetime" format="yyyy-MM-dd HH:mm:ss"
  19 + placeholder="请选择时间"/>
16 </el-dropdown-menu> 20 </el-dropdown-menu>
17 </template> 21 </template>
18 </el-dropdown> 22 </el-dropdown>
19 - <el-dropdown> 23 + <el-dropdown @command="frequencycheck">
20 <el-button type="primary"> 24 <el-button type="primary">
21 - 契合频率<el-icon class="el-icon--right"><arrow-down /></el-icon> 25 + 契合频率
  26 + <el-icon class="el-icon--right">
  27 + <arrow-down/>
  28 + </el-icon>
22 </el-button> 29 </el-button>
23 <template #dropdown> 30 <template #dropdown>
24 <el-dropdown-menu> 31 <el-dropdown-menu>
25 - <el-dropdown-item>Action 1</el-dropdown-item>  
26 - <el-dropdown-item>Action 2</el-dropdown-item>  
27 - <el-dropdown-item>Action 3</el-dropdown-item>  
28 - <el-dropdown-item>Action 4</el-dropdown-item>  
29 - <el-dropdown-item>Action 5</el-dropdown-item> 32 + <el-dropdown-item v-for="(item,index) in frequencyArr" v-text="item"
  33 + :command="item"></el-dropdown-item>
30 </el-dropdown-menu> 34 </el-dropdown-menu>
31 </template> 35 </template>
32 </el-dropdown> 36 </el-dropdown>
33 - <el-button type="primary">保存按钮</el-button> 37 + <el-button type="primary">保存</el-button>
34 </el-col> 38 </el-col>
35 </el-row> 39 </el-row>
36 <el-row> 40 <el-row>
@@ -38,8 +42,6 @@ @@ -38,8 +42,6 @@
38 <div class="classLine"> 42 <div class="classLine">
39 <lineChart></lineChart> 43 <lineChart></lineChart>
40 </div> 44 </div>
41 -  
42 -  
43 </el-col> 45 </el-col>
44 </el-row> 46 </el-row>
45 </div> 47 </div>
@@ -57,76 +59,66 @@ @@ -57,76 +59,66 @@
57 <el-row> 59 <el-row>
58 <el-col :span="24"> 60 <el-col :span="24">
59 <el-dropdown> 61 <el-dropdown>
60 - <el-button >  
61 - 电子税务局系统<el-icon class="el-icon--right"><arrow-down /></el-icon>  
62 - </el-button>  
63 - <template #dropdown>  
64 - <el-dropdown-menu >  
65 - <el-dropdown-item>Action 1</el-dropdown-item>  
66 - <el-dropdown-item>Action 2</el-dropdown-item>  
67 - <el-dropdown-item>Action 3</el-dropdown-item>  
68 - <el-dropdown-item>Action 4</el-dropdown-item>  
69 - <el-dropdown-item>Action 5</el-dropdown-item>  
70 - </el-dropdown-menu>  
71 - </template> 62 + <el-icon class="el-icon--right">
  63 + <arrow-down/>
  64 + </el-icon>
  65 + <cm-biz-type-tree-input multiple clearable collapseTags @callback="getBizType"/>
72 </el-dropdown> 66 </el-dropdown>
73 </el-col> 67 </el-col>
74 </el-row> 68 </el-row>
75 <el-row> 69 <el-row>
76 <el-col :span="24"> 70 <el-col :span="24">
77 <el-dropdown> 71 <el-dropdown>
78 - <el-button >  
79 - 资源类型<el-icon class="el-icon--right"><arrow-down /></el-icon>  
80 - </el-button>  
81 - <template #dropdown>  
82 - <el-dropdown-menu>  
83 - <el-dropdown-item>Action 1</el-dropdown-item>  
84 - <el-dropdown-item>Action 2</el-dropdown-item>  
85 - <el-dropdown-item>Action 3</el-dropdown-item>  
86 - <el-dropdown-item>Action 4</el-dropdown-item>  
87 - <el-dropdown-item>Action 5</el-dropdown-item>  
88 - </el-dropdown-menu>  
89 - </template> 72 + <el-icon class="el-icon--right">
  73 + <arrow-down/>
  74 + </el-icon>
  75 + <cm-res-type-tree-input multiple clearable collapseTags @callback="getResType"/>
90 </el-dropdown> 76 </el-dropdown>
91 </el-col> 77 </el-col>
92 </el-row> 78 </el-row>
93 <el-row> 79 <el-row>
94 <el-col :span="24"> 80 <el-col :span="24">
95 <el-dropdown> 81 <el-dropdown>
96 - <el-button >  
97 - 指标类型<el-icon class="el-icon--right"><arrow-down /></el-icon>  
98 - </el-button>  
99 - <template #dropdown>  
100 - <el-dropdown-menu>  
101 - <el-dropdown-item>Action 1</el-dropdown-item>  
102 - <el-dropdown-item>Action 2</el-dropdown-item>  
103 - <el-dropdown-item>Action 3</el-dropdown-item>  
104 - <el-dropdown-item>Action 4</el-dropdown-item>  
105 - <el-dropdown-item>Action 5</el-dropdown-item>  
106 - </el-dropdown-menu>  
107 - </template> 82 +
  83 + <el-icon class="el-icon--right">
  84 + <arrow-down/>
  85 + </el-icon>
  86 + <cm-kpi-type-tree-input multiple clearable collapseTags @callback="getKpiType"/>
108 </el-dropdown> 87 </el-dropdown>
109 </el-col> 88 </el-col>
110 </el-row> 89 </el-row>
111 <el-row> 90 <el-row>
112 <el-col :span="24"> 91 <el-col :span="24">
113 - <el-input v-model="input" placeholder="Please input" /> 92 + <el-input v-model="keyWords" placeholder="输入关键字" style="margin-top: 15px;width: 225px;"/>
  93 + </el-col>
  94 + </el-row>
  95 + <el-row>
  96 + <el-col span="6" class="analysis-bottom-button">
  97 + <el-button type="primary" @click="reset()">重置</el-button>
  98 +
  99 + </el-col>
  100 + <el-col span="6" class ="analysis-bottom-button">
  101 + <el-button type="primary" @click="onBtnSearch()">查询</el-button>
114 </el-col> 102 </el-col>
115 </el-row> 103 </el-row>
116 104
117 </el-col> 105 </el-col>
118 <el-col :span="18"> 106 <el-col :span="18">
119 <el-tabs type="border-card"> 107 <el-tabs type="border-card">
120 - <el-tab-pane label="User">  
121 - <el-table :data="tableData" border style="width: 100%">  
122 - <el-table-column prop="date" label="Date" width="180" />  
123 - <el-table-column prop="name" label="Name" width="180" />  
124 - <el-table-column prop="address" label="Address" />  
125 - </el-table> 108 + <el-tab-pane label="已添加">
  109 + <cm-table-page :columns="addedObj.columns" :dataList="addedObj.maps" @loaddata="getPage"
  110 + :showIndex="true"
  111 + :showBorder="true" :currentPage="currentPage" :total="addedTotal" :loading="false"
  112 + :showPage="true" :height="(height - 95)" :maxWidth="max">
  113 + </cm-table-page>
  114 + </el-tab-pane>
  115 + <el-tab-pane label="未添加">
  116 + <cm-table-page :columns="noaddObj.columns" :dataList="noaddObj.maps" @loaddata="getPage"
  117 + :showIndex="true"
  118 + :showBorder="true" :currentPage="currentPage" :total="noaddTotal" :loading="false"
  119 + :showPage="true" :height="(height - 95)" :maxWidth="max">
  120 + </cm-table-page>
126 </el-tab-pane> 121 </el-tab-pane>
127 - <el-tab-pane label="Config">Config</el-tab-pane>  
128 - <el-tab-pane label="Role">Role</el-tab-pane>  
129 - <el-tab-pane label="Task">Task</el-tab-pane>  
130 </el-tabs> 122 </el-tabs>
131 </el-col> 123 </el-col>
132 </el-row> 124 </el-row>
  1 +export default {
  2 + name: 'addIndex',
  3 + template: '',
  4 + components: {},
  5 + data() {
  6 + return {
  7 + props: {
  8 + label: 'label',
  9 + children: 'children'
  10 + }
  11 + }
  12 + },
  13 + created() {
  14 + this.loadResList()
  15 + },
  16 + setup() {
  17 + const {proxy} = Vue.getCurrentInstance();
  18 + // 分页信息
  19 + const pageInfo = Vue.reactive({
  20 + total: 0,
  21 + limit: 50,
  22 + page: 1,
  23 + keyWords: ''
  24 +
  25 + })
  26 + // 表格数据对象
  27 + const addedObj = Vue.ref({});
  28 + let resTypeArr = Vue.ref([]);
  29 + let busTypeArr = Vue.ref([]);
  30 + let kpiTypeArr = Vue.ref([]);
  31 + // 搜索框内容
  32 + let addedTotal = Vue.ref(0);
  33 + // 表格数据对象
  34 + const noaddObj = Vue.ref({});
  35 +
  36 + let noaddTotal = Vue.ref(0);
  37 + // 计算减去左侧树的宽度
  38 + let max = (function () {
  39 + let right = window.innerWidth;
  40 + let treeWidth = (right / 24) * 4;
  41 + return right - treeWidth;
  42 + })();
  43 + let loadResList = () => {
  44 + // 查询参数
  45 + let params = {
  46 + page: pageInfo.page,
  47 + limit: pageInfo.limit,
  48 + // keyWords: pageInfo.keyWords,
  49 + resType: resTypeArr.value.join(','),
  50 + kpiType: kpiTypeArr.value.join(','),
  51 + bizType: busTypeArr.value.join(','),
  52 + configId: 1,
  53 + }
  54 + proxy.$http.get(`/api-web/ContrastAnalysis/added`, params, function (res) {
  55 + if (res && res.object) {
  56 + addedObj.value = res.data;
  57 + addedTotal.value = res.count;
  58 + }
  59 + });
  60 + proxy.$http.get(`/api-web/ContrastAnalysis/notAdded`, params, function (res) {
  61 + if (res && res.object) {
  62 + noaddObj.value = res.data;
  63 + noaddTotal.value = res.count;
  64 + }
  65 + });
  66 + }
  67 + // 点击按钮搜索
  68 + let onBtnSearch = () => {
  69 + pageInfo.page = 1;
  70 + loadResList();
  71 + }
  72 + let getResType = (arr) => {
  73 + console.log(arr);
  74 + var types = arr.map(function (v) {
  75 + return v.id;
  76 + });
  77 + resTypeArr.value = types;
  78 + loadResList();
  79 + }
  80 + let getKpiType = (arr) => {
  81 + console.log(arr);
  82 + var types = arr.map(function (v) {
  83 + return v.kpiId;
  84 + });
  85 + kpiTypeArr.value = types;
  86 + loadResList();
  87 + }
  88 + let getBizType = (arr) => {
  89 + console.log(arr);
  90 + var types = arr.map(function (v) {
  91 + return v.busId;
  92 + });
  93 + busTypeArr.value = types;
  94 + loadResList();
  95 + }
  96 + return {
  97 + loadResList,
  98 + getResType,
  99 + getKpiType,
  100 + onBtnSearch,
  101 + addedObj,
  102 + addedTotal,
  103 + noaddObj,
  104 + noaddTotal,
  105 + max
  106 + }
  107 +
  108 + }
  109 +}
@@ -114,8 +114,7 @@ const routes = [{ @@ -114,8 +114,7 @@ const routes = [{
114 { 114 {
115 path: '/analysis/add', 115 path: '/analysis/add',
116 name: 'analysisAdd', 116 name: 'analysisAdd',
117 - // component: () => myImport('views/analysis/components/addIndex/index')  
118 - component: () => myImport('views/analysis/components/add/index') 117 + component: () => myImport('components/page/analysis/add/index')
119 } 118 }
120 ]; 119 ];
121 120
1 -export default {  
2 - name: 'addIndex',  
3 - template: '',  
4 - components:{},  
5 - data () {  
6 - return {  
7 - tableData: [  
8 - {  
9 - date: '2016-05-03',  
10 - name: 'Tom',  
11 - address: 'No. 189, Grove St, Los Angeles',  
12 - },  
13 - {  
14 - date: '2016-05-02',  
15 - name: 'Tom',  
16 - address: 'No. 189, Grove St, Los Angeles',  
17 - },  
18 - {  
19 - date: '2016-05-04',  
20 - name: 'Tom',  
21 - address: 'No. 189, Grove St, Los Angeles',  
22 - },  
23 - {  
24 - date: '2016-05-01',  
25 - name: 'Tom',  
26 - address: 'No. 189, Grove St, Los Angeles',  
27 - },  
28 - ],  
29 -  
30 - }  
31 - },  
32 - computed: {  
33 - displayTime: {  
34 -  
35 - get() {  
36 - return (+new Date(this.display_time))  
37 - },  
38 - set(val) {  
39 - this.display_time = new Date(val)  
40 - }  
41 - }  
42 - },  
43 - setup(){  
44 -  
45 - }  
46 -}  
@@ -2,13 +2,12 @@ @@ -2,13 +2,12 @@
2 <div class="add-top-title" style=" padding: 20px 20px 20px 20px;font-size: 16px;color:#337ab7"> 2 <div class="add-top-title" style=" padding: 20px 20px 20px 20px;font-size: 16px;color:#337ab7">
3 比对分析场景 3 比对分析场景
4 </div> 4 </div>
5 - <div class="analysis drop"> 5 + <div class="analysis-drop">
6 <router-link :to="'/analysis/add'" class="analysis link-type"> 6 <router-link :to="'/analysis/add'" class="analysis link-type">
7 <div class="analysis-index-container" style="display: grid;"> 7 <div class="analysis-index-container" style="display: grid;">
8 - <img src="/vue3/src/assets/images/analysis/icon-add.png"></img>  
9 - <div class="el-upload__text">  
10 - <em>点击添加对比分析</em>  
11 - </div> 8 + <img src="/vue3/src/assets/images/analysis/icon-add.png" style="margin-left: 20px;"></img>
  9 + <span style="text-align: center;line-height: 50px;color: #0C4493">点击添加对比分析</span>
  10 +
12 </div> 11 </div>
13 </router-link> 12 </router-link>
14 13
@@ -57,13 +57,13 @@ export default { @@ -57,13 +57,13 @@ export default {
57 // this.chartInstance = this.$echarts.init(this.$refs.volume_ref, 'macarons') 57 // this.chartInstance = this.$echarts.init(this.$refs.volume_ref, 'macarons')
58 this.chartInstance = echarts.init(document.getElementById('volume_ref')) 58 this.chartInstance = echarts.init(document.getElementById('volume_ref'))
59 const initOption = { 59 const initOption = {
60 - legend: { 60 + /*legend: {
61 top: '20%', 61 top: '20%',
62 - left: 'center',  
63 textStyle: { 62 textStyle: {
64 color: '#ffffff' 63 color: '#ffffff'
65 } 64 }
66 - } 65 +
  66 + }*/
67 } 67 }
68 this.chartInstance.setOption(initOption) 68 this.chartInstance.setOption(initOption)
69 }, 69 },
@@ -128,8 +128,8 @@ export default { @@ -128,8 +128,8 @@ export default {
128 }, 128 },
129 updateChart () { 129 updateChart () {
130 const centerArr = [ 130 const centerArr = [
131 - ['22%', '65%'],  
132 - ['66%', '65%'] 131 + ['22%', '43%'],
  132 + ['66%', '43%']
133 ] 133 ]
134 134
135 135
@@ -162,7 +162,7 @@ export default { @@ -162,7 +162,7 @@ export default {
162 162
163 return { 163 return {
164 type: 'pie', 164 type: 'pie',
165 - radius: ['20%', '50%'], 165 + radius: ['28%', '42%'],
166 center: centerArr[index], 166 center: centerArr[index],
167 color:colorData, 167 color:colorData,
168 // minAngle: 15,//最小角度 168 // minAngle: 15,//最小角度
@@ -171,20 +171,80 @@ export default { @@ -171,20 +171,80 @@ export default {
171 borderRadius: 2, 171 borderRadius: 2,
172 borderWidth: 2 172 borderWidth: 2
173 }, 173 },
  174 + top:0,
174 left:0, 175 left:0,
175 right:0, 176 right:0,
176 label: { 177 label: {
177 // position: 'outer', 178 // position: 'outer',
178 // alignTo: 'labelLine', 179 // alignTo: 'labelLine',
  180 + show:false,
179 formatter: '{c}个', 181 formatter: '{c}个',
180 // padding:[10,-20,5,10], 182 // padding:[10,-20,5,10],
181 - position: 'inside', 183 + position: 'center',
182 color:'#ffffff' 184 color:'#ffffff'
183 }, 185 },
  186 + labelLine: {
  187 + show: false
  188 + },
184 data: dataArr 189 data: dataArr
185 } 190 }
186 }) 191 })
187 const dataOption = { 192 const dataOption = {
  193 + legend:[
  194 + {
  195 + left: '8%',
  196 + bottom:'5%',
  197 + itemHeight:12,
  198 + itemWidth:12,
  199 + itemGap:20,
  200 + icon:'circle',
  201 + orient: "vertical",
  202 + textStyle: {
  203 + color: '#ffffff',
  204 + fontSize:12,
  205 + },
  206 +
  207 + formatter:function(name){
  208 + let data=dataOption.series[0].data;
  209 + let tarValue=0;
  210 + data.map((item,index)=>{
  211 + if(item.name==name){
  212 + tarValue=item.value
  213 + }
  214 + })
  215 + let valStr=tarValue.toString()
  216 + let reg = valStr.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
  217 + let valData=valStr.replace(reg,"$1,");
  218 + return name+' '+' '+valData+' 个';
  219 + }
  220 + },
  221 + {
  222 + left: '53%',
  223 + bottom:'5%',
  224 + itemHeight:12,
  225 + itemWidth:12,
  226 + itemGap:20,
  227 + icon:'circle',
  228 + orient: "vertical",
  229 + textStyle: {
  230 + color: '#ffffff',
  231 + fontSize:12,
  232 + },
  233 + formatter:function(name){
  234 + let data=dataOption.series[0].data;
  235 + let tarValue=0;
  236 + data.map((item,index)=>{
  237 + if(item.name==name){
  238 + tarValue=item.value
  239 + }
  240 + })
  241 + let valStr=tarValue.toString()
  242 + let reg = valStr.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
  243 + let valData=valStr.replace(reg,"$1,");
  244 + return name+' '+' '+valData+' 个';
  245 + }
  246 + }
  247 + ],
188 tooltip: { 248 tooltip: {
189 trigger: 'item', 249 trigger: 'item',
190 backgroundColor:'rgba(50,50,50,0.7)', 250 backgroundColor:'rgba(50,50,50,0.7)',
@@ -240,14 +300,14 @@ export default { @@ -240,14 +300,14 @@ export default {
240 // } 300 // }
241 // } 301 // }
242 // }, 302 // },
243 - legend: { 303 + /*legend: {
244 itemWidth: this.titleFontSize * 1.5, 304 itemWidth: this.titleFontSize * 1.5,
245 itemHeight: this.titleFontSize / 4, 305 itemHeight: this.titleFontSize / 4,
246 itemGap: this.titleFontSize * 2.5, 306 itemGap: this.titleFontSize * 2.5,
247 textStyle: { 307 textStyle: {
248 fontSize: this.titleFontSize / 1.3 308 fontSize: this.titleFontSize / 1.3
249 } 309 }
250 - } 310 + }*/
251 } 311 }
252 this.chartInstance.setOption(adapterOption) 312 this.chartInstance.setOption(adapterOption)
253 this.chartInstance.resize() 313 this.chartInstance.resize()