monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit 05eb40a78a5a3b25123b88925355ec4e71c76604 2 parents 9b0c62a5 b23962cb

Merge branch 'master-yjp' into 'master' 

比对分析第二页开发



See merge request !73
Inline Side-by-side
Showing 13 changed files with 501 additions and 165 deletions
  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 -}  
@@ -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