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
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');
INSERT INTO sys_ddic (ddicId, ddicCode,ddicName,ddicDesc,ddicSort,ddicCategory,createTime )
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
// 获取编辑指标
getEditKpiList:function (){
var editFlag = localStorage.getItem("editFlag");//是否编辑状态
if(!(editFlag && editFlag == "true")){
editKpiList.push('----');
return editKpiList;
}
if(editKpiList.length != 0){
return editKpiList;
}
... ... @@ -51,6 +57,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
},
checkKpi : function (kpiId){
var data = {}
var kpiIds = kpiId.split(',');
$.each(kpiIds, function (i, v) {
data[v] = editKpiList.includes(v);
... ... @@ -218,7 +225,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
} else {
// 按照指标配置展示
let kpiObject = obj.checkKpi(kpiId)
if(kpiObject[data.id] && kpiObject[data.id] == true){
if(kpiObject[data.id] && kpiObject[data.id] == true && editFlag && editFlag == "true"){
pie.find(".pie-half-text").html(piechbox+"<b><u style='"+resStyle+"'>"+val + "%</u></b>");
form.render();
} else {
... ... @@ -1783,7 +1790,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
var kpiId = d[v.id].kpiId;
// 按照指标配置展示
let kpiObject = obj.checkKpi(kpiId)
if(kpiObject[kpiId] && kpiObject[kpiId] == true){
if(kpiObject[kpiId] && kpiObject[kpiId] == true && editFlag && editFlag == "true"){
return chbox + '<a class="link showlinechart_' + tableId + '" style="padding-left:5px;' + resStyle + '" ' + 'data-isWarning="' + value.isWarning + '" data-ident="' + value.kpiIdent + '"' +
'data-trend="' + value.isTrend + '" data-id="' + v.id + '" data-kpiname="' + kpiname + '" data-name="' + v.name + '" data-flag="' + value.flag + '">' + value.kpiValue + '</a>' +
'<a class="detail_row_menu hide" data-isWarning="' + value.isWarning + '" data-ident="' + value.kpiIdent + '" data-trend="' + value.isTrend + '" ' +
... ...
<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() {
}
}
... ...
const ver = window.__ver || '';
Promise.all([
import('./store/index.js' + ver),
import('./router/index.js' + ver),
import('./app.js' + ver),
import('./script/global.js' + ver),
import('./script/http.js' + ver),
import('./store/index.js' + ver),
import('./router/index.js' + ver),
import('./app.js' + ver),
import('./script/global.js' + ver),
import('./script/http.js' + ver),
]).then((res) => {
// 创建vue3的实例
const app = Vue.createApp(res[2].default)
.use(res[0].default) // 挂载vuex
.use(res[1].default) // 挂载路由
// 创建vue3的实例
const app = Vue.createApp(res[2].default)
.use(res[0].default) // 挂载vuex
.use(res[1].default) // 挂载路由
.use(ElementPlus, {
locale: ElementPlus.lang.zhCn
})
.use(ElementPlus) // 加载ElementPlus
.use(vant) // 加载vant
.use(vant.Lazyload) // 加载vant
.use(ElementPlus, {
locale: ElementPlus.lang.zhCn
})
.use(ElementPlus) // 加载ElementPlus
.use(vant) // 加载vant
.use(vant.Lazyload) // 加载vant
// 全局注册公共组件
// 下拉列表资源树
.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-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-dialog',Vue.defineAsyncComponent(() => myImport('components/common/dialog/index')))
// 用户授权
.component('cm-userright',Vue.defineAsyncComponent(() => myImport('components/common/userright/index')))
// 上传组件
.component('cm-upload',Vue.defineAsyncComponent(() => myImport('components/common/upload/index')))
// 文档管理
.component('cm-document',Vue.defineAsyncComponent(() => myImport('components/common/document/index')));
// 全局注册公共组件
// 下拉列表资源树
.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-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-dialog', Vue.defineAsyncComponent(() => myImport('components/common/dialog/index')))
// 用户授权
.component('cm-userright', Vue.defineAsyncComponent(() => myImport('components/common/userright/index')))
// 上传组件
.component('cm-upload', Vue.defineAsyncComponent(() => myImport('components/common/upload/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')));
// // 自定义指令
... ... @@ -57,7 +61,7 @@ Promise.all([
// }
// })
app.config.globalProperties.$global = res[3].default
app.config.globalProperties.$http = res[4].default
app.mount('#app'); // 挂载Vue的app实例
app.config.globalProperties.$global = res[3].default
app.config.globalProperties.$http = res[4].default
app.mount('#app'); // 挂载Vue的app实例
})
... ...
... ... @@ -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
... ...
... ... @@ -13,13 +13,13 @@
}
.busniess-circle-left {
position: absolute;
left: 19%;
top: 59%;
left: 18%;
top: 38%;
}
.busniess-circle-right {
position: absolute;
left: 63%;
top: 59%;
left: 62%;
top: 38%;
}
.busniess-circle-text {
text-align: center;
... ...
... ... @@ -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>
... ...
... ... @@ -57,13 +57,13 @@ export default {
// this.chartInstance = this.$echarts.init(this.$refs.volume_ref, 'macarons')
this.chartInstance = echarts.init(document.getElementById('volume_ref'))
const initOption = {
legend: {
/*legend: {
top: '20%',
left: 'center',
textStyle: {
color: '#ffffff'
}
}
}*/
}
this.chartInstance.setOption(initOption)
},
... ... @@ -128,8 +128,8 @@ export default {
},
updateChart () {
const centerArr = [
['22%', '65%'],
['66%', '65%']
['22%', '43%'],
['66%', '43%']
]
... ... @@ -162,7 +162,7 @@ export default {
return {
type: 'pie',
radius: ['20%', '50%'],
radius: ['28%', '42%'],
center: centerArr[index],
color:colorData,
// minAngle: 15,//最小角度
... ... @@ -171,20 +171,80 @@ export default {
borderRadius: 2,
borderWidth: 2
},
top:0,
left:0,
right:0,
label: {
// position: 'outer',
// alignTo: 'labelLine',
show:false,
formatter: '{c}个',
// padding:[10,-20,5,10],
position: 'inside',
position: 'center',
color:'#ffffff'
},
labelLine: {
show: false
},
data: dataArr
}
})
const dataOption = {
legend:[
{
left: '8%',
bottom:'5%',
itemHeight:12,
itemWidth:12,
itemGap:20,
icon:'circle',
orient: "vertical",
textStyle: {
color: '#ffffff',
fontSize:12,
},
formatter:function(name){
let data=dataOption.series[0].data;
let tarValue=0;
data.map((item,index)=>{
if(item.name==name){
tarValue=item.value
}
})
let valStr=tarValue.toString()
let reg = valStr.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
let valData=valStr.replace(reg,"$1,");
return name+' '+' '+valData+' 个';
}
},
{
left: '53%',
bottom:'5%',
itemHeight:12,
itemWidth:12,
itemGap:20,
icon:'circle',
orient: "vertical",
textStyle: {
color: '#ffffff',
fontSize:12,
},
formatter:function(name){
let data=dataOption.series[0].data;
let tarValue=0;
data.map((item,index)=>{
if(item.name==name){
tarValue=item.value
}
})
let valStr=tarValue.toString()
let reg = valStr.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
let valData=valStr.replace(reg,"$1,");
return name+' '+' '+valData+' 个';
}
}
],
tooltip: {
trigger: 'item',
backgroundColor:'rgba(50,50,50,0.7)',
... ... @@ -240,14 +300,14 @@ export default {
// }
// }
// },
legend: {
/*legend: {
itemWidth: this.titleFontSize * 1.5,
itemHeight: this.titleFontSize / 4,
itemGap: this.titleFontSize * 2.5,
textStyle: {
fontSize: this.titleFontSize / 1.3
}
}
}*/
}
this.chartInstance.setOption(adapterOption)
this.chartInstance.resize()
... ...