monitor_v3 / anji-plus-report · Commits

Go to a project

Authored by 鲁尚清
Commit f040df1148847a02d79713ff0424e0585dd176ac 1 parent 7abf2705

v-for语句增加key

Inline Side-by-side
Showing 9 changed files with 551 additions and 26 deletions
  1 +<template>
  2 + <div>
  3 + <!-- <el-button
  4 + type="primary"
  5 + size="small"
  6 + plain
  7 + @click="handleAddClick"
  8 + >配置表头</el-button
  9 + >-->
  10 + <span>信息表头设置</span>
  11 + <el-table :data="formDataNew" style="width: 100%">
  12 + <el-table-column prop="name" label="名称" width="60" />
  13 + <el-table-column prop="key" label="key值" width="70" />
  14 + <el-table-column prop="width" label="宽度" width="50" />
  15 + <el-table-column label="操作" width="100">
  16 + <template slot-scope="scope">
  17 + <div class="button-group">
  18 + <el-button
  19 + @click="handleEditorClick(scope.$index, scope.row)"
  20 + type="text"
  21 + size="small"
  22 + >编辑</el-button
  23 + >
  24 + </div>
  25 + </template>
  26 + </el-table-column>
  27 + </el-table>
  28 + <el-dialog
  29 + title="编辑列"
  30 + :visible.sync="editDialogVisible"
  31 + width="30%"
  32 + :before-close="handleClose"
  33 + >
  34 + <el-form :model="rowFormData" label-width="70px">
  35 + <el-form-item label="名称:">
  36 + <el-input
  37 + v-model.trim="rowFormData['name']"
  38 + placeholder="请输入名称"
  39 + size="mini"
  40 + disabled
  41 + >
  42 + </el-input>
  43 + </el-form-item>
  44 + <el-form-item label="key值:">
  45 + <el-input
  46 + v-model.trim="rowFormData['key']"
  47 + placeholder="请输入key值"
  48 + size="mini"
  49 + disabled
  50 + >
  51 + </el-input>
  52 + </el-form-item>
  53 + <el-form-item label="宽度:">
  54 + <el-input
  55 + v-model.trim="rowFormData['width']"
  56 + placeholder="请输入宽度"
  57 + size="mini"
  58 + >
  59 + </el-input>
  60 + </el-form-item>
  61 + <el-form-item label="排序:">
  62 + <el-switch size="mini" v-model.trim="rowFormData['sort']" />
  63 + </el-form-item>
  64 +
  65 + <el-form-item label="列排序:">
  66 + <el-input-number
  67 + v-model.trim="rowFormData['columnSort']"
  68 + :min="0"
  69 + :max="50"
  70 + size="small"
  71 + controls-position="right"
  72 + />
  73 + </el-form-item>
  74 + <el-form-item label="关联组件:">
  75 + <div class="flex-start">
  76 + <el-select v-model.trim="rowFormData['componentName']" size="small">
  77 + <el-option
  78 + v-for="item in componentNameData"
  79 + :key="item.value"
  80 + :label="item.label"
  81 + :value="item.value"
  82 + >
  83 + </el-option>
  84 + </el-select>
  85 + <div class="alt-text">
  86 + <span v-if="rowFormData['componentName']=='1'">显示正常内容</span>
  87 + <span v-if="rowFormData['componentName']=='textToImage'">值为'message',显示为信息图标，值为'',显示微信图标</span>
  88 + <span v-if="rowFormData['componentName']=='textToBg'">值为'1',显示为一般，值为'2'，显示为重要，值为'3'，显示为严重</span>
  89 + </div>
  90 + </div>
  91 +
  92 + </el-form-item>
  93 + </el-form>
  94 + <span slot="footer" class="dialog-footer">
  95 + <el-button size="mini" @click="editDialogVisible = false">取 消</el-button>
  96 + <el-button size="mini" type="primary" @click="handleSaveClick"
  97 + >确 定</el-button
  98 + >
  99 + </span>
  100 + </el-dialog>
  101 + <el-dialog
  102 + title="表头数据"
  103 + :visible.sync="dialogVisible"
  104 + width="60%"
  105 + :before-close="handleClose"
  106 + >
  107 +
  108 + <span slot="footer" class="dialog-footer">
  109 + <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
  110 +
  111 + <el-button size="mini" type="primary" @click="handleSaveClick"
  112 + >确 定</el-button
  113 + >
  114 + </span>
  115 + </el-dialog>
  116 + </div>
  117 +</template>
  118 +<script>
  119 +import {getKpiPage,getDetailTableData} from "@/api/platform";
  120 +import {formatDate} from "../../../../../filter";
  121 +import {mapGetters} from "vuex";
  122 +export default {
  123 + model: {
  124 + prop: "formData",
  125 + event: "input"
  126 + },
  127 + props: {
  128 + formData: Array
  129 + },
  130 + watch:{
  131 + tableHeads:{
  132 + handler(val){
  133 + this.setFormData();
  134 + },
  135 + deep:true
  136 + }
  137 + },
  138 + data() {
  139 + return {
  140 + primaryTypeFlg:false,//默认为追加
  141 + primaryType1:'default',
  142 + primaryType0:'primary',
  143 + keyword:'',
  144 + currentPage:1,
  145 + pageSize:10,
  146 + pageSizes:[10,50,100, 200, 300, 400],
  147 + total:0,
  148 + layout:false,
  149 + dialogVisible: false,
  150 + rowFormData: {
  151 + name: "",
  152 + key: "",
  153 + width: "",
  154 + sort:false,
  155 + columnSort:0,
  156 + componentName:1
  157 + },
  158 + flag: true, // true 新增， false 编辑
  159 + indexEditor: -1, // 编辑第几个数据
  160 + tableData: [],
  161 + multipleSelection:[],
  162 + editDialogVisible:false,//编辑列
  163 + componentNameData:[
  164 + {
  165 + label:'正常内容',
  166 + value:1
  167 + },
  168 + {
  169 + label:'信息图标',
  170 + value:'textToImage'
  171 + },
  172 + {
  173 + label: '级别背景',
  174 + value:'textToBg'
  175 + }
  176 + ],//关联组件
  177 + formDataNew:this.formData,//表头数据
  178 + };
  179 + },
  180 + computed:{
  181 + ...mapGetters(['tableHeads']),
  182 + //获取url地址中的token
  183 + getUrlToken(){
  184 + let locationUrl=this.$route.query;
  185 + let resId=locationUrl.resId;
  186 + let token=locationUrl.access_token;
  187 + let urlObj={
  188 + resId:resId,
  189 + token:token
  190 + }
  191 + return urlObj;
  192 + }
  193 + },
  194 + created() {
  195 + this.setFormData();
  196 + },
  197 + methods: {
  198 + setFormData(){
  199 + if(this.tableHeads){
  200 + this.formDataNew=this.tableHeads;
  201 + }
  202 + },
  203 + //搜索指标
  204 + searchKpi(){
  205 + this.getKpi();
  206 + },
  207 + //获取性能指标列表
  208 + async getKpi(){
  209 + let params={
  210 + page:this.currentPage,
  211 + limit:this.pageSize,
  212 + kpiName:this.keyword,
  213 + }
  214 + const { success,data,count } = await getKpiPage(params,this.getUrlToken);
  215 + this.total=count;
  216 + if(success){
  217 + this.tableData=data;
  218 + }
  219 + },
  220 + //多选操作
  221 + handleSelectionChange(val) {
  222 + this.multipleSelection = val
  223 + },
  224 + // 每页展示多少条
  225 + handleSizeChange(val){
  226 + // 切换页码重置初始页
  227 + this.currentPage = 1
  228 + // console.log(`每页 ${val} 条`)
  229 + //props.pageSize = val;
  230 + this.pageSize = val;
  231 + this.getKpi();
  232 + },
  233 +
  234 + // 切换页码
  235 + handleCurrentChange(val){
  236 + // console.log(`当前页: ${val}`)
  237 + //props.currentPage = val;
  238 + this.currentPage = val;
  239 + this.getKpi();
  240 + },
  241 + // 切换页码
  242 + prePage(val) {
  243 + // console.log(`当前页: ${val}`)
  244 + // props.currentPage = val - 1;
  245 + this.currentPage = val-1;
  246 + this.getKpi();
  247 + },
  248 +
  249 + // 切换页码
  250 + nextPage(val){
  251 + // console.log(`当前页: ${val}`)
  252 + // props.currentPage = val + 1;
  253 + this.currentPage = val+1;
  254 + this.getKpi();
  255 + },
  256 + // 配置性能指标
  257 + handleAddClick() {
  258 + this.rowFormData = {};
  259 + this.flag = true;
  260 + this.dialogVisible = true;
  261 + this.getKpi();
  262 +
  263 + },
  264 + // 编辑
  265 + handleEditorClick(index, row) {
  266 + this.flag = false;
  267 + this.rowFormData = this.deepClone(row);
  268 + this.indexEditor = index;
  269 + this.editDialogVisible = true;
  270 + },
  271 + // 关闭
  272 + handleClose() {
  273 + this.dialogVisible = false;
  274 + },
  275 + // 保存
  276 + handleSaveClick() {
  277 + if (this.flag) {
  278 + // 新增
  279 + let arr=[];
  280 + if(this.primaryTypeFlg){
  281 + //追加
  282 + let arr1=[];
  283 + this.multipleSelection.map((item,index)=>{
  284 + arr1.push({name:item.kpiName,key:item.kpiId,width:'50%',sort:false,columnSort:index,componentName:1})
  285 + })
  286 + arr=this.formDataNew.concat(arr1);
  287 + }else{
  288 + //重新选择
  289 + this.multipleSelection.map((item,index)=>{
  290 + arr.push({name:item.kpiName,key:item.kpiId,width:'50%',sort:false,columnSort:index,componentName:1})
  291 + })
  292 + }
  293 +
  294 + this.formDataNew=arr;
  295 + this.formDataNew.sort(this.compare('columnSort'));
  296 + this.dialogVisible = false;
  297 + } else {
  298 + // 编辑
  299 + this.formDataNew[this.indexEditor] = this.rowFormData;
  300 + this.$set(this.formDataNew, this.indexEditor, this.rowFormData);
  301 + this.formDataNew.sort(this.compare('columnSort'));
  302 + this.editDialogVisible = false;
  303 + }
  304 + console.log("AVX", this.formDataNew)
  305 + this.$emit("input", this.formDataNew);
  306 + this.$emit("change", this.formDataNew);
  307 + },
  308 + //数组排序
  309 + compare(property){
  310 + return function(a,b){
  311 + let value1 = a[property];
  312 + let value2 = b[property];
  313 + return value1 - value2;
  314 + }
  315 + },
  316 + // 删除
  317 + handleDeleteClick(index,row) {
  318 + this.formDataNew.splice(index, 1);
  319 + this.setTableChecked(row.key);
  320 + this.$emit("input", this.formDataNew);
  321 + this.$emit("change", this.formDataNew);
  322 + },
  323 + //设置表格选中状态
  324 + setTableChecked(kpiId){
  325 + let indexId='';
  326 + this.multipleSelection.map((item,index)=>{
  327 + if(kpiId==item.kpiId){
  328 + indexId=index;
  329 + }
  330 + })
  331 + this.multipleSelection.splice(indexId, 1);
  332 +
  333 + this.tableData.map(item=>{
  334 + if(item.kpiId==kpiId){
  335 + setTimeout(()=>{
  336 + this.$refs.multipleTableRef.toggleRowSelection(item)
  337 + },300)
  338 + }
  339 + })
  340 + },
  341 + //重新配置表头或者追加表头
  342 + selectKpi(flg){
  343 + this.primaryTypeFlg=flg;
  344 + if(flg){
  345 + //追加
  346 + this.primaryType1='primary';
  347 + this.primaryType0='default';
  348 + }else{
  349 + //重新选择
  350 + this.primaryType0='primary';
  351 + this.primaryType1='default';
  352 + }
  353 + }
  354 + }
  355 +};
  356 +</script>
  357 +<style lang="scss" scoped>
  358 +/deep/::-webkit-scrollbar-track-piece {
  359 + background-color: transparent;
  360 +}
  361 +/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  362 + width: 0; // 横向滚动条
  363 + height: 8px; // 纵向滚动条 必写
  364 +}
  365 +// 滚动条的滑块
  366 +/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  367 + border-radius: 5px;
  368 + background-color: rgba(144, 146, 152, 0.3);
  369 +}
  370 +/deep/.el-table,
  371 +/deep/.el-table__expanded-cell,
  372 +/deep/.el-table th,
  373 +/deep/.el-table tr {
  374 + background-color: transparent !important;
  375 + color: #859094 !important;
  376 + font-size: 12px !important;
  377 +}
  378 +/deep/.el-table td,
  379 +/deep/.el-table th.is-leaf {
  380 + border-bottom: none;
  381 + line-height: 26px;
  382 +}
  383 +/deep/.el-table tbody tr:hover {
  384 + background-color: #263445 !important;
  385 +}
  386 +/deep/.el-table tbody tr:hover > td {
  387 + background-color: #263445 !important;
  388 +}
  389 +/deep/.el-table::before {
  390 + height: 0;
  391 +}
  392 +.button-group .el-button {
  393 + padding: 0;
  394 +}
  395 +.table-search{
  396 + display: flex;
  397 + align-items: center;
  398 + .search-btn{
  399 + margin-left: 10px;
  400 +
  401 + }
  402 +}
  403 +.flex-start{
  404 + display: flex;
  405 + align-items: center;
  406 + justify-content: start;
  407 +}
  408 +.alt-text{
  409 + margin-left:5px;
  410 + font-size: 12px;
  411 + color:#D81E06;
  412 + line-height: 12px;
  413 +}
  414 +.table-btn{
  415 + margin-top:10px;
  416 +}
  417 +</style>
