|
|
@@ -2,9 +2,13 @@
|
|
|
<table class="com-table">
|
|
|
<thead>
|
|
|
<tr>
|
|
|
- <th v-for="(col, index) of data.column" :key="index" :class="{ light: col.is_light }" :style="{ width: col.width }" @click="onSort(col)">
|
|
|
- {{ col.name }}
|
|
|
- </th>
|
|
|
+ <th
|
|
|
+ v-for="(col, index) of data.column"
|
|
|
+ :key="index"
|
|
|
+ :class="{ light: col.is_light }"
|
|
|
+ :style="{ width: col.width }"
|
|
|
+ @click="onSort(col)"
|
|
|
+ >{{ col.name }}</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<el-scrollbar>
|
|
|
@@ -18,13 +22,33 @@
|
|
|
@mouseenter="hover(row, col)"
|
|
|
@mouseleave="leave()"
|
|
|
>
|
|
|
- <component :is="col.type ? col.type : 'div'" v-bind="col.props" v-html="template(col, row[col.field])" @click="onClick(col, row)"> </component>
|
|
|
+ <component
|
|
|
+ :is="col.type ? col.type : 'div'"
|
|
|
+ v-bind="col.props"
|
|
|
+ v-html="template(col, row[col.field])"
|
|
|
+ @click="onClick(col, row)"
|
|
|
+ ></component>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</el-scrollbar>
|
|
|
- <el-pagination class="mg-t-8" v-if="pageable" @current-change="handleCurrentChange" :current-page="currentPage4" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="data.total"> </el-pagination>
|
|
|
- <el-dialog :title="dialogTitle" v-model="dialogShow" width="70%" top="10vh" custom-class="modal" :close-on-click-modal="true">
|
|
|
+ <el-pagination
|
|
|
+ class="mg-t-8"
|
|
|
+ v-if="pageable"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="currentPage4"
|
|
|
+ :page-size="pageSize"
|
|
|
+ layout="total, prev, pager, next, jumper"
|
|
|
+ :total="data.total"
|
|
|
+ ></el-pagination>
|
|
|
+ <el-dialog
|
|
|
+ :title="dialogTitle"
|
|
|
+ v-model="dialogShow"
|
|
|
+ width="70%"
|
|
|
+ top="10vh"
|
|
|
+ custom-class="modal"
|
|
|
+ :close-on-click-modal="true"
|
|
|
+ >
|
|
|
<div class="chart" id="chartDiv" height="500px"></div>
|
|
|
</el-dialog>
|
|
|
</table>
|
|
|
@@ -43,33 +67,34 @@ export default {
|
|
|
// hover 样式
|
|
|
showHover: {
|
|
|
type: Boolean,
|
|
|
- default: true,
|
|
|
+ default: true
|
|
|
},
|
|
|
// 列高亮
|
|
|
showColHover: {
|
|
|
type: Boolean,
|
|
|
- default: false,
|
|
|
+ default: false
|
|
|
},
|
|
|
canScroll: {
|
|
|
type: Boolean,
|
|
|
- default: true,
|
|
|
+ default: true
|
|
|
},
|
|
|
pageSize: {
|
|
|
type: Number,
|
|
|
- default: 0,
|
|
|
+ default: 0
|
|
|
},
|
|
|
height: {
|
|
|
type: String,
|
|
|
- default: "",
|
|
|
- },
|
|
|
+ default: ""
|
|
|
+ }
|
|
|
},
|
|
|
// 自定义事件
|
|
|
emits: {
|
|
|
// 分页事件
|
|
|
- onPagging: null,
|
|
|
+ onPagging: null
|
|
|
},
|
|
|
// 数据
|
|
|
data() {
|
|
|
+ let that = this;
|
|
|
return {
|
|
|
hoverRow: -1,
|
|
|
hoverCol: -1,
|
|
|
@@ -77,8 +102,9 @@ export default {
|
|
|
sortType: "",
|
|
|
currentPage: 1,
|
|
|
dialogShow: false,
|
|
|
- dialogTitle:"",
|
|
|
- dialogData:{},
|
|
|
+ dialogTitle: "",
|
|
|
+ dialogData: {},
|
|
|
+ myChart : null
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -115,245 +141,294 @@ export default {
|
|
|
endRow() {
|
|
|
if (this.pageable) return this.currentPage * this.pageSize;
|
|
|
else return this.data.data.length;
|
|
|
- },
|
|
|
+ }
|
|
|
},
|
|
|
// 函数
|
|
|
methods: {
|
|
|
- clearCheckBox(time){
|
|
|
- this.$nextTick(()=>{
|
|
|
- setTimeout(()=>{
|
|
|
+ clearCheckBox(time) {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ setTimeout(() => {
|
|
|
const domArray = document.querySelectorAll(".curCheckBox");
|
|
|
- for(let i=0;i<domArray.length;i++){
|
|
|
- domArray[i].checked=false;
|
|
|
+ for (let i = 0; i < domArray.length; i++) {
|
|
|
+ domArray[i].checked = false;
|
|
|
}
|
|
|
- },(time || 300));
|
|
|
+ }, time || 300);
|
|
|
});
|
|
|
},
|
|
|
- onClick(col, data) {
|
|
|
+ onClick(col, row) {
|
|
|
+ this.clearChart();
|
|
|
+ let subUrl = "";
|
|
|
+ let data = {};
|
|
|
+ let method = "POST";
|
|
|
+ if ("sjbz" == col.field) {
|
|
|
+ subUrl = "/leaderboard/curveMonthchatAjax";
|
|
|
+ data["type"] = "sjbz";
|
|
|
+ } else if ("sjzy" == col.field) {
|
|
|
+ subUrl = "/leaderboard/curveMonthchatAjax";
|
|
|
+ data["type"] = "sjzy";
|
|
|
+ } else if ("zybz" == col.field) {
|
|
|
+ subUrl = "/leaderboard/curveMonthchatAjax";
|
|
|
+ data["type"] = "zybz";
|
|
|
+ } else if ("hb" == col.field) {
|
|
|
+ subUrl = "/leaderboard/curveMonthchatAjaxhb";
|
|
|
+ data["type"] = "hb";
|
|
|
+ method = "GET";
|
|
|
+ } else if ("tb" == col.field) {
|
|
|
+ subUrl = "/leaderboard/curveMonthchatAjaxtb";
|
|
|
+ data["type"] = "tb";
|
|
|
+ method = "GET";
|
|
|
+ } else if ("bbgfj" == col.field) {
|
|
|
+ subUrl = "/leaderboard/curveMonthchatAjaxbg";
|
|
|
+ data["type"] = "bg";
|
|
|
+ method = "GET";
|
|
|
+ } else {
|
|
|
+ return 0;
|
|
|
+ }
|
|
|
this.dialogShow = true;
|
|
|
- this.dialogTitle="曲线偏差率排行";
|
|
|
+ this.dialogTitle = "曲线偏差率排行";
|
|
|
const date = new Date();
|
|
|
let year = date.getFullYear();
|
|
|
let month = date.getMonth() + 1;
|
|
|
let pdate = this.$parent.date.split("-");
|
|
|
- if(pdate && pdate.length>1){
|
|
|
- year = pdate[0];
|
|
|
- month = pdate[1];
|
|
|
+ if (pdate && pdate.length > 1) {
|
|
|
+ data["year"] = pdate[0];
|
|
|
+ data["month"] = pdate[1];
|
|
|
}
|
|
|
-
|
|
|
+ data["wtId"] = row.fj;
|
|
|
let that = this;
|
|
|
that.API.requestData({
|
|
|
- method: "POST",
|
|
|
- subUrl:"/leaderboard/curveMonthchatAjax",
|
|
|
- data: {
|
|
|
- wtId : data.fj,
|
|
|
- month : month,
|
|
|
- type :"zybz",
|
|
|
- year : year
|
|
|
- },
|
|
|
- success (res) {
|
|
|
+ method: method,
|
|
|
+ subUrl: subUrl,
|
|
|
+ data: data,
|
|
|
+ success(res) {
|
|
|
if (res.code === 200) {
|
|
|
const linedata1 = [];
|
|
|
const linedata2 = [];
|
|
|
-
|
|
|
+ const names = [res.data.name1, res.data.name2];
|
|
|
res.data.datas.forEach((item, index) => {
|
|
|
- linedata1.push(item['value2']);
|
|
|
- linedata2.push(item['value3']);
|
|
|
+ linedata1.push(item["value2"]);
|
|
|
+ linedata2.push(item["value3"]);
|
|
|
});
|
|
|
-
|
|
|
+
|
|
|
that.dialogShow = true;
|
|
|
- that.dialogTitle="曲线偏差率排行";
|
|
|
- that.initChart(linedata1,linedata2);
|
|
|
+ that.dialogTitle = "曲线偏差率排行";
|
|
|
+ that.initChart(linedata1, linedata2, names);
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
- initChart(data1,data2){
|
|
|
- let myChart = echarts.init(document.getElementById('chartDiv'));
|
|
|
+ clearChart(){
|
|
|
+ // echarts.init(document.getElementById("chartDiv"));
|
|
|
+ // TODO 未实现 点开后先清空曲线。mychart 不能定义为全局变量。Echarts bug
|
|
|
+ },
|
|
|
+ initChart(data1, data2, names) {
|
|
|
+ let that = this;
|
|
|
+ let myChart = echarts.init(document.getElementById("chartDiv"));
|
|
|
let option = {
|
|
|
- "color": [
|
|
|
- "#05bb4c",
|
|
|
- "#4b55ae",
|
|
|
- ],
|
|
|
+ color: ["#05bb4c", "#4b55ae"],
|
|
|
tooltip: {
|
|
|
- trigger: 'axis'
|
|
|
+ trigger: "axis"
|
|
|
},
|
|
|
- "legend": {
|
|
|
- "show": true,
|
|
|
- "data": [
|
|
|
- "最优功率",
|
|
|
- "保证功率",
|
|
|
- ],
|
|
|
- "right": 56,
|
|
|
- "icon": "circle",
|
|
|
- "itemWidth": 6,
|
|
|
- "inactiveColor": "#606769",
|
|
|
- "textStyle": {
|
|
|
- "color": "#B3BDC0",
|
|
|
- "fontSize": 12
|
|
|
- }
|
|
|
+ legend: {
|
|
|
+ show: true,
|
|
|
+ data: names,
|
|
|
+ right: 56,
|
|
|
+ icon: "circle",
|
|
|
+ itemWidth: 6,
|
|
|
+ inactiveColor: "#606769",
|
|
|
+ textStyle: {
|
|
|
+ color: "#B3BDC0",
|
|
|
+ fontSize: 12
|
|
|
+ }
|
|
|
},
|
|
|
- "grid": {
|
|
|
- "top": 32,
|
|
|
- "left": 40,
|
|
|
- "right": 40,
|
|
|
- "bottom": 24
|
|
|
+ grid: {
|
|
|
+ top: 32,
|
|
|
+ left: 40,
|
|
|
+ right: 40,
|
|
|
+ bottom: 24
|
|
|
},
|
|
|
- "xAxis": [
|
|
|
- {
|
|
|
- "type": "category",
|
|
|
- "boundaryGap": false,
|
|
|
- "axisLabel": {
|
|
|
- "formatter": "{value}",
|
|
|
- "fontSize": 9.35925925925926,
|
|
|
- "textStyle": {
|
|
|
- "color": "#606769"
|
|
|
- }
|
|
|
- },
|
|
|
- "axisLine": {
|
|
|
- "show": false
|
|
|
- },
|
|
|
- "data": ["0","1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25"]
|
|
|
- }
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: "category",
|
|
|
+ boundaryGap: false,
|
|
|
+ axisLabel: {
|
|
|
+ formatter: "{value}",
|
|
|
+ fontSize: 9.35925925925926,
|
|
|
+ textStyle: {
|
|
|
+ color: "#606769"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ "0",
|
|
|
+ "1",
|
|
|
+ "2",
|
|
|
+ "3",
|
|
|
+ "4",
|
|
|
+ "5",
|
|
|
+ "6",
|
|
|
+ "7",
|
|
|
+ "8",
|
|
|
+ "9",
|
|
|
+ "10",
|
|
|
+ "11",
|
|
|
+ "12",
|
|
|
+ "13",
|
|
|
+ "14",
|
|
|
+ "15",
|
|
|
+ "16",
|
|
|
+ "17",
|
|
|
+ "18",
|
|
|
+ "19",
|
|
|
+ "20",
|
|
|
+ "21",
|
|
|
+ "22",
|
|
|
+ "23",
|
|
|
+ "24",
|
|
|
+ "25"
|
|
|
+ ]
|
|
|
+ }
|
|
|
],
|
|
|
- "yAxis": [
|
|
|
- {
|
|
|
- "type": "value",
|
|
|
- "name": "(W)",
|
|
|
- "axisLabel": {
|
|
|
- "formatter": "{value}",
|
|
|
- "fontSize": 9.35925925925926
|
|
|
- },
|
|
|
- "axisLine": {
|
|
|
- "show": false
|
|
|
- },
|
|
|
- "splitLine": {
|
|
|
- "show": true,
|
|
|
- "lineStyle": {
|
|
|
- "color": "#606769",
|
|
|
- "type": "dashed"
|
|
|
- }
|
|
|
- }
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: "value",
|
|
|
+ name: "(W)",
|
|
|
+ axisLabel: {
|
|
|
+ formatter: "{value}",
|
|
|
+ fontSize: 9.35925925925926
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: "#606769",
|
|
|
+ type: "dashed"
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
],
|
|
|
- "series": [
|
|
|
- {
|
|
|
- "name": "最优功率",
|
|
|
- "type": "line",
|
|
|
- "smooth": true,
|
|
|
- "showSymbol": false,
|
|
|
- "zlevel": 0,
|
|
|
- "lineStyle": {
|
|
|
- "normal": {
|
|
|
- "color": "#05bb4c",
|
|
|
- "width": 1
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: names[0],
|
|
|
+ type: "line",
|
|
|
+ smooth: true,
|
|
|
+ showSymbol: false,
|
|
|
+ zlevel: 0,
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "#05bb4c",
|
|
|
+ width: 1
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ color: "#05bb4c"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ normal: {
|
|
|
+ color: {
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "rgba(5,187,76,0.3)"
|
|
|
},
|
|
|
- "emphasis": {
|
|
|
- "color": "#05bb4c"
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "rgba(5,187,76,0.1)"
|
|
|
}
|
|
|
+ ],
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ type: "linear",
|
|
|
+ global: false
|
|
|
},
|
|
|
- "areaStyle": {
|
|
|
- "normal": {
|
|
|
- "color": {
|
|
|
- "colorStops": [
|
|
|
- {
|
|
|
- "offset": 0,
|
|
|
- "color": "rgba(5,187,76,0.3)"
|
|
|
- },
|
|
|
- {
|
|
|
- "offset": 1,
|
|
|
- "color": "rgba(5,187,76,0.1)"
|
|
|
- }
|
|
|
- ],
|
|
|
- "x": 0,
|
|
|
- "y": 0,
|
|
|
- "x2": 0,
|
|
|
- "y2": 1,
|
|
|
- "type": "linear",
|
|
|
- "global": false
|
|
|
- },
|
|
|
- "shadowColor": "rgba(5,187,76,0.1)",
|
|
|
- "shadowBlur": 10
|
|
|
+ shadowColor: "rgba(5,187,76,0.1)",
|
|
|
+ shadowBlur: 10
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ color: {
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "rgba(5,187,76,0.3)"
|
|
|
},
|
|
|
- "emphasis": {
|
|
|
- "color": {
|
|
|
- "colorStops": [
|
|
|
- {
|
|
|
- "offset": 0,
|
|
|
- "color": "rgba(5,187,76,0.3)"
|
|
|
- },
|
|
|
- {
|
|
|
- "offset": 1,
|
|
|
- "color": "rgba(5,187,76,0.1)"
|
|
|
- }
|
|
|
- ],
|
|
|
- "x": 0,
|
|
|
- "y": 0,
|
|
|
- "x2": 0,
|
|
|
- "y2": 1,
|
|
|
- "type": "linear",
|
|
|
- "global": false
|
|
|
- },
|
|
|
- "shadowColor": "rgba(5,187,76,0.1)",
|
|
|
- "shadowBlur": 10
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "rgba(5,187,76,0.1)"
|
|
|
}
|
|
|
+ ],
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ type: "linear",
|
|
|
+ global: false
|
|
|
},
|
|
|
+ shadowColor: "rgba(5,187,76,0.1)",
|
|
|
+ shadowBlur: 10
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
- "yAxisIndex": 0,
|
|
|
- "data": data1
|
|
|
+ yAxisIndex: 0,
|
|
|
+ data: data1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: names[1],
|
|
|
+ type: "line",
|
|
|
+ smooth: true,
|
|
|
+ showSymbol: false,
|
|
|
+ zlevel: 2,
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "#606769",
|
|
|
+ width: 1
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ color: "#fa8c16"
|
|
|
+ }
|
|
|
},
|
|
|
- {
|
|
|
- "name": "保证功率",
|
|
|
- "type": "line",
|
|
|
- "smooth": true,
|
|
|
- "showSymbol": false,
|
|
|
- "zlevel": 2,
|
|
|
- "lineStyle": {
|
|
|
- "normal": {
|
|
|
- "color": "#606769",
|
|
|
- "width": 1
|
|
|
+ areaStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "transparent",
|
|
|
+ shadowColor: "rgba(250,140,22,0.1)",
|
|
|
+ shadowBlur: 10
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ color: {
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "rgba(250,140,22,0.3)"
|
|
|
},
|
|
|
- "emphasis": {
|
|
|
- "color": "#fa8c16"
|
|
|
- }
|
|
|
- },
|
|
|
- "areaStyle": {
|
|
|
- "normal": {
|
|
|
- "color": "transparent",
|
|
|
- "shadowColor": "rgba(250,140,22,0.1)",
|
|
|
- "shadowBlur": 10
|
|
|
- },
|
|
|
- "emphasis": {
|
|
|
- "color": {
|
|
|
- "colorStops": [
|
|
|
- {
|
|
|
- "offset": 0,
|
|
|
- "color": "rgba(250,140,22,0.3)"
|
|
|
- },
|
|
|
- {
|
|
|
- "offset": 1,
|
|
|
- "color": "rgba(250,140,22,0.1)"
|
|
|
- }
|
|
|
- ],
|
|
|
- "x": 0,
|
|
|
- "y": 0,
|
|
|
- "x2": 0,
|
|
|
- "y2": 1,
|
|
|
- "type": "linear",
|
|
|
- "global": false
|
|
|
- },
|
|
|
- "shadowColor": "rgba(250,140,22,0.1)",
|
|
|
- "shadowBlur": 10
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "rgba(250,140,22,0.1)"
|
|
|
}
|
|
|
+ ],
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ type: "linear",
|
|
|
+ global: false
|
|
|
},
|
|
|
+ shadowColor: "rgba(250,140,22,0.1)",
|
|
|
+ shadowBlur: 10
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
- "yAxisIndex": 0,
|
|
|
- "data": data2
|
|
|
- }
|
|
|
+ yAxisIndex: 0,
|
|
|
+ data: data2
|
|
|
+ }
|
|
|
]
|
|
|
};
|
|
|
myChart.clear();
|
|
|
- myChart && myChart && myChart.setOption(option);
|
|
|
+ myChart.setOption(option);
|
|
|
this.resize = function() {
|
|
|
myChart.resize();
|
|
|
};
|
|
|
@@ -396,25 +471,21 @@ export default {
|
|
|
pageIndex: this.currentPage,
|
|
|
pageSize: this.pageSize,
|
|
|
start: this.startRow,
|
|
|
- end: this.endRow,
|
|
|
+ end: this.endRow
|
|
|
});
|
|
|
- },
|
|
|
+ }
|
|
|
},
|
|
|
// 生命周期钩子
|
|
|
- beforeCreate() {
|
|
|
- // 创建前
|
|
|
- },
|
|
|
- created() {
|
|
|
- // 创建后
|
|
|
- },
|
|
|
- beforeMount() {
|
|
|
- // 渲染前
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- // 渲染后
|
|
|
- },
|
|
|
+ // 创建前
|
|
|
+ beforeCreate() {},
|
|
|
+ // 创建后
|
|
|
+ created() {},
|
|
|
+ // 渲染前
|
|
|
+ beforeMount() {},
|
|
|
+ // 渲染后
|
|
|
+ mounted() {},
|
|
|
beforeUpdate() {},
|
|
|
- updated() {},
|
|
|
+ updated() {}
|
|
|
};
|
|
|
</script>
|
|
|
|
yangxiao