300 lines
9.5 KiB
HTML
300 lines
9.5 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8"/>
|
||
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
|
||
<title></title>
|
||
<!-- <script src="../../lib/jquery/dist/jquery.js"></script>-->
|
||
<script src="../../lib/vuejs/vue.js"></script>
|
||
<script src="../../lib/vuejs/axios.min.js"></script>
|
||
<script src="../../lib/elementui/index.js"></script>
|
||
<script src="../../Scripts/linq.js"></script>
|
||
<link href="../../lib/elementui/index.css" rel="stylesheet"/>
|
||
<!-- <script src="../../app/app.js"></script>-->
|
||
<script src="../../lib/echarts5temp/echarts_v5.4.3.min.js"></script>
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
<div class="container">
|
||
<h1 class="title">模型验证</h1>
|
||
<div class="changelv">
|
||
<select v-model="selectedValue" @click="delOtherVal(1)" @change="handleChange" style="width: 67.2px;height: 25px">
|
||
<option v-for="option in options" :value="option.value"> {{option.label}}</option>
|
||
</select>
|
||
<input type="number" min="0" max="100" v-model="customValue" @click="delOtherVal(2)" @blur="handleBlur" class="inputlv">
|
||
</div>
|
||
<div class="grid">
|
||
<div class="item" ref="main1">区域1</div>
|
||
<div class="item" ref="main2">区域2</div>
|
||
<div class="item" ref="main3">区域3</div>
|
||
<div class="item" ref="main4">区域4</div>
|
||
<div class="item" ref="main5">区域5</div>
|
||
<div class="item" ref="main6">区域6</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|
||
|
||
|
||
<script>
|
||
///////////////////////////////////////////////////
|
||
//该部分是Vue应用封装
|
||
var app = new Vue({
|
||
el: '#app',
|
||
data() {
|
||
return {
|
||
lv:99,
|
||
title:[
|
||
"执法检查",
|
||
"行政处罚",
|
||
"抽查考核",
|
||
"抽检检测",
|
||
"信息追溯",
|
||
"投诉举报",
|
||
],
|
||
legend: ['分数','测试分数'],
|
||
options: [
|
||
{
|
||
value: '10',
|
||
label: '10'
|
||
}, {
|
||
value: '20',
|
||
label: '20'
|
||
}, {
|
||
value: '30',
|
||
label: '30'
|
||
}, {
|
||
value: '40',
|
||
label: '40'
|
||
}, {
|
||
value: '50',
|
||
label: '50'
|
||
}, {
|
||
value: '60',
|
||
label: '60'
|
||
}, {
|
||
value: '70',
|
||
label: '70'
|
||
}, {
|
||
value: '80',
|
||
label: '80'
|
||
}, {
|
||
value: '90',
|
||
label: '90'
|
||
}, {
|
||
value: '95',
|
||
label: '95'
|
||
}, {
|
||
value: '97',
|
||
label: '97'
|
||
}, {
|
||
value: '99',
|
||
label: '99'
|
||
}, {
|
||
value: '99.5',
|
||
label: '99.5'
|
||
}, {
|
||
value: '99.8',
|
||
label: '99.8'
|
||
}, {
|
||
value: '99.9',
|
||
label: '99.9'
|
||
}, {
|
||
value: '100',
|
||
label: '100'
|
||
}
|
||
],
|
||
selectedValue:'',
|
||
customValue: '',
|
||
Gaddress: ''
|
||
}
|
||
},
|
||
mounted() {
|
||
//该部分是Vue应用封装
|
||
this.Gaddress = localStorage.getItem("Gaddress")
|
||
this.$nextTick(() => {
|
||
window.setTimeout(() => {
|
||
this.getVal();
|
||
}, 1);
|
||
|
||
});
|
||
},
|
||
methods: {
|
||
getVal() {
|
||
axios.get(this.Gaddress + '/MXYZ/getScoreByHj?' + 'lv=' + this.lv).then((res) => {
|
||
// axios.get('http://localhost:8081/MXYZ/getScoreByHj' +'?lv=' + this.lv).then((res) => {
|
||
if (res.data.msg === 'success') {
|
||
const dataVal = res.data.data;
|
||
for (let i = 0; i < 6; i++) {
|
||
const title = this.title[i];
|
||
const legend = this.legend;
|
||
const xAxisData = dataVal[title].map(obj => obj['huan_jie']);
|
||
const seriesData1 = dataVal[title].map(obj => obj['score'])
|
||
const seriesData2 = dataVal[title].map(obj => obj['test_score'])
|
||
this.initEcharts('main'+(i+1),title,legend,xAxisData,seriesData1,seriesData2);
|
||
}
|
||
}
|
||
|
||
|
||
})
|
||
},
|
||
//加载折线图
|
||
initEcharts(refsVal,title,legend,xAxisData,seriesData1,seriesData2) {
|
||
var myChart = echarts.init(this.$refs[refsVal]);
|
||
|
||
var option = {
|
||
title: {
|
||
// text: 'Stacked Line',
|
||
text: title,
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
// data: ['Email', 'Union Ads']
|
||
data: legend
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
toolbox: {
|
||
feature: {
|
||
saveAsImage: {}
|
||
}
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||
data: xAxisData
|
||
},
|
||
yAxis: {
|
||
type: 'value'
|
||
},
|
||
series: [
|
||
{
|
||
name: legend[0],
|
||
type: 'line',
|
||
// stack: 'Total',
|
||
// data: [120, 132, 101, 134, 90, 230, 210]
|
||
data: seriesData1
|
||
},
|
||
{
|
||
name: legend[1],
|
||
type: 'line',
|
||
// stack: 'Total',
|
||
// data: [220, 182, 191, 234, 290, 330, 310]
|
||
data: seriesData2
|
||
},
|
||
]
|
||
};
|
||
myChart.setOption(option)
|
||
myChart.resize();
|
||
},
|
||
|
||
//下拉框值改变
|
||
handleChange() {
|
||
console.log(this.selectedValue);
|
||
this.lv = this.selectedValue;
|
||
this.getVal();
|
||
},
|
||
//input框焦点消失
|
||
handleBlur() {
|
||
console.log(this.customValue);
|
||
if(this.customValue >=0 && this.customValue <=100) {
|
||
this.lv = this.customValue;
|
||
this.getVal();
|
||
}else {
|
||
alert('值的区间在0-100内');
|
||
}
|
||
},
|
||
delOtherVal(res) {
|
||
if(res === 1) {
|
||
this.customValue = '';
|
||
} else {
|
||
this.selectedValue = '';
|
||
}
|
||
}
|
||
}
|
||
})
|
||
///////////////////////////////////////////////////
|
||
|
||
|
||
//加上日志20211109
|
||
function addlog(otype, ocontent, ouser) {
|
||
var curUser = "";
|
||
if (sessionStorage['userName'] != null) {
|
||
curUser = sessionStorage['userName']
|
||
} else {
|
||
curUser = ouser
|
||
}
|
||
|
||
$.get(Gaddress + "/operatelog/addlog?ouser=" + curUser + "&otype=" + otype + "&ocontent=" + ocontent.substring(0, 2500), {})
|
||
.then(function (e) {
|
||
return true
|
||
})
|
||
}
|
||
|
||
|
||
</script>
|
||
|
||
|
||
<style>
|
||
.container {
|
||
width: 100%;
|
||
height: calc(100vh - 50px); /* 50px 是标题的高度 */
|
||
display: flex;
|
||
flex-direction: column;
|
||
position:relative
|
||
}
|
||
|
||
.title {
|
||
text-align: center;
|
||
}
|
||
|
||
.grid {
|
||
flex: 0.8;
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
grid-template-rows: repeat(2, 1fr);
|
||
gap: 10px;
|
||
}
|
||
|
||
.item {
|
||
/*background-color: #b0d9aa;*/
|
||
text-align: center;
|
||
}
|
||
.changelv {
|
||
position: absolute;
|
||
padding-top: 30px;
|
||
margin-left: 80%;
|
||
}
|
||
.inputlv {
|
||
width: 40px;
|
||
height: 20px;
|
||
outline: none;
|
||
position: absolute;
|
||
margin-left: -65px;
|
||
padding-top: 3px;
|
||
background-color: transparent;
|
||
border: none;
|
||
}
|
||
/*当input框text=number时，去掉里面的上下键*/
|
||
input[type=number]::-webkit-inner-spin-button,
|
||
input[type=number]::-webkit-outer-spin-button {
|
||
-webkit-appearance: none;
|
||
margin: 0;
|
||
}
|
||
|
||
input[type=number] {
|
||
-moz-appearance: textfield;
|
||
appearance: textfield;
|
||
}
|
||
|
||
</style>
|