@@ -145,6 +145,12 @@ @@ -145,6 +145,12 @@
145 :chart-type="item.chartType" 145 :chart-type="item.chartType"
146 @change="changed($event, item.name)" 146 @change="changed($event, item.name)"
147 /> 147 />
  148 + <configureIndicatorsInformation
  149 + v-if="item.type == 'dynamic-detail-table-information' && inputShow[item.name]"
  150 + v-model="formData[item.name]"
  151 + :chart-type="item.chartType"
  152 + @change="changed($event, item.name)"
  153 + />
148 <dynamic-add-table 154 <dynamic-add-table
149 v-if="item.type == 'dynamic-add-table' && inputShow[item.name]" 155 v-if="item.type == 'dynamic-add-table' && inputShow[item.name]"
150 v-model="formData[item.name]" 156 v-model="formData[item.name]"
@@ -284,6 +290,7 @@ import dynamicAddTable from "./dynamicAddTable.vue"; @@ -284,6 +290,7 @@ import dynamicAddTable from "./dynamicAddTable.vue";
284 import customUpload from "./customUpload.vue"; 290 import customUpload from "./customUpload.vue";
285 291
286 import configureIndicators from "./configureIndicators.vue"; 292 import configureIndicators from "./configureIndicators.vue";
  293 +import configureIndicatorsInformation from "./configureIndicatorsInformation.vue";
