<!-- 自定義 echart 組件 -->
<template>
<div>
<!-- echart表格 -->
<div :id="id" class="myChart" :style="echartStyle"></div>
</div>
</template>
<script>
export default {
props: {
// 樣式
echartStyle: {
type: Object,
default(){
return {}
}
},
// 標題文本
titleText: {
type: String,
default: ''
},
// 提示框鍵名
tooltipFormatter: {
type: String,
default: ''
},
// 扇形區域名稱
opinion: {
type: Array,
default(){
return []
}
},
// 提示框標題
seriesName: {
type: String,
default: ''
},
// 扇形區域數據
opinionData: {
type: Array,
default(){
return []
}
},
id:{
type: String,
default: ''
}
},
data(){
return {
//
}
},
mounted(){
this.$nextTick(function() {
this.drawPie(this.id);
});
},
methods: {
// 監聽扇形圖點擊
eConsole(param) {
// 向父組件傳值
this.$emit("currentEchartData",param.name);
},
// 繪製餅狀圖
drawPie(id){
this.charts = this.$echarts.init(document.getElementById(id));
this.charts.on("click", this.eConsole);
this.charts.setOption({
title: {
text: this.titleText, // 標題文本
left: 30,
top:10,
textStyle:{
fontSize:16,
fontWeight:400
}
},
tooltip : {
trigger: 'item',
// formatter: "{a} <br/> " + this.tooltipFormatter + ":{c} ({d}%)"
formatter: this.tooltipFormatter + ":{c} ({d}%)"
},
legend: {
orient : 'vertical',
right:20,
bottom:20,
type:'scroll',
// left: 'center',
data: this.opinion // 扇形區域名稱
},
series : [
{
name:this.seriesName, // 提示框標題
type: 'pie',
radius : '65%',
center: ['35%', '50%'],
selectedMode: 'single',
data:this.opinionData, // 扇形區域數據
itemStyle:{
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
},
// normal:{
// label:{
// show: true,
// formatter: '{b} : {c} ({d}%)'
// },
// labelLine :{show:true}
// }
}
],
color:['#77A1E5', '#449A2A', '#24CBE5', '#8BBC21', '#C42525', '#058DC7', '#FF9655', '#DDDF00']
})
}
}
}
</script>
<style>
.myChart{
width: 47%;
height:300px;
float:left;
margin:0 0 2% 2%;
border:1px solid #e1e1e1;
-webkit-border-radius:4px;
-moz-border-radius:4px;
-ms-border-radius:4px;
border-radius:4px;
}
</style>
https://www.cnblogs.com/crazycode2/p/7902813.html
<template>
<div class="ux-layout-main" style="padding: 25px 0px 25px 25px;">
<div style="margin-bottom: 10px;" class="clearfix">
<ux-tabs @tab-click="onTabClick">
<template v-for="platformModule in platformModuleArray">
<ux-tab-pane :tab="platformModule.ptiName" :name="platformModule.ptiId + ''">
<template v-if="platformModule.moduleVersions">
<template v-for="moduleVersion in platformModule.moduleVersions">
<!-- 內容 -->
<m-echarts :id="platformModule.ptiId + moduleVersion.module"
:echartStyle="s"
:titleText="moduleVersion.module + '版本分佈圖'"
:tooltipFormatter="b"
:opinion="moduleVersion.versions"
:seriesName="d"
:opinionData="moduleVersion.lst"
v-on:currentEchartData="getEchartData"></m-echarts>
</template>
</template>
</ux-tab-pane>
</template>
</ux-tabs>
<ux-form layout="inline">
<ux-form-item label="機房">
<ux-select v-model="searchData.labInfo" name="labInfo" style="width: 188px;" placeholder="請選擇" @change="onSelectedDrug">
<ux-option
v-for="lab in labInfos"
:key="lab.labId"
:label="lab.labName"
:value="lab.labId">
</ux-option>
</ux-select>
</ux-form-item>
<ux-form-item label="節點">
<ux-select v-model="searchData.node" name="node" style="width: 188px;" placeholder="請選擇">
<ux-option
v-for="nodeInfo in nodeInfos"
:key="nodeInfo.id"
:label="nodeInfo.name"
:value="nodeInfo.id">
</ux-option>
</ux-select>
</ux-form-item>
<ux-form-item>
<ux-input v-model="searchData.version" placeholder="請輸入版本號"/>
</ux-form-item>
<ux-form-item>
<ux-button type="primary">查詢</ux-button>
</ux-form-item>
<ux-form-item>
<ux-button type="primary" @click="()=>reset()">重置</ux-button>
</ux-form-item>
</ux-form>
<article class="doc" style="margin-top:10px;">
<ux-table :columns="columns" v-model="data" :loading="loading" size="middle" bordered :row-selection="rowSelection"/>
</article>
<div>
<div class="search-version">
<span >已選擇{{rowSelection.selectedRowKeys.length}}項</span>
<template>
<ux-checkbox v-model="cChecked" @change="searchServerId" label="僅顯示已選擇項"/>
<ux-popconfirm title="本次操作建議不超過10條記錄查詢，堅持本次操作?" :disabled="rowSelection.selectedRowKeys.length < 10" @confirm="onConfirm" @cancel="onCancel">
<ux-button type="primary" @click="()=>batchSearchVersion()">批量查詢版本號</ux-button>
</ux-popconfirm>
</template>
</div>
<div class="pagination-css" style="float:right;margin: 15px 8px 0px 0px;">
<ux-pagination
show-quick-jumper
show-size-changer
:page-size-options="[10, 20, 40, 50, 60, 100]"
@page-size-change="pageSizeChange"
:show-before-total="showBeforeTotal"
:current="pageNum"
:page-size="pageSize"
:total="dataTotal">
</ux-pagination>
</div>
</div>
</div>
</div>
</template>
<script>
import service from 'servicePath/index';
import mEcharts from 'viewsPath/versionMgn/Echarts.vue';
import UxMessage from '@suning/uxcool/es/message';
const options = {
// tooltip: {
// trigger: 'item',
// // formatter: '{b}   {c} <br>{d}%',
// formatter: '{b} {c} {d}%',
// },
// legend: {
// show: false,
// },
// series: [
// {
// name: '未處理事件',
// type: 'pie',
// radius: '55%',
// center: ['50%', '50%'],
// data: [{ value: 30, name: '災難' }, { value: 80, name: '警告' }, { value: 40, name: '嚴重' }],
// },
// ],
};
const defaultSearchData = {
labInfo: null,
platform: null,
node: null,
version : null,
ids : null,
flushFlag : 0,
}
function getCols() {
return [
{
key: 'labName',
title: '機房',
dataIndex: 'labName',
cellRender(text, record) {
return {text};
},
},
{
key: 'nodeName',
title: '節點',
dataIndex: 'nodeName',
cellRender(text, record) {
return {text};
},
},
{
key: 'serverName',
title: '機器',
dataIndex: 'serverName',
cellRender(text, record) {
return {text};
},
},
{
key: 'version',
title: '版本',
dataIndex: 'version',
cellRender(text, record) {
return {text};
},
}];
}
function getData() {
var params = {
platform : this.searchData.platform,
labInfo : this.searchData.labInfo,
node : this.searchData.node,
version : this.searchData.version,
flushFlag : this.searchData.flushFlag,
ids : this.searchData.ids,
rows : this.pageSize,
page : this.pageNum,
}
console.info("getData() platform = ", this.searchData.platform,
", labInfo = ", this.searchData.labInfo, " , node = ", this.searchData.node, " , version = ", this.searchData.version,
" , flushFlag = ", this.searchData.flushFlag,
" , ids = ", this.searchData.ids, " , rows = ", this.pageSize, " , page = ", this.pageNum);
service.getMachineVersionInfo(params).then((data) => {
this.dataTotal = data.total;
this.data = data.rows;
this.loading = false;
});
}
export default {
components: {
mEcharts
},
data() {
return {
platformModuleArray:[],
options,
// a:'水果銷售統計',
b:'版本數量',
// c:['香蕉','蘋果','橘子'],
d:'',
// e:[
// {value:3, name:'香蕉'},
// {value:3, name:'蘋果'},
// {value:3, name:'橘子'}
// ],
s: {
height: ''
},
searchData: {
...defaultSearchData,
},
labInfos : [],
nodeInfos : [],
pageSize : 10,
pageNum : 1,
columns : [],
data : [],
loading: true,
dataTotal: 0,
rowSelection: {
selectedRowKeys: [],
onChange(selectedRowKeys, selectedRow, op, prevSelectRowKeys) {
this.selectedRowKeys = selectedRowKeys;
}
},
cChecked : false,
confirm : false,
};
},
methods: {
getAllPlatformModule(){
return service.getAllPlatformModule().then((data) => {
if(data && data.length >= 0){
this.platformModuleArray = data;
this.searchData.platform = data[0].ptiId;
this.getNodeInfo();
}
});
},
getEchartData(val){
console.log(val);
},
getEffectInfolab(){
return service.getEffectInfolab().then((data) => {
this.labInfos = data;
});
},
getNodeInfo(){
this.searchData.node = "";
var params = {
platform : this.searchData.platform,
labInfo : this.searchData.labInfo,
}
console.info("getNodeInfo() platform = ", this.searchData.platform, " , labInfo = " + this.searchData.labInfo);
return service.getNodeInfo(params).then((data) => {
this.nodeInfos = data;
});
},
showBeforeTotal(total, pageSize, totalPage, pageNo, range) {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
this.loading = true;
this.pageNum = pageNo;
getData.call(this);
// return "共" + total + "條, 每頁顯示" + pageSize + "條, 共" + totalPage + "頁";
return "共" + total + "條記錄";
},
pageSizeChange(current, size) {
this.pageSize = size;
},
onSelectedDrug(){
this.getNodeInfo();
},
reset(){
this.rowSelection.selectedRowKeys = [];
this.cChecked = false;
this.searchData.labInfo = null;
this.searchData.node = null;
this.searchData.version = null;
this.searchData.ids = null;
this.searchData.flushFlag = 0;
this.pageNum = 1;
this.getNodeInfo();
},
onTabClick(args) {
this.searchData.platform = args;
this.reset();
},
searchServerId(e){
if(e.target.checked){
this.searchData.ids = this.rowSelection.selectedRowKeys.join(",");
this.data = getData.call(this);
} else{
this.reset();
}
},
batchSearchVersion(){
if(this.rowSelection.selectedRowKeys.length == 0){
UxMessage.warning('請選擇機器進行批量查詢版本號操作！');
} else if(this.rowSelection.selectedRowKeys.length <= 10){
console.info(1111);
this.searchData.ids = this.rowSelection.selectedRowKeys.join(",");
getData.call(this);
} else if(this.rowSelection.selectedRowKeys.length > 10 && this.confirm){
console.info(2222);
this.confirm = false;
this.searchData.flushFlag = 1;
this.searchData.ids = this.rowSelection.selectedRowKeys.join(",");
getData.call(this);
this.searchData.flushFlag = 0;
}
},
onConfirm() {
console.log('confirm');
this.confirm = true;
this.batchSearchVersion();
},
onCancel() {
this.confirm = false;
},
},
created() {
this.getAllPlatformModule();
this.getEffectInfolab();
this.columns = getCols.call(this);
this.data = getData.call(this);
},
mounted(){
}
};
</script>
<style scoped>
.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.search-version {
float:left;
margin:15px 0 0 8px;
}
.search-version>span {
margin-right:10px;
}
</style>