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 473 additions and 137 deletions
<div>
<el-select @visible-change="selectClose" v-model="modelValueLabel" :filter-method="selectFilterMethod"
style="min-width: 120px;" :size="size" placeholder="所属系统" :filterable="isFilter" clearable
:collapse-tags="true" @change="selectChangeMethod">
<el-option :value="modelValue" style="height: auto;padding: 0;">
<el-tree ref="bizTree" :data="list" :check-on-click-node="true" :default-expand-all="isDefaultAll"
:expand-on-click-node="true" :filter-node-method="filterNode" :check-strictly="false"
:empty-text="emptyText" :show-checkbox="isMultiple" node-key="busId" :show-checkbox="checkbox"
@check-change="handleCheckChange" node-key="busId" :props="defaultProps">
</el-tree>
</el-option>
</el-select>
</div>
... ...
export default {
template: '',
name: 'biz-type-tree-input',
props: {
// echoObj 可以用于回显，它的值为需要回显的对象，多个时可以使用数组
echoObj: {},
// 是否开启搜索
isFilter: {
default: true
},
// 尺寸
size: {
default: ''
},
placeholderText: {
default: '所属业务'
},
isTag: {
default: true
},
isDefaultAll: {
default: true
},
// 点击节点是否展开
expandClickNode: {
default: false
},
// 字段key，用于取出数据中的名字
fieldName: {
default: 'title'
},
emptyText: {
default: '无匹配项'
},
// 字段key， 数据中的id
fieldId: {
default: ''
},
// 配置是否可多选
isMultiple: {
type: Boolean,
default: true
},
},
data() {
return {
defaultProps: {
children: 'children',
label: 'busTypeName'
},
list:[],
// 实际选中值
modelValue: [],
// 下拉框绑定值(选中值名字)
modelValueLabel: []
}
},
methods: {
selectClose(bool) {
if (bool) {
this.selectFilterMethod('')
}
},
selectFilterMethod(val) {
// 下拉框调用tree树筛选
this.$refs.kpiTree.filter(val)
},
selectChangeMethod(e) {
var arrNew = []
var dataLength = this.modelValue.length
var eLength = e.length
for (var i = 0; i < dataLength; i++) {
for (var j = 0; j < eLength; j++) {
if (e[j] === JSON.parse('this.modelValue[i].' + this.fieldName)) {
arrNew.push(this.modelValue[i])
}
}
}
// 设置勾选的值
this.$refs.kpiTree.setCheckedNodes(arrNew)
},
filterNode(value, data) {
if (!value) return true
return data[this.fieldName].indexOf(value) !== -1
},
handleCheckChange(data, checked, indeterminate) {
let that = this;
var selectArr = [];
selectArr.push(data);
// data[that.defaultProps.children].forEach(function (v) {
// selectArr.push(data);
// });
if (checked) {
// 已选中
that.modelValue = that.modelValue.concat(selectArr)
} else {
that.modelValue.forEach(function(v, i) {
selectArr.forEach(function(v1) {
if (v.busId == v1.busId) {
that.modelValue.splice(i, 1);
}
})
})
}
that.modelValueLabel = that.modelValue.map(function(v) {
return v[that.defaultProps.label];
});
that.$emit('callback', this.modelValue)
}
},
watch: {},
mounted() {
let that = this;
//加载资源列表
const { proxy } = Vue.getCurrentInstance()
// 加载列表
proxy.$http.get("/api-web/home/business/findAllBusType", {}, function(res) {
if (res && res.data) {
that.list = res.data;
console.log("getTree:",that.list);
}
})
},
created() {
}
}
... ...
<div>
<el-select @visible-change="selectClose" v-model="modelValueLabel" :filter-method="selectFilterMethod"
style="min-width: 120px;" :size="size" placeholder="指标类型" :filterable="isFilter" clearable
:collapse-tags="true" @change="selectChangeMethod">
<el-option :value="modelValue" style="height: auto;padding: 0;">
<el-tree ref="kpiTree" :data="list" :check-on-click-node="true" :default-expand-all="isDefaultAll"
:expand-on-click-node="true" :filter-node-method="filterNode" :check-strictly="false"
:empty-text="emptyText" :show-checkbox="isMultiple" node-key="kpiId" :show-checkbox="checkbox"
@check-change="handleCheckChange" node-key="kpiId" :props="defaultProps">
</el-tree>
</el-option>
</el-select>
</div>
... ...
export default {
template: '',
name: 'kpi-type-tree-input',
props: {
// echoObj 可以用于回显，它的值为需要回显的对象，多个时可以使用数组
echoObj: {},
// 是否开启搜索
isFilter: {
default: true
},
// 尺寸
size: {
default: ''
},
placeholderText: {
default: '指标类型'
},
isTag: {
default: true
},
isDefaultAll: {
default: true
},
// 点击节点是否展开
expandClickNode: {
default: false
},
// 字段key，用于取出数据中的名字
fieldName: {
default: 'title'
},
emptyText: {
default: '无匹配项'
},
// 字段key， 数据中的id
fieldId: {
default: ''
},
// 配置是否可多选
isMultiple: {
type: Boolean,
default: true
},
},
data() {
return {
defaultProps: {
children: 'children',
label: 'kpiName'
},
list:[],
// 实际选中值
modelValue: [],
// 下拉框绑定值(选中值名字)
modelValueLabel: []
}
},
methods: {
selectClose(bool) {
if (bool) {
this.selectFilterMethod('')
}
},
selectFilterMethod(val) {
// 下拉框调用tree树筛选
this.$refs.kpiTree.filter(val)
},
selectChangeMethod(e) {
var arrNew = []
var dataLength = this.modelValue.length
var eLength = e.length
for (var i = 0; i < dataLength; i++) {
for (var j = 0; j < eLength; j++) {
if (e[j] === JSON.parse('this.modelValue[i].' + this.fieldName)) {
arrNew.push(this.modelValue[i])
}
}
}
// 设置勾选的值
this.$refs.kpiTree.setCheckedNodes(arrNew)
},
filterNode(value, data) {
if (!value) return true
return data[this.fieldName].indexOf(value) !== -1
},
handleCheckChange(data, checked, indeterminate) {
let that = this;
var selectArr = [];
selectArr.push(data);
// data[that.defaultProps.children].forEach(function (v) {
// selectArr.push(data);
// });
if (checked) {
// 已选中
that.modelValue = that.modelValue.concat(selectArr)
} else {
that.modelValue.forEach(function(v, i) {
selectArr.forEach(function(v1) {
if (v.kpiId == v1.kpiId) {
that.modelValue.splice(i, 1);
}
})
})
}
that.modelValueLabel = that.modelValue.map(function(v) {
return v[that.defaultProps.label];
});
that.$emit('callback', this.modelValue)
}
},
watch: {},
mounted() {
let that = this;
//加载资源列表
const { proxy } = Vue.getCurrentInstance()
// 加载列表
proxy.$http.get("/api-web/manage/kpi/list", {}, function(res) {
if (res && res.data) {
that.list = res.data;
console.log("getTree:",that.list);
}
})
},
created() {
}
}
... ...
... ... @@ -24,19 +24,23 @@ Promise.all([
// 下拉列表资源树
.component('cm-res-type-tree-input', Vue.defineAsyncComponent(() => myImport('components/common/inputrestypetree/index')))
// 机房下拉
.component('cm-machine-room',Vue.defineAsyncComponent(() => myImport('components/common/machineroom/index')))
.component('cm-machine-room', Vue.defineAsyncComponent(() => myImport('components/common/machineroom/index')))
// 资源类型树
.component('cm-res-type-tree-view',Vue.defineAsyncComponent(() => myImport('components/common/restypetree/index')))
.component('cm-res-type-tree-view', Vue.defineAsyncComponent(() => myImport('components/common/restypetree/index')))
// 资源类型树
.component('cm-table-page',Vue.defineAsyncComponent(() => myImport('components/common/table-page/index')))
.component('cm-table-page', Vue.defineAsyncComponent(() => myImport('components/common/table-page/index')))
// 弹框
.component('cm-dialog',Vue.defineAsyncComponent(() => myImport('components/common/dialog/index')))
.component('cm-dialog', Vue.defineAsyncComponent(() => myImport('components/common/dialog/index')))
// 用户授权
.component('cm-userright',Vue.defineAsyncComponent(() => myImport('components/common/userright/index')))
.component('cm-userright', Vue.defineAsyncComponent(() => myImport('components/common/userright/index')))
// 上传组件
.component('cm-upload',Vue.defineAsyncComponent(() => myImport('components/common/upload/index')))
.component('cm-upload', Vue.defineAsyncComponent(() => myImport('components/common/upload/index')))
// 文档管理
.component('cm-document',Vue.defineAsyncComponent(() => myImport('components/common/document/index')));
.component('cm-document', Vue.defineAsyncComponent(() => myImport('components/common/document/index')))
//指标类型数
.component('cm-kpi-type-tree-input', Vue.defineAsyncComponent(() => myImport('components/common/inputkpitree/index')))
//所属系统
.component('cm-biz-type-tree-input', Vue.defineAsyncComponent(() => myImport('components/common/inputbiztypetree/index')));
// // 自定义指令
... ...
... ... @@ -55,14 +55,13 @@
.bottom-condition .el-input__inner,.bottom-condition .el-button{
border-color:#409eff;
}
.analysis {
position: relative;
text-align: center;
height:100%;
width: 100%;
/*max-width: 490px;*/
.analysis-bottom-button{
padding: 20px 30px 30px 45px;
display: flex;
flex-flow: column;
}
.analysis .drop {
.analysis-drop {
padding-top: 20px;
border: 2px dashed #0a93be;
width: 600px;
... ... @@ -75,15 +74,6 @@
color: #bbb;
position: relative;
}
.analysis .el-upload__text {
height: 50px;
line-height: 50px;
em {
color: #0C4493;
font-style: normal;
}
}
.analysis .link-type,
.analysis .link-type:focus {
color: #337ab7;
... ... @@ -92,4 +82,3 @@
}
\ No newline at end of file
... ...
... ... @@ -3,34 +3,38 @@
<div class="add-top">
<el-row>
<el-col :span="16" class="add-top-title">
<el-button type="primary">这里是场景名称</el-button>
<el-button type="primary">场景名称</el-button>
</el-col>
<el-col :span="8" class="add-top-select">
<el-dropdown>
<el-button type="primary">
时间范围<el-icon class="el-icon--right"><arrow-down /></el-icon>
时间范围
<el-icon class="el-icon--right">
<arrow-down/>
</el-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-date-picker v-model="displayTime" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="请选择时间" />
<el-dropdown-menu slot = "dropdown">
<el-date-picker v-model="displayTime" type="datetime" format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择时间"/>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-dropdown>
<el-dropdown @command="frequencycheck">
<el-button type="primary">
契合频率<el-icon class="el-icon--right"><arrow-down /></el-icon>
契合频率
<el-icon class="el-icon--right">
<arrow-down/>
</el-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
<el-dropdown-item>Action 5</el-dropdown-item>
<el-dropdown-item v-for="(item,index) in frequencyArr" v-text="item"
:command="item"></el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-button type="primary">保存按钮</el-button>
<el-button type="primary">保存</el-button>
</el-col>
</el-row>
<el-row>
... ... @@ -38,8 +42,6 @@
<div class="classLine">
<lineChart></lineChart>
</div>
</el-col>
</el-row>
</div>
... ... @@ -57,76 +59,66 @@
<el-row>
<el-col :span="24">
<el-dropdown>
<el-button >
电子税务局系统<el-icon class="el-icon--right"><arrow-down /></el-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu >
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
<el-dropdown-item>Action 5</el-dropdown-item>
</el-dropdown-menu>
</template>
<el-icon class="el-icon--right">
<arrow-down/>
</el-icon>
<cm-biz-type-tree-input multiple clearable collapseTags @callback="getBizType"/>
</el-dropdown>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-dropdown>
<el-button >
资源类型<el-icon class="el-icon--right"><arrow-down /></el-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
<el-dropdown-item>Action 5</el-dropdown-item>
</el-dropdown-menu>
</template>
<el-icon class="el-icon--right">
<arrow-down/>
</el-icon>
<cm-res-type-tree-input multiple clearable collapseTags @callback="getResType"/>
</el-dropdown>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-dropdown>
<el-button >
指标类型<el-icon class="el-icon--right"><arrow-down /></el-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
<el-dropdown-item>Action 5</el-dropdown-item>
</el-dropdown-menu>
</template>
<el-icon class="el-icon--right">
<arrow-down/>
</el-icon>
<cm-kpi-type-tree-input multiple clearable collapseTags @callback="getKpiType"/>
</el-dropdown>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-input v-model="input" placeholder="Please input" />
<el-input v-model="keyWords" placeholder="输入关键字" style="margin-top: 15px;width: 225px;"/>
</el-col>
</el-row>
<el-row>
<el-col span="6" class="analysis-bottom-button">
<el-button type="primary" @click="reset()">重置</el-button>
</el-col>
<el-col span="6" class ="analysis-bottom-button">
<el-button type="primary" @click="onBtnSearch()">查询</el-button>
</el-col>
</el-row>
</el-col>
<el-col :span="18">
<el-tabs type="border-card">
<el-tab-pane label="User">
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="date" label="Date" width="180" />
<el-table-column prop="name" label="Name" width="180" />
<el-table-column prop="address" label="Address" />
</el-table>
<el-tab-pane label="已添加">
<cm-table-page :columns="addedObj.columns" :dataList="addedObj.maps" @loaddata="getPage"
:showIndex="true"
:showBorder="true" :currentPage="currentPage" :total="addedTotal" :loading="false"
:showPage="true" :height="(height - 95)" :maxWidth="max">
</cm-table-page>
</el-tab-pane>
<el-tab-pane label="未添加">
<cm-table-page :columns="noaddObj.columns" :dataList="noaddObj.maps" @loaddata="getPage"
:showIndex="true"
:showBorder="true" :currentPage="currentPage" :total="noaddTotal" :loading="false"
:showPage="true" :height="(height - 95)" :maxWidth="max">
</cm-table-page>
</el-tab-pane>
<el-tab-pane label="Config">Config</el-tab-pane>
<el-tab-pane label="Role">Role</el-tab-pane>
<el-tab-pane label="Task">Task</el-tab-pane>
</el-tabs>
</el-col>
</el-row>
... ...
export default {
name: 'addIndex',
template: '',
components: {},
data() {
return {
props: {
label: 'label',
children: 'children'
}
}
},
created() {
this.loadResList()
},
setup() {
const {proxy} = Vue.getCurrentInstance();
// 分页信息
const pageInfo = Vue.reactive({
total: 0,
limit: 50,
page: 1,
keyWords: ''
})
// 表格数据对象
const addedObj = Vue.ref({});
let resTypeArr = Vue.ref([]);
let busTypeArr = Vue.ref([]);
let kpiTypeArr = Vue.ref([]);
// 搜索框内容
let addedTotal = Vue.ref(0);
// 表格数据对象
const noaddObj = Vue.ref({});
let noaddTotal = Vue.ref(0);
// 计算减去左侧树的宽度
let max = (function () {
let right = window.innerWidth;
let treeWidth = (right / 24) * 4;
return right - treeWidth;
})();
let loadResList = () => {
// 查询参数
let params = {
page: pageInfo.page,
limit: pageInfo.limit,
// keyWords: pageInfo.keyWords,
resType: resTypeArr.value.join(','),
kpiType: kpiTypeArr.value.join(','),
bizType: busTypeArr.value.join(','),
configId: 1,
}
proxy.$http.get(`/api-web/ContrastAnalysis/added`, params, function (res) {
if (res && res.object) {
addedObj.value = res.data;
addedTotal.value = res.count;
}
});
proxy.$http.get(`/api-web/ContrastAnalysis/notAdded`, params, function (res) {
if (res && res.object) {
noaddObj.value = res.data;
noaddTotal.value = res.count;
}
});
}
// 点击按钮搜索
let onBtnSearch = () => {
pageInfo.page = 1;
loadResList();
}
let getResType = (arr) => {
console.log(arr);
var types = arr.map(function (v) {
return v.id;
});
resTypeArr.value = types;
loadResList();
}
let getKpiType = (arr) => {
console.log(arr);
var types = arr.map(function (v) {
return v.kpiId;
});
kpiTypeArr.value = types;
loadResList();
}
let getBizType = (arr) => {
console.log(arr);
var types = arr.map(function (v) {
return v.busId;
});
busTypeArr.value = types;
loadResList();
}
return {
loadResList,
getResType,
getKpiType,
onBtnSearch,
addedObj,
addedTotal,
noaddObj,
noaddTotal,
max
}
}
}
\ No newline at end of file
... ...
... ... @@ -114,8 +114,7 @@ const routes = [{
{
path: '/analysis/add',
name: 'analysisAdd',
// component: () => myImport('views/analysis/components/addIndex/index')
component: () => myImport('views/analysis/components/add/index')
component: () => myImport('components/page/analysis/add/index')
}
];
... ...
export default {
name: 'addIndex',
template: '',
components:{},
data () {
return {
tableData: [
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
],
}
},
computed: {
displayTime: {
get() {
return (+new Date(this.display_time))
},
set(val) {
this.display_time = new Date(val)
}
}
},
setup(){
}
}
\ No newline at end of file
... ... @@ -2,13 +2,12 @@
<div class="add-top-title" style=" padding: 20px 20px 20px 20px;font-size: 16px;color:#337ab7">
比对分析场景
</div>
<div class="analysis drop">
<div class="analysis-drop">
<router-link :to="'/analysis/add'" class="analysis link-type">
<div class="analysis-index-container" style="display: grid;">
<img src="/vue3/src/assets/images/analysis/icon-add.png"></img>
<div class="el-upload__text">
<em>点击添加对比分析</em>
</div>
<img src="/vue3/src/assets/images/analysis/icon-add.png" style="margin-left: 20px;"></img>
<span style="text-align: center;line-height: 50px;color: #0C4493">点击添加对比分析</span>
</div>
</router-link>
... ...