287 294
288 export default { 295 export default {
289 name: "DynamicForm", 296 name: "DynamicForm",
@@ -294,7 +301,8 @@ export default { @@ -294,7 +301,8 @@ export default {
294 customColorComponents, 301 customColorComponents,
295 dynamicAddTable, 302 dynamicAddTable,
296 customUpload, 303 customUpload,
297 - configureIndicators 304 + configureIndicators,
  305 + configureIndicatorsInformation
298 }, 306 },
299 model: { 307 model: {
300 prop: "value", 308 prop: "value",
@@ -62,7 +62,7 @@ export const monitorBasicInformationTwo = { @@ -62,7 +62,7 @@ export const monitorBasicInformationTwo = {
62 name: 'logoAdressBg', 62 name: 'logoAdressBg',
63 required: false, 63 required: false,
64 placeholder: '', 64 placeholder: '',
65 - value: '' 65 + value: require("../../../../../../../assets/images/monitor/capacityAnalysis/aliyun.png")
66 }, 66 },
67 { 67 {
68 type: 'el-input-number', 68 type: 'el-input-number',
@@ -94,8 +94,78 @@ export const monitorBasicInformationTwo = { @@ -94,8 +94,78 @@ export const monitorBasicInformationTwo = {
94 name: 'pictureSize', 94 name: 'pictureSize',
95 required: false, 95 required: false,
96 placeholder: '', 96 placeholder: '',
97 - value: '140' 97 + value: '123'
98 }, 98 },
  99 + [
  100 + {
  101 + name: "表头设置",
  102 + list: [
  103 + {
  104 + type: 'el-input-number',
  105 + label: '字体大小',
  106 + name: 'headFontSize',
  107 + required: false,
  108 + placeholder: '',
  109 + value: '14'
  110 + },
  111 + {
  112 + type: 'vue-color',
  113 + label: '字体颜色',
  114 + name: 'headFontColor',
  115 + required: false,
  116 + placeholder: '',
  117 + value: '#666'
  118 + },
  119 + {
  120 + type: 'el-select',
  121 + label: '表头位置',
  122 + name: 'headTextAlign',
  123 + required: false,
  124 + placeholder: '',
  125 + selectOptions: [
  126 + {code: 'center', name: '居中'},
  127 + {code: 'left', name: '左对齐'},
  128 + {code: 'right', name: '右对齐'},
  129 + ],
  130 + value: 'center'
  131 + },
  132 + ]
  133 + },
  134 + {
  135 + name: "表体设置",
  136 + list: [
  137 + {
  138 + type: 'el-input-number',
  139 + label: '字体大小',
  140 + name: 'bodyFontSize',
  141 + required: false,
  142 + placeholder: '',
  143 + value: '14'
  144 + },
  145 + {
  146 + type: 'vue-color',
  147 + label: '字体颜色',
  148 + name: 'bodyFontColor',
  149 + required: false,
  150 + placeholder: '',
  151 + value: '#666'
  152 + },
  153 + {
  154 + type: 'el-select',
  155 + label: '表头位置',
  156 + name: 'bodyTextAlign',
  157 + required: false,
  158 + placeholder: '',
  159 + selectOptions: [
  160 + {code: 'center', name: '居中'},
  161 + {code: 'left', name: '左对齐'},
  162 + {code: 'right', name: '右对齐'},
  163 + ],
  164 + value: 'center'
  165 + },
  166 + ]
  167 + },
  168 + ],
99 { 169 {
100 type: 'el-input-text', 170 type: 'el-input-text',
101 label: '属性key', 171 label: '属性key',
@@ -104,6 +174,20 @@ export const monitorBasicInformationTwo = { @@ -104,6 +174,20 @@ export const monitorBasicInformationTwo = {
104 placeholder: '请输入Key值，以逗号分割', 174 placeholder: '请输入Key值，以逗号分割',
105 value: 'vmware,ipAddress,resPool,host,vMachine' 175 value: 'vmware,ipAddress,resPool,host,vMachine'
106 }, 176 },
  177 + {
  178 + type: 'dynamic-detail-table-information',
  179 + label: '',
  180 + name: 'dynamicAddTable',
  181 + required: false,
  182 + chartType:'detail-table',
  183 + placeholder: '',
  184 + value: [
  185 + {name: 'IP地址', key: 'ipAddress', width: '50%'},
  186 + {name: '资源池', key: 'resPool', width: '50%'},
  187 + {name: '宿主机', key: 'host', width: '50%'},
  188 + {name: '虚拟机', key: 'vMachine', width: '50%'},
  189 + ]
  190 + }
107 ], 191 ],
108 data: [ 192 data: [
109 { 193 {
@@ -14,17 +14,19 @@ @@ -14,17 +14,19 @@
14 <div class="basic-ul-right" > 14 <div class="basic-ul-right" >
15 <div @mouseenter="mouseFun" @mouseleave="leaveFun"> 15 <div @mouseenter="mouseFun" @mouseleave="leaveFun">
16 <el-row class="backColor" :style="fontStyle"> 16 <el-row class="backColor" :style="fontStyle">
17 - <el-col aria-colspan="2"> 17 + <el-col class="padding-10" aria-colspan="2">
18 <a class="link-type" :href="jkAddress.jkUrl" target="_blank">{{informationData[0].name}}</a> 18 <a class="link-type" :href="jkAddress.jkUrl" target="_blank">{{informationData[0].name}}</a>
19 <i class="el-icon-info" v-if="visible" @click="resTopo"/> 19 <i class="el-icon-info" v-if="visible" @click="resTopo"/>
20 </el-col> 20 </el-col>
21 </el-row> 21 </el-row>
22 </div> 22 </div>
23 <el-row class="basic-item" :style="fontStyle" v-for="(item,index) in informationData" :key="index"> 23 <el-row class="basic-item" :style="fontStyle" v-for="(item,index) in informationData" :key="index">
24 - <el-col v-if="attrKey.attrKeyVal.indexOf(item.code)>0 && index>0" class="basic-border basic-item-title basic-flex backColor" :span="10"> 24 +<!-- <el-col :style="headStyle" v-if="attrKey.attrKeyVal.indexOf(item.code)>0 && index>0" class="basic-border basic-item-title basic-flex backColor" :span="10">-->
  25 + <el-col :style="headStyle" v-if="index>0" class="basic-border basic-item-title basic-flex backColor" :span="10">
25 {{ item.name }} 26 {{ item.name }}
26 </el-col> 27 </el-col>
27 - <el-col v-if="attrKey.attrKeyVal.indexOf(item.code)>0 && index>0 " class="basic-border basic-item-content" :span="14"><span>{{ item.value }}</span> 28 +<!-- <el-col :style="bodyStyle" v-if="attrKey.attrKeyVal.indexOf(item.code)>0 && index>0 " class="basic-border basic-flex basic-item-content" :span="14"><span>{{ item.value }}</span>-->
  29 + <el-col :style="bodyStyle" v-if="index>0 " class="basic-border basic-flex basic-item-content" :span="14"><span>{{ item.value }}</span>
28 </el-col> 30 </el-col>
29 <!-- && attrKey.attrKeyVal.includes(item.code)--> 31 <!-- && attrKey.attrKeyVal.includes(item.code)-->
30 </el-row> 32 </el-row>
@@ -58,7 +60,7 @@ @@ -58,7 +60,7 @@
58 optionsSetUp: {}, 60 optionsSetUp: {},
59 optionsPosition: {}, 61 optionsPosition: {},
60 optionsData: {}, 62 optionsData: {},
61 - informationData: [], 63 + informationData: [{name:'',code:''}],
62 informationDataAll: [], 64 informationDataAll: [],
63 tableDate: [], 65 tableDate: [],
64 pressingVisible: false, 66 pressingVisible: false,
@@ -100,6 +102,22 @@ @@ -100,6 +102,22 @@
100 'background-size': 'contain' 102 'background-size': 'contain'
101 }; 103 };
102 }, 104 },
  105 + //表头设置
  106 + headStyle(){
  107 + return{
  108 + 'font-size':this.transStyle.headFontSize,
  109 + color:this.transStyle.headFontColor,
  110 + 'justify-content':this.transStyle.headTextAlign=='left'?'start':this.transStyle.headTextAlign=='center'?'center':'flex-end',
  111 + }
  112 + },
  113 + //表体设置
  114 + bodyStyle(){
  115 + return{
  116 + 'font-size':this.transStyle.bodyFontSize,
  117 + color:this.transStyle.bodyFontColor,
  118 + 'justify-content':this.transStyle.bodyTextAlign=='left'?'start':this.transStyle.bodyTextAlign=='center'?'center':'flex-end',
  119 + }
  120 + },
103 121
104 styleColor() { 122 styleColor() {
105 return { 123 return {
@@ -119,7 +137,7 @@ @@ -119,7 +137,7 @@
119 isName: this.transStyle.isName, 137 isName: this.transStyle.isName,
120 dataNum: this.transStyle.dataNum ? this.transStyle.dataNum : '6', 138 dataNum: this.transStyle.dataNum ? this.transStyle.dataNum : '6',
121 probeDown: this.transStyle.probeDown, 139 probeDown: this.transStyle.probeDown,
122 - logoAdressBg: this.transStyle.logoAdressBg ? this.transStyle.logoAdressBg : require("../../../../../../assets/images/healthStatus/title-asset.png"), 140 + logoAdressBg: this.transStyle.logoAdressBg,
123 }; 141 };
124 }, 142 },
125 //动态基础表格信息 143 //动态基础表格信息
@@ -267,6 +285,7 @@ @@ -267,6 +285,7 @@
267 .basic-flex { 285 .basic-flex {
268 display: flex; 286 display: flex;
269 align-items: center; 287 align-items: center;
  288 + justify-content: center;
270 } 289 }
271 290
272 .title-div { 291 .title-div {
@@ -287,21 +306,14 @@ @@ -287,21 +306,14 @@
287 } 306 }
288 307
289 .basic-ul-left img { 308 .basic-ul-left img {
290 - width: 140px;  
291 - height: 140px;  
292 - margin-bottom: 20px; 309 + //width: 140px;
  310 + //height: 140px;
  311 + //margin-bottom: 20px;
293 } 312 }
294 313
295 .basic-ul-right { 314 .basic-ul-right {
296 - width: 100%; 315 + flex:1;
297 height: 100%; 316 height: 100%;
298 - /*display: flex;*/  
299 - /*flex-wrap: nowrap*/  
300 - /*width: 50%;*/  
301 - /*height:50%;*/  
302 - /*float: left;*/  
303 - /*margin-left: 45%;*/  
304 - /*margin-bottom: 100px;*/  
305 } 317 }
306 318
307 /** 319 /**
@@ -321,7 +333,8 @@ @@ -321,7 +333,8 @@
321 333
322 .basic-ul { 334 .basic-ul {
323 display: flex; 335 display: flex;
324 - 336 + align-items: center;
  337 + justify-content: space-around;
325 .basic-item:nth-child(even) { 338 .basic-item:nth-child(even) {
326 background-color: #f8f8f8; 339 background-color: #f8f8f8;
327 } 340 }
@@ -397,4 +410,7 @@ @@ -397,4 +410,7 @@
397 .span-green { 410 .span-green {
398 color: #0BAC33; 411 color: #0BAC33;
399 } 412 }
  413 + .padding-10{
  414 + padding:10px;
  415 + }
400 </style> 416 </style>
@@ -6,7 +6,7 @@ @@ -6,7 +6,7 @@
6 </div> 6 </div>
7 <div class="button-btn-item"> 7 <div class="button-btn-item">
8 <el-button v-if="item.isDisplay" :style="btnStyle" class="button-style" :type="btnActive==item.code?'primary':'default'" 8 <el-button v-if="item.isDisplay" :style="btnStyle" class="button-style" :type="btnActive==item.code?'primary':'default'"
9 - @click="changeType(item)" v-for="item in btnGroup"> 9 + @click="changeType(item)" v-for="(item,index) in btnGroup" :key="index">
10 {{item.name}} 10 {{item.name}}
11 </el-button> 11 </el-button>
12 12
1 <template> 1 <template>
2 <div :style="styleObj" class="fillContainer"> 2 <div :style="styleObj" class="fillContainer">
3 - <div class="fill-item" :style="fillItemStyle" v-for="item in fillData"> 3 + <div class="fill-item" :style="fillItemStyle" v-for="(item,index) in fillData" :key="index">
4 <div class="circle" :style="circleStyle"> 4 <div class="circle" :style="circleStyle">
5 <div class="wave"> 5 <div class="wave">
6 <div class="wave1" :style="[wave1Style,topStyle(item.num)]"></div> 6 <div class="wave1" :style="[wave1Style,topStyle(item.num)]"></div>
@@ -7,13 +7,13 @@ @@ -7,13 +7,13 @@
7 <div class="percentContainer" :style="flexStyle"> 7 <div class="percentContainer" :style="flexStyle">
8 <v-chart :options="options" autoresize/> 8 <v-chart :options="options" autoresize/>
9 <div class="percent-label-item"> 9 <div class="percent-label-item">
10 - <div class="chart-title" v-for="item in percentData"> 10 + <div class="chart-title" v-for="(item,index) in percentData" :key="index">
11 <span :style="numStyle(item)">{{ item.num }}</span> 11 <span :style="numStyle(item)">{{ item.num }}</span>
12 <span :style="pieStyle(item)">%</span> 12 <span :style="pieStyle(item)">%</span>
13 </div> 13 </div>
14 </div> 14 </div>
15 <div class="percent-item" > 15 <div class="percent-item" >
16 - <div class="chart-title" :style="subTitleStyle" v-for="item in percentData">{{ item.name }}</div> 16 + <div class="chart-title" :style="subTitleStyle" v-for="(item,index) in percentData" :key="index">{{ item.name }}</div>
17 </div> 17 </div>
18 </div> 18 </div>
19 19
1 <template> 1 <template>
2 <div :style="styleObj" class="progressContainer"> 2 <div :style="styleObj" class="progressContainer">
3 - <div class="progress-item" :style="itemStyle" v-for="item in progressData"> 3 + <div class="progress-item" :style="itemStyle" v-for="(item,index) in progressData" :key="index">
4 <div class="progress-title" :style="titleStyle">{{ item.name }}</div> 4 <div class="progress-title" :style="titleStyle">{{ item.name }}</div>
5 <div class="progress-title-proposal" :style="titleProposalStyle">{{item.proposal}}</div> 5 <div class="progress-title-proposal" :style="titleProposalStyle">{{item.proposal}}</div>
6 <div class="progress-content" :style="progressStyle"> 6 <div class="progress-content" :style="progressStyle">
@@ -8,7 +8,7 @@ @@ -8,7 +8,7 @@
8 <div class="system-item system-item-img"> 8 <div class="system-item system-item-img">
9 <img :src="imgStyle.infoImageAdress" alt=""> 9 <img :src="imgStyle.infoImageAdress" alt="">
10 </div> 10 </div>
11 - <div class="system-item" :style="itemStyle" v-for="item in systemData"> 11 + <div class="system-item" :style="itemStyle" v-for="(item,index) in systemData" :key="index">
12 <div class="system-img"><img :src="'/src/assets/images/monitor/capacityAnalysis/'+item.code+'.png'" alt=""></div> 12 <div class="system-img"><img :src="'/src/assets/images/monitor/capacityAnalysis/'+item.code+'.png'" alt=""></div>
13 <div class="system-info" :style="titleProposalStyle"> 13 <div class="system-info" :style="titleProposalStyle">
14 <span>{{item.name}}：</span> 14 <span>{{item.name}}：</span>