monitor_v3 / anji-plus-report · Commits

Go to a project

Authored by ‘superliu’
Commit e36c76d5ee1f060c0c6b2339739591c1b75a85f2 1 parent 19895b89 master_AjReport_LH

aj-基本信息组件二

Inline Side-by-side
Showing 9 changed files with 1072 additions and 7 deletions
... ... @@ -2597,7 +2597,44 @@ export function getDetailTableData(param){
}
return tableData;
}
export function getBasicInformation(param){
let params=param;
let tableData={
"success": true,
"data":[
{
name:'vmware-80.12.89.77',
value : 'vmware-80.12.89.77',
code : 'vmware',
state:"1"
},
{
name:'IP地址',
value:'80.12.89.77',
code:'ipAddress',
state:"1"
},
{
name:'资源池',
value:'3',
code:'resPool',
state:"1"
},
{
name:'宿主机',
value:'2',
code:'host',
state:"1"
},
{
name:'虚拟机',
value:'10',
code:'vMachine',
state:"1"
}
]};
return tableData;
}
export function getDetailTableDataNoPage(){
let detailTaleData={
"code": 0,
... ...
... ... @@ -37,7 +37,6 @@
clearable
@change="changed($event, item.name)"
/>
<el-input
v-if="item.type == 'el-input-textarea'"
v-model.trim="formData[item.name]"
... ... @@ -151,6 +150,14 @@
:chart-type="item.chartType"
@change="changed($event, item.name)"
/>
<!-- 动态配置表格信息-->
<dynamicTableComponents
v-if="item.type == 'dycustTableComponents' && inputShow[item.name]"
v-model="formData[item.name]"
:chart-type="item.chartType"
:dict-key="item.dictKey"
@change="changed($event, item.name)"
/>
</div>
<div v-else-if="isShowForm(item, '[object Array]')" :key="'a-' + index">
<el-collapse accordion>
... ... @@ -284,6 +291,7 @@ import dynamicAddTable from "./dynamicAddTable.vue";
import customUpload from "./customUpload.vue";
import configureIndicators from "./configureIndicators.vue";
import dynamicTableComponents from "./dynamicTableComponents.vue";
export default {
name: "DynamicForm",
... ... @@ -294,7 +302,8 @@ export default {
customColorComponents,
dynamicAddTable,
customUpload,
configureIndicators
configureIndicators,
dynamicTableComponents
},
model: {
prop: "value",
... ...
<template>
<div>
<el-button
type="primary"
size="small"
plain
@click="handleAddClick"
>配置属性
</el-button>
<!-- <div style="width: 50%" >-->
<!-- <span>属性name <el-input v-model="attrName" /></span>-->
<!-- <span>属性key <el-input v-model="attrKey" /> </span>-->
<!-- </div>-->
<el-table :data="formatter" style="width: 100%">
<el-table-column prop="name" label="名称" width="60" />
<el-table-column prop="key" label="key值" width="70" />
<!-- <el-table-column prop="width" label="宽度" width="50" />-->
<el-table-column label="隐藏/显示" width="100">
<template slot-scope="scope">
<!-- <div class="button-group">-->
<!-- <el-button-->
<!-- @click="handleEditorClick(scope.$index, scope.row)"-->
<!-- type="text"-->
<!-- size="small"-->
<!-- >编辑</el-button>-->
<!-- </div>-->
<el-switch
active-color="#13ce66"
inactive-color="#ff4949"
v-model="scope.row.state"
:active-value="1"
:inactive-value="2"
@change="changeSwitch($event,scope.row,scope.$index)"
>
</el-switch>
</template>
</el-table-column>
</el-table>
<el-dialog
title="资源信息"
:visible.sync="dialogVisible"
width="40%"
:before-close="handleClose"
>
<div class="table-search">
<el-input width="120px" v-model="keyword" placeholder="请输入属性名称" clearable/>
<el-button @click="searchKpi" class="search-btn" type="primary">搜索</el-button>
</div>
<el-table :data="tableData" height="350" style="width: 100%" ref="multipleTableRef"
@selection-change="handleSelectionChange"
:row-key="(row) => { return row.kpiId }"
>
<el-table-column type="selection" width="55" :reserve-selection="true"/>
<el-table-column prop="name" label="属性名称" width="180"/>
<el-table-column prop="code" label="Key" width="180"/>
<el-table-column prop="value" label="值" width="180"/>
<el-table-column prop="state" label="隐藏/显示" width="180">
<template slot-scope="scope">
{{scope.row.state=="1"?"隐藏":"显示"}}
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<!-- <div style='text-align: left;background-color: white'>-->
<!-- <el-pagination-->
<!-- v-if="currentPage"-->
<!-- @size-change="handleSizeChange"-->
<!-- @prev-click="prePage"-->
<!-- @next-click="nextPage"-->
<!-- @current-change="handleCurrentChange"-->
<!-- :current-page="currentPage"-->
<!-- :page-sizes="pageSizes"-->
<!-- :page-size="pageSize"-->
<!-- :total="total">-->
<!-- </el-pagination>-->
<!-- </div>-->
<span slot="footer" class="dialog-footer">
<el-button size="mini" @click="dialogVisible = false">取 消</el-button>
<el-button size="mini" type="primary" @click="handleSaveClick"
>确 定</el-button
>
</span>
</el-dialog>
</div>
</template>
<script>
import {getBasicInformation} from "@/api/platform";
export default {
model: {
prop: "formatter",
event: "input",
},
props: {
formatter: Array
},
data() {
return {
formatter:[],
keyword: '',
layout: false,
dialogVisible: false,
rowFormData: {
name: "",
key: "",
width: "",
sort: false,
columnSort: 0,
componentName: 1
},
flag: true, // true 新增， false 编辑
indexEditor: -1, // 编辑第几个数据
tableData: [],
multipleSelection: [],
editDialogVisible: false,//编辑列
// componentNameData: [
// {
// label: '正常内容',
// value: 1
// },
// {
// label: '信息图标',
// value: 'textToImage'
// },
// {
// label: '级别背景',
// value: 'textToBg'
// }
// ],
//关联组件
attrName: "", //属性名称
attrKey: "" //属性key
};
},
computed:{
parentBasicTableData(){
return this.formData;
}
},
methods: {
//搜索资源信息
searchKpi() {
this.getKpi();
},
//获取资源信息列表
getKpi() {
let datas = getBasicInformation();
if (datas.success) {
this.tableData = datas.data;
}
},
//回显数据
setCheckedData() {
if (this.multipleSelection && this.multipleSelection.length > 0) {
this.tableData.map(item => {
this.multipleSelection.map(v => {
if (item.kpiId == v.kpiId) {
setTimeout(() => {
this.$refs.multipleTableRef.toggleRowSelection(item)
}, 300)
}
})
})
}
},
//多选操作
handleSelectionChange(val) {
this.multipleSelection = val
},
// 每页展示多少条
handleSizeChange(val) {
// 切换页码重置初始页
this.currentPage = 1
// console.log(`每页 ${val} 条`)
//props.pageSize = val;
this.pageSize = val;
this.getKpi();
},
// 切换页码
handleCurrentChange(val) {
// console.log(`当前页: ${val}`)
//props.currentPage = val;
this.currentPage = val;
this.getKpi();
},
// 切换页码
prePage(val) {
// console.log(`当前页: ${val}`)
// props.currentPage = val - 1;
this.currentPage = val - 1;
this.getKpi();
},
// 切换页码
nextPage(val) {
// console.log(`当前页: ${val}`)
// props.currentPage = val + 1;
this.currentPage = val + 1;
this.getKpi();
},
// 配置性能指标
handleAddClick() {
// this.rowFormData = {};
this.flag = true;
this.dialogVisible = true;
this.getKpi();
},
// 关闭
handleClose() {
this.dialogVisible = false;
},
// 保存
handleSaveClick() {
// if (this.flag) {
let that=this;
let arrName = "";
let arrKey = "";
let arr=[];
this.multipleSelection.map((item, index) => {
console.log(item);
arr.push({name:item.name,key:item.code,width:'50%',sort:false,columnSort:index,componentName:1})
// if (that.attrName&&that.attrKey) {
// arrName += "," + item.name;
// arrKey += "," + item.code;
// } else {
// arrName = item.name;
// arrKey = item.code;
// }
// that.attrName = arrName;
// that.attrKey = arrKey;
})
// that.formData=arr;
that.formatter=arr;
that.handleClose();
that.$emit("formatter", that.formatter);
// that.$emit("input", this.formData);
// that.$emit("change", this.formData);
},
//数组排序
compare(property) {
return function (a, b) {
let value1 = a[property];
let value2 = b[property];
return value1 - value2;
}
},
// 删除
handleDeleteClick(index, row) {
this.formData.splice(index, 1);
this.setTableChecked(row.key);
this.$emit("input", this.formData);
this.$emit("change", this.formData);
},
//设置表格选中状态
setTableChecked(kpiId) {
let indexId = '';
this.multipleSelection.map((item, index) => {
if (kpiId == item.kpiId) {
indexId = index;
}
})
this.multipleSelection.splice(indexId, 1);
this.tableData.map(item => {
if (item.kpiId == kpiId) {
setTimeout(() => {
this.$refs.multipleTableRef.toggleRowSelection(item)
}, 300)
}
})
},
changeSwitch(event,row,index){
this.$emit("formData", this.formatter);
}
}
};
</script>
<style lang="scss" scoped>
/deep/ ::-webkit-scrollbar-track-piece {
background-color: transparent;
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
width: 0; // 横向滚动条
height: 8px; // 纵向滚动条 必写
}
// 滚动条的滑块
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: rgba(144, 146, 152, 0.3);
}
/deep/ .el-table,
/deep/ .el-table__expanded-cell,
/deep/ .el-table th,
/deep/ .el-table tr {
background-color: transparent !important;
color: #859094 !important;
font-size: 12px !important;
}
/deep/ .el-table td,
/deep/ .el-table th.is-leaf {
border-bottom: none;
line-height: 26px;
}
/deep/ .el-table tbody tr:hover {
background-color: #263445 !important;
}
/deep/ .el-table tbody tr:hover > td {
background-color: #263445 !important;
}
/deep/ .el-table::before {
height: 0;
}
.button-group .el-button {
padding: 0;
}
.table-search {
display: flex;
align-items: center;
.search-btn {
margin-left: 10px;
}
}
.flex-start {
display: flex;
align-items: center;
justify-content: start;
}
.alt-text {
margin-left: 5px;
font-size: 12px;
color: #D81E06;
line-height: 12px;
}
</style>
... ...
/*
* 基本信息二json
* author LH
* 2022/02/24
* */
export const monitorBasicInformationTwo = {
code: 'monitor-basic-information-two',
type: 'html',
label: '基本信息(二)',
icon: 'iconbiaoge',
options: {
setup: [
{
type: 'el-input-text',
label: '图层名称',
name: 'layerName',
required: false,
placeholder: '',
value: '基本信息',
},
{
type: 'el-input-text',
label: '标题名称',
name: 'titleName',
required: false,
placeholder: '',
value: '基本信息',
},
{
type: 'el-input-number',
label: '显示数据数',
name: 'dataNum',
required: false,
placeholder: '',
value: '6'
},
/*{
type: 'el-switch',
label: '显示资源名称',
name: 'isName',
required: false,
placeholder: '',
value: true
},*/
{
type: 'custom-upload',
label: '背景图片',
name: 'imageAdressBg',
required: false,
placeholder: '',
value: '',
},
{
type: 'el-select',
label: '标题位置',
name: 'textAlign',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'left'
},
//logo配置
{
type: 'custom-upload',
label: '虚拟图片logo',
name: 'logoAdressBg',
required: false,
placeholder: '',
value: '',
},
{
type: 'el-input-number',
label: '字体大小',
name: 'fontSize',
required: false,
placeholder: '',
value: '14'
},
{
type: 'el-input-number',
label: '图片大小',
name: 'pictureSize',
required: false,
placeholder: '',
value: '140'
},
{
type: 'dycustTableComponents',
label: '',
name: 'dynamicAddTable',
required: false,
chartType:'detail-table',
placeholder: '',
value: [
// {name: '文件系统挂载', key: 'KPI7AC1664E', width: '50%',isStatic:true,columnSort:0,componentName:1},
// {name: '文件系统使用率', key: 'KPI449F5365', width: '50%',isStatic:true,columnSort:1,componentName:1},
// {name: '文件系统总大小', key: 'KPIA91F44E7', width: '50%',isStatic:true,columnSort:2,componentName:1},
// {name: '文件系统已使用大小', key: 'KPI98306224', width: '50%',isStatic:true,columnSort:3,componentName:1},
// {name: '卷名称', key: 'KPI77C28BBA', width: '50%',isStatic:true,columnSort:4,componentName:1},
]
},
],
data: [
{
type: 'el-radio-group',
label: '数据类型',
name: 'dataType',
require: false,
placeholder: '',
selectValue: true,
selectOptions: [
{
code: 'staticData',
name: '静态数据',
},
{
code: 'dynamicData',
name: '动态数据',
},
],
value: 'staticData',
},
{
type: 'el-input-number',
label: '刷新时间(毫秒)',
name: 'refreshTime',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
value: 30000
},
{
type: 'el-button',
label: '静态数据',
name: 'staticData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: [
{
name:'vmware-80.12.89.77',
value : 'vmware-80.12.89.77',
code : 'vmware',
state: "2"
},
{
name:'IP地址',
value:'80.12.89.77',
code:'ipAddress',
state: "2"
},
{
name:'资源池',
value:'3',
code:'resPool',
state: "2"
},
{
name:'宿主机',
value:'2',
code:'host',
state: "2"
},
{
name:'虚拟机',
value:'10',
code:'vMachine',
state: "2"
},
],
},
{
type: 'dycustComponents',
label: '',
name: 'dynamicData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
chartType: 'widget-table',
dictKey: 'TEXT_PROPERTIES', //表格的暂不起作用
value: '',
},
],
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '宽度',
name: 'width',
required: false,
placeholder: '该容器在1920px大屏中的宽度',
value: 416,
},
{
type: 'el-input-number',
label: '高度',
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 220,
},
],
}
}
... ...
... ... @@ -209,7 +209,7 @@ export const monitorBasicInformation = {
code:'days'
},
{
name:'密码过期剩余时间',
name:'时间',
value:'从不过期',
code:'time_remaining'
},
... ...
... ... @@ -41,6 +41,7 @@ import {monitorDetailTable} from "./echartsConfigJson/monitorConfigJson/monitor-
import {monitorBgBorder} from "./echartsConfigJson/monitorConfigJson/monitor-bg-border";
import {monitorGaugeRate} from "./echartsConfigJson/monitorConfigJson/monitor-gauge-rate";
import {monitorCustomLineChart} from "./echartsConfigJson/monitorConfigJson/monitor-custom-line-chart";
import {monitorBasicInformationTwo} from "./echartsConfigJson/monitorConfigJson/monitor-basic-information-two";
export const {widgetTool,monitor} = {
... ... @@ -80,6 +81,7 @@ export const {widgetTool,monitor} = {
monitorDetailTable,
monitorBgBorder,
monitorGaugeRate,
monitorCustomLineChart
monitorCustomLineChart,
monitorBasicInformationTwo
]
}
... ...
<template>
<div class="basicInformation-container" :style="styleObj" @click="closePressingDialog" @click.stop="visible = false">
<div class="title-div" :style="styleColor" v-if="hackReset">
<img v-if="!imgStyle.titleName" :src="imgStyle.imageAdress" :style="imgStyle" alt="">
<div v-if="imgStyle.titleName" class="title-name">
{{imgStyle.titleName}}
</div>
</div>
<div class="basic-ul">
<div class="basic-ul-left ">
<img :style="imgSizeStyle" :src="imgStyle.logoAdressBg"/>
</div>
<dynamicTableComponents :formData="dtInformationData"></dynamicTableComponents>
<div class="basic-ul-right" >
<div @mouseenter="mouseFun" @mouseleave="leaveFun">
<el-row :style="fontStyle">
<el-col aria-colspan="2">
<a class="link-type" :href="resUrl" target="_blank">{{informationData[0].name}}====={{$store.state.actions}}</a>
<i class="el-icon-info" v-if="visible" @click="resTopo"/>
</el-col>
</el-row>
</div>
<el-row class="basic-item" :style="fontStyle" v-for="(item,index) in informationData" :key="index">
<el-col v-if="index > 0 && item.state==2 " class="basic-border basic-item-title basic-flex" :span="10">
{{ item.name }}
<!-- <span class="basic-img" v-if="item.id=='KPIE13DD9A3'"></span>-->
</el-col>
<el-col v-if="index > 0 && item.state==2 " class="basic-border basic-item-content" :span="14"><span>{{ item.value }}</span>
</el-col>
</el-row>
</div>
</div>
<!-- 直接点击表格数据展示 -->
<customDialog :dialogVisible="topoVisible" :heightStyle="heightStyle" :marginStyle="marginStyle"
:widthStyle="widthStyle" :title-name="dialogName"
:showFooter="true" :showCancelBtn="true" :showOkBtn="true" @hideDialog="hideDialog" @okFunc="okFunc"
>
<template v-slot>
<div class="txtScroll-top">
<iframe :src="topoSrc" class="layadmin-iframe" style="height: 99.5%!important;width: 100%;"/>
</div>
</template>
</customDialog>
</div>
</template>
<script>
// import customMenuBox from "../../designerComponents/customMenuBox";//下探组件
import customDialog from "../../designerComponents/customDialog";
import dynamicTableComponents from "../../designerComponents/dynamicTableComponents";
export default {
name: "basicInformationTwo",
data() {
return {
options: {},
optionsSetUp: {},
optionsPosition: {},
optionsData: {},
informationData: [],
informationDataAll: [],
tableDate: [],
pressingVisible: false,
pressingVisibleTip: false,
visible: false,
hackReset: true,
tableDataValue: {kpiId: ''},
tableDataValueHead: {},
resType: '',
marginStyle: '',//弹框距离顶部距离
heightStyle: '',//弹框遮罩层高度
widthStyle: ';',//弹框宽度样式
topoSrc: '',
resUrl: 'http://www.baidu.com', //跳转详情页面
topoVisible: false, //资源topo弹框
dialogName: "" //弹框标题
}
},
components: {customDialog, dynamicTableComponents},//customMenuBox
props: {
value: Object,
ispreview: Boolean,
},
computed: {
transStyle() {
return this.objToOne(this.options);
},
styleObj() {
const allStyle = this.optionsPosition;
return {
position: this.ispreview ? "absolute" : "static",
width: allStyle.width + "px",
height: allStyle.height + "px",
left: allStyle.left + "px",
top: allStyle.top + "px",
'background-image': 'url(' + this.transStyle.imageAdressBg + ')',
// 'background-position':'center',
'background-repeat': 'no-repeat',
'background-size': 'contain'
};
},
styleColor() {
return {
"text-align": this.transStyle.textAlign,
};
},
fontStyle() {
return {
"font-size": this.transStyle.fontSize + "px",
}
},
imgStyle() {
return {
imageAdress: this.transStyle.imageAdress ? this.transStyle.imageAdress : require("../../../../../../assets/images/healthStatus/title-asset.png"),
titleName: this.transStyle.titleName,
isName: this.transStyle.isName,
dataNum: this.transStyle.dataNum ? this.transStyle.dataNum : '6',
probeDown: this.transStyle.probeDown,
logoAdressBg: this.transStyle.logoAdressBg ? this.transStyle.logoAdressBg : require("../../../../../../assets/images/healthStatus/title-asset.png"),
};
},
//图片大小
imgSizeStyle() {
return {
"width": this.transStyle.pictureSize + "px",
}
},
//表格下探列表
// calcDetailMenubox() {
// const menubox = this.transStyle;
// let detailMenuBox = [];
// if (menubox.alarm_setting) {
// detailMenuBox.push({
// name: '告警设置',
// type: 'alarm_setting'
// })
// }
// if (menubox.filter_sheet_indicator) {
// detailMenuBox.push({
// name: '过滤单指标',
// type: 'filter_sheet_indicator'
// })
// }
// if (menubox.filter_multiple_indicators) {
// detailMenuBox.push({
// name: '过滤多指标',
// type: 'filter_multiple_indicators'
// })
// }
// if (menubox.performance_trends) {
// detailMenuBox.push({
// name: '性能趋势',
// type: 'performance_trends'
// })
// }
// if (menubox.pressing_times) {
// detailMenuBox.push({
// name: '压制次数',
// type: 'pressing_times'
// })
// }
// if (menubox.include_capacity_forecast) {
// detailMenuBox.push({
// name: '纳入容量预测',
// type: 'include_capacity_forecast'
// })
// }
// return detailMenuBox;
// },
//动态显示基本信息指标
//动态表格数据渲染
dynamicDataRender() {
// var tableDate=[];
return {}
}
},
watch: {
value: {
handler(val) {
this.options = val;
this.optionsSetUp = val.setup;
this.optionsPosition = val.position;
this.optionsData = val.data;
this.handlerData();
//console.log("====formatter==========",this.formatter);
},
deep: true
}
},
mounted() {
// this.initImageUrl();
this.options = this.value;
this.optionsSetUp = this.value.setup;
this.optionsPosition = this.value.position;
this.optionsData = this.value.data;
this.handlerData();
},
methods: {
dtInformationData(formatter){
debugger
console.log("获取得动态数据：", formatter);
},
handlerData() {
const resData = this.optionsData;
resData.dataType == "staticData"
? this.handlerStaticData(resData.staticData)
: this.handlerDynamicData(resData.dynamicData, resData.refreshTime);
},
handlerStaticData(data) {
this.informationDataAll = data;
if (this.imgStyle.dataNum) {
this.informationData = this.informationDataAll.slice(0, this.imgStyle.dataNum);
}
},
handlerDynamicData(data, refreshTime) {
if (!data) return;
if (this.ispreview) {
this.getEchartData(data);
this.flagInter = setInterval(() => {
this.getEchartData(data);
}, refreshTime);
} else {
this.getEchartData(data);
}
},
getEchartData(val) {
const data = this.queryEchartsData(val);
data.then(res => {
if (res && res[0].code == 0)
this.informationDataAll = res[0].data;
if (this.informationDataAll && this.informationDataAll.length > 0) {
this.informationDataAll.map(item => {
if (typeof (item.value) != 'string') {
item.value = item.value[0].state
}
})
}
if (this.imgStyle.dataNum) {
this.informationData = this.informationDataAll.slice(0, this.imgStyle.dataNum);
}
this.hackResetFun();
});
},
// vue hack 之强制刷新组件
hackResetFun() {
this.hackReset = false;
this.$nextTick(() => {
this.hackReset = true;
});
},
pressingDialog() {
},
pressingTimes() {
this.pressingVisible = true;
},
closePressingDialog() {
this.pressingVisible = false;
this.pressingVisibleTip = false;
},
//鼠标悬浮事件
mouseFun() {
this.visible = true;
// $(".el-icon-info").attr("src","http://www.qq.com");
// $("#resTopo").on("click",function(index){
// alert("asasas");
// });
},
//鼠标悬浮离开事件
leaveFun() {
this.visible = false;
},
//
resTopo() {
this.topoSrc = "http://www.baidu.com";
this.topoVisible = true;
},
//弹框关闭确定
hideDialog() {
this.topoVisible = false;
},
okFunc() {
this.topoVisible = false;
}
},
}
</script>
<style scoped lang="scss">
.basicInformation-container {
/*border:1px solid #f6f6f6;
border-bottom: none;*/
}
.basic-flex {
display: flex;
align-items: center;
}
.title-div {
text-align: left;
padding: 8px 10px;
}
.basic-ul-left {
/*border: 0;*/
width: 100%;
height: 100%;
/*padding-left: 10px;*/
/*float: left;*/
display: flex;
/*flex-wrap: nowrap*/
}
.basic-ul-left img {
width: 140px;
height: 140px;
margin-bottom: 20px;
}
.basic-ul-right {
width: 100%;
height: 100%;
/*display: flex;*/
/*flex-wrap: nowrap*/
/*width: 50%;*/
/*height:50%;*/
/*float: left;*/
/*margin-left: 45%;*/
/*margin-bottom: 100px;*/
}
/**
资源名称不换行
*/
.link-type {
white-space: nowrap;
color: #0d82e9;
}
.title-name {
color: rgb(30, 159, 255);
font-size: 16px;
/*padding:10px;*/
font-weight: bold;
}
.basic-ul {
display: flex;
.basic-item:nth-child(even) {
background-color: #f8f8f8;
}
.basic-item {
border-top: 1px solid #f6f6f6;
}
.basic-item:last-child {
border-bottom: 1px solid #f6f6f6;
}
}
.basic-ul-all {
.basic-item:nth-child(even) {
background-color: #262323 !important;
}
}
.basic-item {
text-align: left;
font-size: 14px;
/* border-top:1px solid #f6f6f6;*/
}
.basic-border {
padding: 7px 10px;
border-left: 1px solid rgba(151, 151, 151, 0.13);
}
.basic-border:first-child {
border-left: 0;
}
.basic-img {
width: 16px;
height: 16px;
display: inline-block;
/*display: none;*/
cursor: pointer;
img {
width: 100%;
}
}
/*.basic-item-title:hover{
.basic-img{
display: inline-block;
}
}*/
.basic-ul-all {
.basic-item-content {
text-align: center;
}
}
.basic-pressing-times {
position: absolute;
border: 1px solid #d2d2d2;
padding: 16px 20px;
z-index: 1;
background: #ffffff;
color: #666666;
&:hover {
background: #0d82e9;
color: #f6f6f6;
}
}
.span-green {
color: #0BAC33;
}
</style>
... ...
... ... @@ -44,6 +44,7 @@ import monitorDetailTable from "./monitor/detailTable";
import monitorBgBorder from "./monitor/bgBorder";
import monitorGaugeRate from "./monitor/gaugeRate";
import monitorCustomLineChart from "./monitor/customLineChart";
import monitorBasicInformationTwo from "./monitor/basicInformationTwo";
export default {
name: "WidgetTemp",
... ... @@ -80,7 +81,8 @@ export default {
monitorDetailTable,
monitorBgBorder,
monitorGaugeRate,
monitorCustomLineChart
monitorCustomLineChart,
monitorBasicInformationTwo
},
model: {
prop: "value",
... ...
... ... @@ -55,6 +55,7 @@ import monitorDetailTable from "./monitor/detailTable";
import monitorBgBorder from "./monitor/bgBorder";
import monitorGaugeRate from "./monitor/gaugeRate";
import monitorCustomLineChart from "./monitor/customLineChart";
import monitorBasicInformationTwo from "./monitor/basicInformationTwo";
export default {
... ... @@ -91,7 +92,8 @@ export default {
monitorDetailTable,
monitorBgBorder,
monitorGaugeRate,
monitorCustomLineChart
monitorCustomLineChart,
monitorBasicInformationTwo
},
model: {
prop: "value",
... ...