|
|
@@ -1,44 +1,46 @@
|
|
|
<template>
|
|
|
- <div class="chart-container" >
|
|
|
+ <div class="chart-container">
|
|
|
<div class="filter">
|
|
|
<div class="startTime">
|
|
|
- <span class="timeText">起始时间</span>
|
|
|
+ <span class="timeText">{{ this.$t('起始时间') }}</span>
|
|
|
|
|
|
<el-date-picker
|
|
|
v-model="startTime"
|
|
|
:clearable="false"
|
|
|
type="datetime"
|
|
|
value-format="timestamp"
|
|
|
- placeholder="选择日期">
|
|
|
+ :placeholder="this.$t('选择日期')">
|
|
|
</el-date-picker>
|
|
|
</div>
|
|
|
<div class="endTime">
|
|
|
- <span class="timeText">截止时间</span>
|
|
|
+ <span class="timeText">{{ this.$t('截止时间') }}</span>
|
|
|
|
|
|
<el-date-picker
|
|
|
v-model="endTime"
|
|
|
:clearable="false"
|
|
|
type="datetime"
|
|
|
value-format="timestamp"
|
|
|
- placeholder="选择日期">
|
|
|
+ :placeholder="this.$t('选择日期')">
|
|
|
</el-date-picker>
|
|
|
</div>
|
|
|
<div class="timeQuery">
|
|
|
- <el-button size="small" :loading="loading" @click="dateQuery">查询</el-button>
|
|
|
+ <el-button size="small" :loading="loading" @click="dateQuery">{{ this.$t('查询') }}</el-button>
|
|
|
</div>
|
|
|
<div class="timeQuery">
|
|
|
- <el-button size="small" :loading="loading" @click="dialogVisible = true">显示设置</el-button>
|
|
|
+ <el-button size="small" :loading="loading" @click="dialogVisible = true">{{ this.$t('显示设置') }}</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="toolbar">
|
|
|
+ <vxe-toolbar ref="accuracyPassRateToolBar" export></vxe-toolbar>
|
|
|
</div>
|
|
|
- <div class="toolbar"> <vxe-toolbar ref="accuracyPassRateToolBar" export></vxe-toolbar></div>
|
|
|
</div>
|
|
|
|
|
|
<el-dialog
|
|
|
- title="选择数据类型"
|
|
|
+ :title="this.$t('选择数据类型')"
|
|
|
:visible.sync="dialogVisible"
|
|
|
:before-close="this.cancelDisplay"
|
|
|
width="50%">
|
|
|
<div class="drag-box-item">
|
|
|
- <div class="item-title">隐藏</div>
|
|
|
+ <div class="item-title">{{ this.$t('隐藏') }}</div>
|
|
|
<draggable class="list-group" :list="listh" group="people">
|
|
|
<transition-group id="done" tag="div" class="item-ul">
|
|
|
<div
|
|
|
@@ -53,7 +55,7 @@
|
|
|
|
|
|
</div>
|
|
|
<div class="drag-box-item">
|
|
|
- <div class="item-title">展示</div>
|
|
|
+ <div class="item-title">{{ this.$t('展示') }}</div>
|
|
|
|
|
|
<draggable class="list-group" :list="lists" group="people">
|
|
|
<transition-group id="wdtodo" tag="div" class="item-ul">
|
|
|
@@ -68,9 +70,9 @@
|
|
|
</draggable>
|
|
|
</div>
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
- <el-button @click="this.initShow" style="color: #1f2d3d">初始化</el-button>
|
|
|
- <el-button @click="this.cancelDisplay" style="color: #1f2d3d">取 消</el-button>
|
|
|
- <el-button type="primary" style="color: #1f2d3d" @click="this.changeDisplay">确 定</el-button>
|
|
|
+ <el-button @click="this.initShow" style="color: #1f2d3d">{{ this.$t('初始化') }}</el-button>
|
|
|
+ <el-button @click="this.cancelDisplay" style="color: #1f2d3d">{{ this.$t('取 消') }}</el-button>
|
|
|
+ <el-button type="primary" style="color: #1f2d3d" @click="this.changeDisplay">{{ this.$t('确 定') }}</el-button>
|
|
|
</span>
|
|
|
</el-dialog>
|
|
|
|
|
|
@@ -105,8 +107,8 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="display: flex;justify-content:space-around;width: 100%;height: 50%">
|
|
|
- <div class="accuracyPassRate one" id="rtChats"/>
|
|
|
- <div class="accuracyPassRate two" id="statisticsChats"/>
|
|
|
+ <div class="accuracyPassRate one" id="rtChats"/>
|
|
|
+ <div class="accuracyPassRate two" id="statisticsChats"/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -114,1093 +116,1095 @@
|
|
|
|
|
|
<script>
|
|
|
import {mapGetters} from "vuex";
|
|
|
- import resize from '../../../components/Charts/mixins/resize'
|
|
|
- import draggable from 'vuedraggable'
|
|
|
- import echarts from "echarts";
|
|
|
- export default {
|
|
|
- name: 'accuracyPassRate',
|
|
|
- components: {draggable},
|
|
|
- mixins: [resize],
|
|
|
- data(){
|
|
|
- return{
|
|
|
- styleStr:{},
|
|
|
- styleTableStr:{},
|
|
|
- lineColor:'',
|
|
|
- queryStartTime:'',
|
|
|
- queryEndTime:'',
|
|
|
- startTime:'',
|
|
|
- endTime:new Date().getTime()-900000,
|
|
|
- rtStartTime:'',
|
|
|
- rtEndTime:new Date().getTime()-900000,
|
|
|
- loading:true,
|
|
|
- displayConfig:{
|
|
|
- id:"",
|
|
|
- displayCode:"accuracyPassRate",
|
|
|
- showCode:"",
|
|
|
- hiddenCode:""
|
|
|
- },
|
|
|
- showCode:[],
|
|
|
- tableColumn: [],
|
|
|
- total:0,
|
|
|
- sortOrder:'asc',
|
|
|
- pageSize: 10,
|
|
|
- currentPage: 1,
|
|
|
- dialogVisible:false,
|
|
|
- listh: [],
|
|
|
- lists: [],
|
|
|
- listhquery: [],
|
|
|
- listsquery: [],
|
|
|
- tableData:[],
|
|
|
- rpDrawData:{},
|
|
|
- stDrawData:{},
|
|
|
- midAccuracyAVG:"--- ",
|
|
|
- dqAccuracyAVG:"--- ",
|
|
|
- tenDayDqAccuracyAVG:"--- ",
|
|
|
- cdqAccuracyAVG:"--- ",
|
|
|
- midRateValueAVG:"--- ",
|
|
|
- dqRateValueAVG:"--- ",
|
|
|
- cdqRateValueAVG:"--- ",
|
|
|
- chart:null,
|
|
|
- chart2:null,
|
|
|
- markLineData:[],
|
|
|
- province:null
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapGetters([
|
|
|
- 'sysTheme'
|
|
|
- ]),
|
|
|
- },
|
|
|
- created () {
|
|
|
- //获取场站省份
|
|
|
- this.$axios.get("/electricField/").then(response => {
|
|
|
- this.province = response.data.provinceEnum;
|
|
|
- })
|
|
|
+import resize from '../../../components/Charts/mixins/resize'
|
|
|
+import draggable from 'vuedraggable'
|
|
|
+import echarts from "echarts";
|
|
|
|
|
|
- if(this.sysTheme === 'blue'){
|
|
|
- this.styleStr = {background:'black',color:'white',border:'white'}
|
|
|
- this.styleTableStr = {background:'black',color:'white'}
|
|
|
- this.lineColor = 'white'
|
|
|
- }else{
|
|
|
- this.lineColor = '#3b3b3b'
|
|
|
- }
|
|
|
- this.$nextTick(() => {
|
|
|
- // 手动将表格和工具栏进行关联
|
|
|
- this.$refs.accuracyPassRateRef.connect(this.$refs.accuracyPassRateToolBar)
|
|
|
+export default {
|
|
|
+ name: 'accuracyPassRate',
|
|
|
+ components: {draggable},
|
|
|
+ mixins: [resize],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ styleStr: {},
|
|
|
+ styleTableStr: {},
|
|
|
+ lineColor: '',
|
|
|
+ queryStartTime: '',
|
|
|
+ queryEndTime: '',
|
|
|
+ startTime: '',
|
|
|
+ endTime: new Date().getTime() - 900000,
|
|
|
+ rtStartTime: '',
|
|
|
+ rtEndTime: new Date().getTime() - 900000,
|
|
|
+ loading: true,
|
|
|
+ displayConfig: {
|
|
|
+ id: "",
|
|
|
+ displayCode: "accuracyPassRate",
|
|
|
+ showCode: "",
|
|
|
+ hiddenCode: ""
|
|
|
+ },
|
|
|
+ showCode: [],
|
|
|
+ tableColumn: [],
|
|
|
+ total: 0,
|
|
|
+ sortOrder: 'asc',
|
|
|
+ pageSize: 10,
|
|
|
+ currentPage: 1,
|
|
|
+ dialogVisible: false,
|
|
|
+ listh: [],
|
|
|
+ lists: [],
|
|
|
+ listhquery: [],
|
|
|
+ listsquery: [],
|
|
|
+ tableData: [],
|
|
|
+ rpDrawData: {},
|
|
|
+ stDrawData: {},
|
|
|
+ midAccuracyAVG: "--- ",
|
|
|
+ dqAccuracyAVG: "--- ",
|
|
|
+ tenDayDqAccuracyAVG: "--- ",
|
|
|
+ cdqAccuracyAVG: "--- ",
|
|
|
+ midRateValueAVG: "--- ",
|
|
|
+ dqRateValueAVG: "--- ",
|
|
|
+ cdqRateValueAVG: "--- ",
|
|
|
+ chart: null,
|
|
|
+ chart2: null,
|
|
|
+ markLineData: [],
|
|
|
+ province: null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters([
|
|
|
+ 'sysTheme'
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ //获取场站省份
|
|
|
+ this.$axios.get("/electricField/").then(response => {
|
|
|
+ this.province = response.data.provinceEnum;
|
|
|
+ })
|
|
|
+
|
|
|
+ if (this.sysTheme === 'blue') {
|
|
|
+ this.styleStr = {background: 'black', color: 'white', border: 'white'}
|
|
|
+ this.styleTableStr = {background: 'black', color: 'white'}
|
|
|
+ this.lineColor = 'white'
|
|
|
+ } else {
|
|
|
+ this.lineColor = '#3b3b3b'
|
|
|
+ }
|
|
|
+ this.$nextTick(() => {
|
|
|
+ // 手动将表格和工具栏进行关联
|
|
|
+ this.$refs.accuracyPassRateRef.connect(this.$refs.accuracyPassRateToolBar)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.init();
|
|
|
+ window.addEventListener("resize", this.handleResize);
|
|
|
+ window.addEventListener("transitionend", this.handleResize);
|
|
|
+ },
|
|
|
+ destroyListener() {
|
|
|
+ window.removeEventListener('resize', this.handleResize);
|
|
|
+ window.removeEventListener('transitionend', this.handleResize);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initShow() {
|
|
|
+ this.dialogVisible = false
|
|
|
+
|
|
|
+ this.$XModal.confirm(this.$t('您确定要初始化？')).then(type => {
|
|
|
+
|
|
|
+ if (type === 'confirm') {
|
|
|
+ this.$axios.get("displayConfig/updateShowCode").then(res => {
|
|
|
+ if (res.code == 0) {
|
|
|
+ this.$message.success(this.$t("执行成功！"))
|
|
|
+ location.reload()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
})
|
|
|
},
|
|
|
- mounted() {
|
|
|
- this.init();
|
|
|
- window.addEventListener("resize", this.handleResize);
|
|
|
- window.addEventListener("transitionend", this.handleResize);
|
|
|
+ // 图表自适应浏览器窗口大小
|
|
|
+ handleResize() {
|
|
|
+ if (this.chart != null && this.chart != undefined) {
|
|
|
+ this.chart.resize();
|
|
|
+ }
|
|
|
+ if (this.chart2 != null && this.chart != undefined) {
|
|
|
+ this.chart2.resize();
|
|
|
+ }
|
|
|
},
|
|
|
- destroyListener() {
|
|
|
- window.removeEventListener('resize', this.handleResize);
|
|
|
- window.removeEventListener('transitionend', this.handleResize);
|
|
|
+ // 初始化
|
|
|
+ init() {
|
|
|
+ this.startTime = new Date(new Date(this.endTime).setHours(0, 0, 0, 0)).getTime()
|
|
|
+ this.rtStartTime = new Date(new Date(this.rtEndTime).setHours(0, 0, 0, 0)).getTime()
|
|
|
+ this.queryStartTime = this.startTime
|
|
|
+ this.queryEndTime = this.endTime
|
|
|
+ this.loading = true
|
|
|
+ // 获取展示字段并获取表格和图表数据
|
|
|
+ this.getShowCode()
|
|
|
},
|
|
|
- methods:{
|
|
|
- initShow(){
|
|
|
- this.dialogVisible = false
|
|
|
-
|
|
|
- this.$XModal.confirm('您确定要初始化？').then(type => {
|
|
|
-
|
|
|
- if (type === 'confirm') {
|
|
|
- this.$axios.get("displayConfig/updateShowCode").then(res =>{
|
|
|
- if(res.code == 0 ){
|
|
|
- this.$message.success("执行成功！")
|
|
|
- location.reload()
|
|
|
- }
|
|
|
- })
|
|
|
+ // 查询及输入日期校验
|
|
|
+ dateQuery() {
|
|
|
+ this.loading = true
|
|
|
+ if (this.endTime < this.startTime) {
|
|
|
+ this.$message.error(this.$t("开始时间不能大于结束时间"))
|
|
|
+ this.startTime = this.queryStartTime
|
|
|
+ this.endTime = this.queryEndTime
|
|
|
+ this.loading = false
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (this.endTime - this.startTime > 60 * 60 * 24 * 1000 * 31) {
|
|
|
+ this.startTime = this.queryStartTime
|
|
|
+ this.endTime = this.queryEndTime
|
|
|
+ this.$message.error(this.$t("只能最多查询31天的数据哦"))
|
|
|
+ this.loading = false
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.queryStartTime = this.startTime
|
|
|
+ this.queryEndTime = this.endTime
|
|
|
+ // 获取表格和图表数据
|
|
|
+ this.getTable()
|
|
|
+ this.getRealTimeDraw()
|
|
|
+ },
|
|
|
+ // 获取展示内容
|
|
|
+ getShowCode() {
|
|
|
+ this.$axios.get('displayConfig/' + this.displayConfig.displayCode).then((res) => {
|
|
|
+ // 如果displayCode获取成功
|
|
|
+ if (res.data != null) {
|
|
|
+ this.displayConfig = res.data;
|
|
|
+ var showCodes = this.displayConfig.showCode.split(",");
|
|
|
+ var hiddenCodes = this.displayConfig.hiddenCode.split(",");
|
|
|
+ // 循环显示showCode中的字段
|
|
|
+ for (let i = 0; i < showCodes.length; i++) {
|
|
|
+ if (showCodes[i] == "midTermAccuracy") {
|
|
|
+ this.lists.push({key: this.$t('中期准确率'), value: 'midTermAccuracy'});
|
|
|
+ this.listsquery.push({key: this.$t('中期准确率'), value: 'midTermAccuracy'});
|
|
|
+ }
|
|
|
+ if (showCodes[i] == "midTermPassRate") {
|
|
|
+ this.lists.push({key: this.$t('中期合格率'), value: 'midTermPassRate'});
|
|
|
+ this.listsquery.push({key: this.$t('中期合格率'), value: 'midTermPassRate'});
|
|
|
+ }
|
|
|
+ if (showCodes[i] == "shortTermAccuracy") {
|
|
|
+ this.lists.push({key: this.$t('短期准确率'), value: 'shortTermAccuracy'});
|
|
|
+ this.listsquery.push({key: this.$t('短期准确率'), value: 'shortTermAccuracy'});
|
|
|
+ }
|
|
|
+ if (showCodes[i] == "tenDayShortTermAccuracy") {
|
|
|
+ this.lists.push({key: this.$t('短期第十天准确率'), value: 'tenDayShortTermAccuracy'});
|
|
|
+ this.listsquery.push({key: this.$t('短期第十天准确率'), value: 'tenDayShortTermAccuracy'});
|
|
|
+ }
|
|
|
+ if (showCodes[i] == "shortTermPassRate") {
|
|
|
+ this.lists.push({key: this.$t('短期合格率'), value: 'shortTermPassRate'});
|
|
|
+ this.listsquery.push({key: this.$t('短期合格率'), value: 'shortTermPassRate'});
|
|
|
+ }
|
|
|
+ if (showCodes[i] == "ultraShortTermAccuracy") {
|
|
|
+ this.lists.push({key: this.$t('超短期准确率'), value: 'ultraShortTermAccuracy'});
|
|
|
+ this.listsquery.push({key: this.$t('超短期准确率'), value: 'ultraShortTermAccuracy'});
|
|
|
+ }
|
|
|
+ if (showCodes[i] == "ultraShortTermPassRate") {
|
|
|
+ this.lists.push({key: this.$t('超短期合格率'), value: 'ultraShortTermPassRate'});
|
|
|
+ this.listsquery.push({key: this.$t('超短期合格率'), value: 'ultraShortTermPassRate'});
|
|
|
+ }
|
|
|
}
|
|
|
- })
|
|
|
- },
|
|
|
- // 图表自适应浏览器窗口大小
|
|
|
- handleResize(){
|
|
|
- if(this.chart!=null && this.chart!=undefined){
|
|
|
- this.chart.resize();
|
|
|
- }
|
|
|
- if(this.chart2!=null && this.chart!=undefined){
|
|
|
- this.chart2.resize();
|
|
|
- }
|
|
|
- },
|
|
|
- // 初始化
|
|
|
- init(){
|
|
|
- this.startTime=new Date(new Date(this.endTime).setHours(0, 0, 0, 0)).getTime()
|
|
|
- this.rtStartTime=new Date(new Date(this.rtEndTime).setHours(0, 0, 0, 0)).getTime()
|
|
|
- this.queryStartTime = this.startTime
|
|
|
- this.queryEndTime = this.endTime
|
|
|
- this.loading = true
|
|
|
- // 获取展示字段并获取表格和图表数据
|
|
|
- this.getShowCode()
|
|
|
- },
|
|
|
- // 查询及输入日期校验
|
|
|
- dateQuery(){
|
|
|
- this.loading = true
|
|
|
- if(this.endTime<this.startTime){
|
|
|
- this.$message.error("开始时间不能大于结束时间")
|
|
|
- this.startTime = this.queryStartTime
|
|
|
- this.endTime = this.queryEndTime
|
|
|
- this.loading = false
|
|
|
- return
|
|
|
- }
|
|
|
- if(this.endTime-this.startTime> 60 * 60 * 24 * 1000*31){
|
|
|
- this.startTime = this.queryStartTime
|
|
|
- this.endTime = this.queryEndTime
|
|
|
- this.$message.error("只能最多查询31天的数据哦")
|
|
|
- this.loading = false
|
|
|
- return
|
|
|
- }
|
|
|
- this.queryStartTime = this.startTime
|
|
|
- this.queryEndTime = this.endTime
|
|
|
- // 获取表格和图表数据
|
|
|
- this.getTable()
|
|
|
- this.getRealTimeDraw()
|
|
|
- },
|
|
|
- // 获取展示内容
|
|
|
- getShowCode(){
|
|
|
- this.$axios.get('displayConfig/'+this.displayConfig.displayCode).then((res) => {
|
|
|
- // 如果displayCode获取成功
|
|
|
- if(res.data != null){
|
|
|
- this.displayConfig = res.data;
|
|
|
- var showCodes = this.displayConfig.showCode.split(",");
|
|
|
- var hiddenCodes = this.displayConfig.hiddenCode.split(",");
|
|
|
- // 循环显示showCode中的字段
|
|
|
- for (let i = 0; i <showCodes.length ; i++) {
|
|
|
- if(showCodes[i] == "midTermAccuracy" ){
|
|
|
- this.lists.push({key:'中期准确率',value:'midTermAccuracy'});
|
|
|
- this.listsquery.push({key:'中期准确率',value:'midTermAccuracy'});
|
|
|
- }
|
|
|
- if(showCodes[i] == "midTermPassRate" ){
|
|
|
- this.lists.push({key:'中期合格率',value:'midTermPassRate'});
|
|
|
- this.listsquery.push({key:'中期合格率',value:'midTermPassRate'});
|
|
|
- }
|
|
|
- if(showCodes[i] == "shortTermAccuracy" ){
|
|
|
- this.lists.push({key:'短期准确率',value:'shortTermAccuracy'});
|
|
|
- this.listsquery.push({key:'短期准确率',value:'shortTermAccuracy'});
|
|
|
- }
|
|
|
- if(showCodes[i] == "tenDayShortTermAccuracy" ){
|
|
|
- this.lists.push({key:'短期第十天准确率',value:'tenDayShortTermAccuracy'});
|
|
|
- this.listsquery.push({key:'短期第十天准确率',value:'tenDayShortTermAccuracy'});
|
|
|
- }
|
|
|
- if(showCodes[i] == "shortTermPassRate" ){
|
|
|
- this.lists.push({key:'短期合格率',value:'shortTermPassRate'});
|
|
|
- this.listsquery.push({key:'短期合格率',value:'shortTermPassRate'});
|
|
|
- }
|
|
|
- if(showCodes[i] == "ultraShortTermAccuracy" ){
|
|
|
- this.lists.push({key:'超短期准确率',value:'ultraShortTermAccuracy'});
|
|
|
- this.listsquery.push({key:'超短期准确率',value:'ultraShortTermAccuracy'});
|
|
|
- }
|
|
|
- if(showCodes[i] == "ultraShortTermPassRate" ){
|
|
|
- this.lists.push({key:'超短期合格率',value:'ultraShortTermPassRate'});
|
|
|
- this.listsquery.push({key:'超短期合格率',value:'ultraShortTermPassRate'});
|
|
|
- }
|
|
|
+ // 循环显示hiddenCode中的字段
|
|
|
+ for (let i = 0; i < hiddenCodes.length; i++) {
|
|
|
+ if (hiddenCodes[i] == "midTermAccuracy") {
|
|
|
+ this.listh.push({key: this.$t('中期准确率'), value: 'midTermAccuracy'})
|
|
|
+ this.listhquery.push({key: this.$t('中期准确率'), value: 'midTermAccuracy'})
|
|
|
}
|
|
|
- // 循环显示hiddenCode中的字段
|
|
|
- for (let i = 0; i <hiddenCodes.length ; i++) {
|
|
|
- if(hiddenCodes[i] == "midTermAccuracy" ){
|
|
|
- this.listh.push({key:'中期准确率',value:'midTermAccuracy'})
|
|
|
- this.listhquery.push({key:'中期准确率',value:'midTermAccuracy'})
|
|
|
- }
|
|
|
- if(hiddenCodes[i] == "midTermPassRate" ){
|
|
|
- this.listh.push({key:'中期合格率',value:'midTermPassRate'})
|
|
|
- this.listhquery.push({key:'中期合格率',value:'midTermPassRate'})
|
|
|
- }
|
|
|
- if(hiddenCodes[i] == "shortTermAccuracy" ){
|
|
|
- this.listh.push({key:'短期准确率',value:'shortTermAccuracy'})
|
|
|
- this.listhquery.push({key:'短期准确率',value:'shortTermAccuracy'})
|
|
|
- }
|
|
|
- if(showCodes[i] == "tenDayShortTermAccuracy" ){
|
|
|
- this.listh.push({key:'短期第十天准确率',value:'tenDayShortTermAccuracy'});
|
|
|
- this.listhquery.push({key:'短期第十天准确率',value:'tenDayShortTermAccuracy'});
|
|
|
- }
|
|
|
- if(hiddenCodes[i] == "shortTermPassRate" ){
|
|
|
- this.listh.push({key:'短期合格率',value:'shortTermPassRate'})
|
|
|
- this.listhquery.push({key:'短期合格率',value:'shortTermPassRate'})
|
|
|
- }
|
|
|
- if(hiddenCodes[i] == "ultraShortTermAccuracy" ){
|
|
|
- this.listh.push({key:'超短期准确率',value:'ultraShortTermAccuracy'})
|
|
|
- this.listhquery.push({key:'超短期准确率',value:'ultraShortTermAccuracy'})
|
|
|
- }
|
|
|
- if(hiddenCodes[i] == "ultraShortTermPassRate" ){
|
|
|
- this.listh.push({key:'超短期合格率',value:'ultraShortTermPassRate'})
|
|
|
- this.listhquery.push({key:'超短期合格率',value:'ultraShortTermPassRate'})
|
|
|
- }
|
|
|
+ if (hiddenCodes[i] == "midTermPassRate") {
|
|
|
+ this.listh.push({key: this.$t('中期合格率'), value: 'midTermPassRate'})
|
|
|
+ this.listhquery.push({key: this.$t('中期合格率'), value: 'midTermPassRate'})
|
|
|
+ }
|
|
|
+ if (hiddenCodes[i] == "shortTermAccuracy") {
|
|
|
+ this.listh.push({key: this.$t('短期准确率'), value: 'shortTermAccuracy'})
|
|
|
+ this.listhquery.push({key: this.$t('短期准确率'), value: 'shortTermAccuracy'})
|
|
|
+ }
|
|
|
+ if (showCodes[i] == "tenDayShortTermAccuracy") {
|
|
|
+ this.listh.push({key: this.$t('短期第十天准确率'), value: 'tenDayShortTermAccuracy'});
|
|
|
+ this.listhquery.push({key: this.$t('短期第十天准确率'), value: 'tenDayShortTermAccuracy'});
|
|
|
+ }
|
|
|
+ if (hiddenCodes[i] == "shortTermPassRate") {
|
|
|
+ this.listh.push({key: this.$t('短期合格率'), value: 'shortTermPassRate'})
|
|
|
+ this.listhquery.push({key: this.$t('短期合格率'), value: 'shortTermPassRate'})
|
|
|
+ }
|
|
|
+ if (hiddenCodes[i] == "ultraShortTermAccuracy") {
|
|
|
+ this.listh.push({key: this.$t('超短期准确率'), value: 'ultraShortTermAccuracy'})
|
|
|
+ this.listhquery.push({key: this.$t('超短期准确率'), value: 'ultraShortTermAccuracy'})
|
|
|
}
|
|
|
- // 获取表格和图表数据
|
|
|
- this.getTable();
|
|
|
- this.getRealTimeDraw();
|
|
|
+ if (hiddenCodes[i] == "ultraShortTermPassRate") {
|
|
|
+ this.listh.push({key: this.$t('超短期合格率'), value: 'ultraShortTermPassRate'})
|
|
|
+ this.listhquery.push({key: this.$t('超短期合格率'), value: 'ultraShortTermPassRate'})
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 获取表格和图表数据
|
|
|
+ this.getTable();
|
|
|
+ this.getRealTimeDraw();
|
|
|
// 如果displayCode获取失败
|
|
|
- }else{
|
|
|
- this.displayConfig.showCode="midTermAccuracy,midTermPassRate,shortTermAccuracy,tenDayShortTermAccuracy,shortTermPassRate,ultraShortTermAccuracy,ultraShortTermPassRate"
|
|
|
- this.displayConfig.hiddenCode=""
|
|
|
- this.displayConfig.displayCode="accuracyPassRate"
|
|
|
-
|
|
|
- this.lists.push({key:'中期准确率',value:'midTermAccuracy'})
|
|
|
- this.lists.push({key:'中期合格率',value:'midTermPassRate'})
|
|
|
- this.lists.push({key:'短期准确率',value:'shortTermAccuracy'})
|
|
|
- this.lists.push({key:'短期第十天准确率',value:'tenDayShortTermAccuracy'})
|
|
|
- this.lists.push({key:'短期合格率',value:'shortTermPassRate'})
|
|
|
- this.lists.push({key:'超短期准确率',value:'ultraShortTermAccuracy'})
|
|
|
- this.lists.push({key:'超短期合格率',value:'ultraShortTermPassRate'})
|
|
|
+ } else {
|
|
|
+ this.displayConfig.showCode = "midTermAccuracy,midTermPassRate,shortTermAccuracy,tenDayShortTermAccuracy,shortTermPassRate,ultraShortTermAccuracy,ultraShortTermPassRate"
|
|
|
+ this.displayConfig.hiddenCode = ""
|
|
|
+ this.displayConfig.displayCode = "accuracyPassRate"
|
|
|
|
|
|
- this.$axios.post('/displayConfig',this.displayConfig).then((res) => {
|
|
|
- this.$message.success('展示设置成功')
|
|
|
- this.displayConfig = res.data
|
|
|
- }).catch((error) => {
|
|
|
- this.$message.error('展示设置出错' + error)
|
|
|
- })
|
|
|
- // 获取表格和图表数据
|
|
|
- this.getTable()
|
|
|
- this.getRealTimeDraw()
|
|
|
- }
|
|
|
- this.loading = false
|
|
|
- }).catch((error) => {
|
|
|
- this.loading = false
|
|
|
- this.$message.error('查询准确率table出错' + error)
|
|
|
- })
|
|
|
- },
|
|
|
- // 修改显示内容
|
|
|
- changeDisplay() {
|
|
|
- this.displayConfig.showCode = ""
|
|
|
- this.displayConfig.hiddenCode = ""
|
|
|
- this.listsquery = []
|
|
|
- this.listhquery = []
|
|
|
- for (var i = 0; i < this.listh.length; i++) {
|
|
|
- this.listhquery.push(this.listh[i])
|
|
|
- }
|
|
|
- for (var i = 0; i < this.lists.length; i++) {
|
|
|
- this.listsquery.push(this.lists[i])
|
|
|
- }
|
|
|
- for (var i = 0; i < this.listsquery.length; i++) {
|
|
|
- this.displayConfig.showCode += this.listsquery[i].value + ","
|
|
|
- }
|
|
|
- for (var i = 0; i < this.listhquery.length; i++) {
|
|
|
- this.displayConfig.hiddenCode += this.listhquery[i].value + ","
|
|
|
- }
|
|
|
- this.$axios.post('displayConfig/', this.displayConfig).then((res) => {
|
|
|
- this.displayConfig = res.data
|
|
|
- this.$message.success('展示设置成功')
|
|
|
- this.dialogVisible = false
|
|
|
- }).catch((error) => {
|
|
|
- this.$message.error('展示设置出错' + error)
|
|
|
- });
|
|
|
- // 获取表格和图表数据
|
|
|
- this.getTable();
|
|
|
- this.getRealTimeDraw();
|
|
|
- },
|
|
|
+ this.lists.push({key: this.$t('中期准确率'), value: 'midTermAccuracy'})
|
|
|
+ this.lists.push({key: this.$t('中期合格率'), value: 'midTermPassRate'})
|
|
|
+ this.lists.push({key: this.$t('短期准确率'), value: 'shortTermAccuracy'})
|
|
|
+ this.lists.push({key: this.$t('短期第十天准确率'), value: 'tenDayShortTermAccuracy'})
|
|
|
+ this.lists.push({key: this.$t('短期合格率'), value: 'shortTermPassRate'})
|
|
|
+ this.lists.push({key: this.$t('超短期准确率'), value: 'ultraShortTermAccuracy'})
|
|
|
+ this.lists.push({key: this.$t('超短期合格率'), value: 'ultraShortTermPassRate'})
|
|
|
|
|
|
- cancelDisplay(){
|
|
|
- this.lists=[]
|
|
|
- this.listh=[]
|
|
|
- for(var i = 0;i<this.listhquery.length;i++){
|
|
|
- this.listh.push(this.listhquery[i])
|
|
|
- }
|
|
|
- for(var i = 0;i<this.listsquery.length;i++){
|
|
|
- this.lists.push(this.listsquery[i])
|
|
|
+ this.$axios.post('/displayConfig', this.displayConfig).then((res) => {
|
|
|
+ this.$message.success(this.$t('展示设置成功'))
|
|
|
+ this.displayConfig = res.data
|
|
|
+ }).catch((error) => {
|
|
|
+ this.$message.error(this.$t('展示设置出错') + error)
|
|
|
+ })
|
|
|
+ // 获取表格和图表数据
|
|
|
+ this.getTable()
|
|
|
+ this.getRealTimeDraw()
|
|
|
}
|
|
|
+ this.loading = false
|
|
|
+ }).catch((error) => {
|
|
|
+ this.loading = false
|
|
|
+ this.$message.error(this.$t('查询准确率table出错') + error)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 修改显示内容
|
|
|
+ changeDisplay() {
|
|
|
+ this.displayConfig.showCode = ""
|
|
|
+ this.displayConfig.hiddenCode = ""
|
|
|
+ this.listsquery = []
|
|
|
+ this.listhquery = []
|
|
|
+ for (var i = 0; i < this.listh.length; i++) {
|
|
|
+ this.listhquery.push(this.listh[i])
|
|
|
+ }
|
|
|
+ for (var i = 0; i < this.lists.length; i++) {
|
|
|
+ this.listsquery.push(this.lists[i])
|
|
|
+ }
|
|
|
+ for (var i = 0; i < this.listsquery.length; i++) {
|
|
|
+ this.displayConfig.showCode += this.listsquery[i].value + ","
|
|
|
+ }
|
|
|
+ for (var i = 0; i < this.listhquery.length; i++) {
|
|
|
+ this.displayConfig.hiddenCode += this.listhquery[i].value + ","
|
|
|
+ }
|
|
|
+ this.$axios.post('displayConfig/', this.displayConfig).then((res) => {
|
|
|
+ this.displayConfig = res.data
|
|
|
+ this.$message.success(this.$t('展示设置成功'))
|
|
|
this.dialogVisible = false
|
|
|
- },
|
|
|
+ }).catch((error) => {
|
|
|
+ this.$message.error(this.$t('展示设置出错') + error)
|
|
|
+ });
|
|
|
+ // 获取表格和图表数据
|
|
|
+ this.getTable();
|
|
|
+ this.getRealTimeDraw();
|
|
|
+ },
|
|
|
|
|
|
- // 获取表格内容和平均统计值内容并渲染
|
|
|
- getTable(){
|
|
|
- let showCode;
|
|
|
- if(this.displayConfig.showCode == null || this.displayConfig.showCode==""){
|
|
|
- showCode = "null";
|
|
|
- }else{
|
|
|
- showCode = this.displayConfig.showCode;
|
|
|
- }
|
|
|
- this.$axios.get('/accuracyPassRate/table/day/'+this.queryStartTime+'/'+this.queryEndTime+'/'+showCode+'/'+this.sortOrder).then((res) => {
|
|
|
- this.tableData = res.data.content;
|
|
|
- this.total = this.tableData.length;
|
|
|
- this.currentPage = 1;
|
|
|
- this.stDrawData = res.data.charts;
|
|
|
- for(var key in this.stDrawData){
|
|
|
- if(key != "times" && key !="accuracyRate"){
|
|
|
- var sum = 0;
|
|
|
- var total =0;
|
|
|
- for (let i = 0; i < this.stDrawData[key].length; i++) {
|
|
|
- if(this.stDrawData[key][i]!=null){
|
|
|
- this.stDrawData[key][i] = parseFloat(this.stDrawData[key][i])
|
|
|
- sum+=this.stDrawData[key][i]
|
|
|
- total+=1;
|
|
|
- }
|
|
|
- }
|
|
|
- if(key =='midTermAccuracy' && total!=0 ){
|
|
|
- this.midAccuracyAVG = (sum/total).toFixed(2)+" "
|
|
|
- }
|
|
|
- if(key =='midTermPassRate' && total!=0 ){
|
|
|
- this.midRateValueAVG =(sum/total).toFixed(2)+" "
|
|
|
- }
|
|
|
- if(key =='shortTermAccuracy' && total!=0 ){
|
|
|
- this.dqAccuracyAVG = (sum/total).toFixed(2)+" "
|
|
|
- }
|
|
|
- if(key =='tenDayShortTermAccuracy' && total!=0 ){
|
|
|
- this.tenDayDqAccuracyAVG = (sum/total).toFixed(2)+" "
|
|
|
- }
|
|
|
- if(key =='shortTermPassRate' && total!=0 ){
|
|
|
- this.dqRateValueAVG =(sum/total).toFixed(2)+" "
|
|
|
- }
|
|
|
- if(key =='ultraShortTermAccuracy' && total!=0 ){
|
|
|
- this.cdqAccuracyAVG = (sum/total).toFixed(2)+" "
|
|
|
- }
|
|
|
- if(key =='ultraShortTermPassRate' && total!=0 ){
|
|
|
- this.cdqRateValueAVG = (sum/total).toFixed(2)+" "
|
|
|
+ cancelDisplay() {
|
|
|
+ this.lists = []
|
|
|
+ this.listh = []
|
|
|
+ for (var i = 0; i < this.listhquery.length; i++) {
|
|
|
+ this.listh.push(this.listhquery[i])
|
|
|
+ }
|
|
|
+ for (var i = 0; i < this.listsquery.length; i++) {
|
|
|
+ this.lists.push(this.listsquery[i])
|
|
|
+ }
|
|
|
+ this.dialogVisible = false
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取表格内容和平均统计值内容并渲染
|
|
|
+ getTable() {
|
|
|
+ let showCode;
|
|
|
+ if (this.displayConfig.showCode == null || this.displayConfig.showCode == "") {
|
|
|
+ showCode = "null";
|
|
|
+ } else {
|
|
|
+ showCode = this.displayConfig.showCode;
|
|
|
+ }
|
|
|
+ this.$axios.get('/accuracyPassRate/table/day/' + this.queryStartTime + '/' + this.queryEndTime + '/' + showCode + '/' + this.sortOrder).then((res) => {
|
|
|
+ this.tableData = res.data.content;
|
|
|
+ this.total = this.tableData.length;
|
|
|
+ this.currentPage = 1;
|
|
|
+ this.stDrawData = res.data.charts;
|
|
|
+ for (var key in this.stDrawData) {
|
|
|
+ if (key != "times" && key != "accuracyRate") {
|
|
|
+ var sum = 0;
|
|
|
+ var total = 0;
|
|
|
+ for (let i = 0; i < this.stDrawData[key].length; i++) {
|
|
|
+ if (this.stDrawData[key][i] != null) {
|
|
|
+ this.stDrawData[key][i] = parseFloat(this.stDrawData[key][i])
|
|
|
+ sum += this.stDrawData[key][i]
|
|
|
+ total += 1;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- // 平均统计值
|
|
|
- this.statisticsDraw(this.stDrawData)
|
|
|
- // 表分页格数据总条数
|
|
|
- this.tableColumn = [
|
|
|
- { field: 'time', title: '时间', width:200},
|
|
|
- ]
|
|
|
- for(let i = 0;i<this.listsquery.length;i++){
|
|
|
- var colunm = {
|
|
|
- field:this.listsquery[i].value , title: this.listsquery[i].key
|
|
|
+ if (key == 'midTermAccuracy' && total != 0) {
|
|
|
+ this.midAccuracyAVG = (sum / total).toFixed(2) + " "
|
|
|
+ }
|
|
|
+ if (key == 'midTermPassRate' && total != 0) {
|
|
|
+ this.midRateValueAVG = (sum / total).toFixed(2) + " "
|
|
|
+ }
|
|
|
+ if (key == 'shortTermAccuracy' && total != 0) {
|
|
|
+ this.dqAccuracyAVG = (sum / total).toFixed(2) + " "
|
|
|
+ }
|
|
|
+ if (key == 'tenDayShortTermAccuracy' && total != 0) {
|
|
|
+ this.tenDayDqAccuracyAVG = (sum / total).toFixed(2) + " "
|
|
|
+ }
|
|
|
+ if (key == 'shortTermPassRate' && total != 0) {
|
|
|
+ this.dqRateValueAVG = (sum / total).toFixed(2) + " "
|
|
|
+ }
|
|
|
+ if (key == 'ultraShortTermAccuracy' && total != 0) {
|
|
|
+ this.cdqAccuracyAVG = (sum / total).toFixed(2) + " "
|
|
|
+ }
|
|
|
+ if (key == 'ultraShortTermPassRate' && total != 0) {
|
|
|
+ this.cdqRateValueAVG = (sum / total).toFixed(2) + " "
|
|
|
}
|
|
|
- this.tableColumn.push(colunm)
|
|
|
}
|
|
|
- this.loading = false
|
|
|
- }).catch((error) => {
|
|
|
- this.loading = false
|
|
|
- this.$message.error('查询准确率table出错' + error)
|
|
|
- })
|
|
|
- },
|
|
|
- // 获取实时数据
|
|
|
- getRealTimeDraw(){
|
|
|
- let showCode;
|
|
|
- if(this.displayConfig.showCode == null || this.displayConfig.showCode==""){
|
|
|
- showCode = "null";
|
|
|
- }else{
|
|
|
- showCode = this.displayConfig.showCode;
|
|
|
}
|
|
|
- this.$axios.get('/accuracyPassRate/realTimeCharts/day/'+this.rtStartTime+'/'+this.rtEndTime+'/'+showCode).then((res) => {
|
|
|
- this.rpDrawData = res.data;
|
|
|
+ // 平均统计值
|
|
|
+ this.statisticsDraw(this.stDrawData)
|
|
|
+ // 表分页格数据总条数
|
|
|
+ this.tableColumn = [
|
|
|
+ {field: 'time', title: this.$t('时间'), width: 200},
|
|
|
+ ]
|
|
|
+ for (let i = 0; i < this.listsquery.length; i++) {
|
|
|
+ var colunm = {
|
|
|
+ field: this.listsquery[i].value, title: this.listsquery[i].key
|
|
|
+ }
|
|
|
+ this.tableColumn.push(colunm)
|
|
|
+ }
|
|
|
+ this.loading = false
|
|
|
+ }).catch((error) => {
|
|
|
+ this.loading = false
|
|
|
+ this.$message.error(this.$t('查询准确率table出错') + error)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取实时数据
|
|
|
+ getRealTimeDraw() {
|
|
|
+ let showCode;
|
|
|
+ if (this.displayConfig.showCode == null || this.displayConfig.showCode == "") {
|
|
|
+ showCode = "null";
|
|
|
+ } else {
|
|
|
+ showCode = this.displayConfig.showCode;
|
|
|
+ }
|
|
|
+ this.$axios.get('/accuracyPassRate/realTimeCharts/day/' + this.rtStartTime + '/' + this.rtEndTime + '/' + showCode).then((res) => {
|
|
|
+ this.rpDrawData = res.data;
|
|
|
|
|
|
- for(var key in this.rpDrawData){
|
|
|
- if(key != "times" && key !="accuracyRate"){
|
|
|
- for (let i = 0; i < this.rpDrawData[key].length; i++) {
|
|
|
- if(this.rpDrawData[key][i]!=null){
|
|
|
- this.rpDrawData[key][i] = parseFloat(this.rpDrawData[key][i])
|
|
|
- }
|
|
|
+ for (var key in this.rpDrawData) {
|
|
|
+ if (key != "times" && key != "accuracyRate") {
|
|
|
+ for (let i = 0; i < this.rpDrawData[key].length; i++) {
|
|
|
+ if (this.rpDrawData[key][i] != null) {
|
|
|
+ this.rpDrawData[key][i] = parseFloat(this.rpDrawData[key][i])
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
- this.realTimeDraw(this.rpDrawData)
|
|
|
- })
|
|
|
- },
|
|
|
- handlePageChange ({ currentPage, pageSize }) {
|
|
|
- this.currentPage = currentPage
|
|
|
- this.pageSize = pageSize
|
|
|
- this.startTime = this.queryStartTime
|
|
|
- this.endTime = this.queryEndTime
|
|
|
+ this.realTimeDraw(this.rpDrawData)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handlePageChange({currentPage, pageSize}) {
|
|
|
+ this.currentPage = currentPage
|
|
|
+ this.pageSize = pageSize
|
|
|
+ this.startTime = this.queryStartTime
|
|
|
+ this.endTime = this.queryEndTime
|
|
|
|
|
|
- },
|
|
|
+ },
|
|
|
|
|
|
- realTimeDraw(data) {
|
|
|
- // 如果是南网，则不显示准确率阈值红线,否则显示
|
|
|
- if(this.province=="E44" ||this.province=="E45" ||this.province=="E46" ||this.province=="E52" ||this.province=="E53" ){
|
|
|
- this.markLineData = [];
|
|
|
- }else {
|
|
|
- this.markLineData = [{
|
|
|
- label:{
|
|
|
- position:'end',
|
|
|
- formatter:"准确率"
|
|
|
- },
|
|
|
- yAxis: data.accuracyRate.split(',')[0]
|
|
|
+ realTimeDraw(data) {
|
|
|
+ // 如果是南网，则不显示准确率阈值红线,否则显示
|
|
|
+ if (this.province == "E44" || this.province == "E45" || this.province == "E46" || this.province == "E52" || this.province == "E53") {
|
|
|
+ this.markLineData = [];
|
|
|
+ } else {
|
|
|
+ this.markLineData = [{
|
|
|
+ label: {
|
|
|
+ position: 'end',
|
|
|
+ formatter: this.$t("准确率")
|
|
|
},
|
|
|
- {
|
|
|
- label:{
|
|
|
- position:'end',
|
|
|
- formatter:"合格率"
|
|
|
- },
|
|
|
- yAxis: data.accuracyRate.split(',')[1]
|
|
|
- }]
|
|
|
- }
|
|
|
-
|
|
|
- var lastindex = data.times.length-1
|
|
|
- this.chart = echarts.init(document.getElementById('rtChats'))
|
|
|
- var option = {
|
|
|
- title: {
|
|
|
- text: '实时 ',
|
|
|
- subtext: data.times[0]+'-'+data.times[lastindex],
|
|
|
- textStyle: {
|
|
|
- fontWeight: 'normal',
|
|
|
- fontSize: 16,
|
|
|
- color: this.lineColor
|
|
|
+ yAxis: data.accuracyRate.split(',')[0]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: {
|
|
|
+ position: 'end',
|
|
|
+ formatter: this.$t("合格率")
|
|
|
},
|
|
|
- left: '1%'
|
|
|
+ yAxis: data.accuracyRate.split(',')[1]
|
|
|
+ }]
|
|
|
+ }
|
|
|
+
|
|
|
+ var lastindex = data.times.length - 1
|
|
|
+ this.chart = echarts.init(document.getElementById('rtChats'))
|
|
|
+ var option = {
|
|
|
+ title: {
|
|
|
+ text: this.$t('实时 '),
|
|
|
+ subtext: data.times[0] + '-' + data.times[lastindex],
|
|
|
+ textStyle: {
|
|
|
+ fontWeight: 'normal',
|
|
|
+ fontSize: 16,
|
|
|
+ color: this.lineColor
|
|
|
},
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- axisPointer: {
|
|
|
- lineStyle: {
|
|
|
- color: '#57617B'
|
|
|
- }
|
|
|
+ left: '1%'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#57617B'
|
|
|
}
|
|
|
- },
|
|
|
- legend: {
|
|
|
- top: 25,
|
|
|
- icon: 'rect',
|
|
|
- itemWidth: 14,
|
|
|
- itemHeight: 5,
|
|
|
- itemGap: 13,
|
|
|
- data: [],
|
|
|
- right: '2%',
|
|
|
- textStyle: {
|
|
|
- fontSize: 12,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ top: 25,
|
|
|
+ icon: 'rect',
|
|
|
+ itemWidth: 14,
|
|
|
+ itemHeight: 5,
|
|
|
+ itemGap: 13,
|
|
|
+ data: [],
|
|
|
+ right: '2%',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 12,
|
|
|
+ color: this.lineColor
|
|
|
+ }
|
|
|
+ },
|
|
|
+ dataZoom: [{
|
|
|
+ show: true,
|
|
|
+ realtime: true,
|
|
|
+ start: 0,
|
|
|
+ end: 100,
|
|
|
+ left: "15%",
|
|
|
+ right: "15%",
|
|
|
+ textStyle: {
|
|
|
+ color: this.lineColor
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'inside'
|
|
|
+ }],
|
|
|
+ grid: {
|
|
|
+ top: 100,
|
|
|
+ left: '2%',
|
|
|
+ right: '5%',
|
|
|
+ bottom: '10%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: data.times,
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
color: this.lineColor
|
|
|
}
|
|
|
- },
|
|
|
- dataZoom: [{
|
|
|
- show: true,
|
|
|
- realtime: true,
|
|
|
- start: 0,
|
|
|
- end: 100,
|
|
|
- left: "15%",
|
|
|
- right: "15%",
|
|
|
- textStyle: {
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ name: '(%)',
|
|
|
+ max: 100,
|
|
|
+ min: 0,
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
color: this.lineColor
|
|
|
}
|
|
|
},
|
|
|
- {
|
|
|
- type: 'inside'
|
|
|
- }],
|
|
|
- grid: {
|
|
|
- top: 100,
|
|
|
- left: '2%',
|
|
|
- right: '5%',
|
|
|
- bottom: '10%',
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- boundaryGap: false,
|
|
|
- data: data.times,
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: this.lineColor
|
|
|
- }
|
|
|
+ axisLabel: {
|
|
|
+ margin: 10,
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 14
|
|
|
}
|
|
|
},
|
|
|
- yAxis: {
|
|
|
- type: 'value',
|
|
|
- name: '(%)',
|
|
|
- max: 100,
|
|
|
- min: 0,
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: this.lineColor
|
|
|
- }
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- margin: 10,
|
|
|
- textStyle: {
|
|
|
- fontSize: 14
|
|
|
- }
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- lineStyle: {
|
|
|
- color: '#57617B'
|
|
|
- }
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#57617B'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: []
|
|
|
+ };
|
|
|
+ var optionTitleText = "";
|
|
|
+ if (data.midTermAccuracy != undefined) {
|
|
|
+ optionTitleText += this.$t('中期准确率') + ':' + ((data.midTermAccuracy[lastindex] == null || isNaN(data.midTermAccuracy[lastindex])) ? "--- " : data.midTermAccuracy[lastindex] + " ")
|
|
|
+ option.series.push({
|
|
|
+ name: this.$t('中期准确率'),
|
|
|
+ type: 'line',
|
|
|
+ showSymbol: false,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+
|
|
|
+ color: '#df13ee',
|
|
|
+ borderColor: 'rgba(50,194,219,0.2)',
|
|
|
+ borderWidth: 12
|
|
|
}
|
|
|
},
|
|
|
- series: []
|
|
|
- };
|
|
|
- var optionTitleText = "";
|
|
|
- if(data.midTermAccuracy != undefined){
|
|
|
- optionTitleText+='中期准确率:'+((data.midTermAccuracy[lastindex] == null || isNaN(data.midTermAccuracy[lastindex])) ? "--- ":data.midTermAccuracy[lastindex]+" ")
|
|
|
- option.series.push({
|
|
|
- name: '中期准确率',
|
|
|
- type: 'line',
|
|
|
- showSymbol: false,
|
|
|
+ markLine: {
|
|
|
+ silent: true,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
-
|
|
|
- color: '#df13ee',
|
|
|
- borderColor: 'rgba(50,194,219,0.2)',
|
|
|
- borderWidth: 12
|
|
|
+ show: true,
|
|
|
+ color: 'red'
|
|
|
}
|
|
|
},
|
|
|
- markLine: {
|
|
|
- silent: true,
|
|
|
- itemStyle:{
|
|
|
- normal:{
|
|
|
- show:true,
|
|
|
- color:'red'
|
|
|
- }
|
|
|
- },
|
|
|
- data: this.markLineData
|
|
|
- },
|
|
|
- data: data.midTermAccuracy
|
|
|
- })
|
|
|
- option.legend.data.push('中期准确率')
|
|
|
- }
|
|
|
- if(data.midTermPassRate != undefined){
|
|
|
- optionTitleText+= '中期合格率:'+((data.midTermPassRate[lastindex] == null || isNaN(data.midTermPassRate[lastindex])) ? "--- ":data.midTermPassRate[lastindex]+" ")
|
|
|
- option.series.push({
|
|
|
- name: '中期合格率',
|
|
|
- type: 'line',
|
|
|
- showSymbol: false,
|
|
|
+ data: this.markLineData
|
|
|
+ },
|
|
|
+ data: data.midTermAccuracy
|
|
|
+ })
|
|
|
+ option.legend.data.push(this.$t('中期准确率'))
|
|
|
+ }
|
|
|
+ if (data.midTermPassRate != undefined) {
|
|
|
+ optionTitleText += this.$t('中期合格率')+':' + ((data.midTermPassRate[lastindex] == null || isNaN(data.midTermPassRate[lastindex])) ? "--- " : data.midTermPassRate[lastindex] + " ")
|
|
|
+ option.series.push({
|
|
|
+ name: this.$t('中期合格率'),
|
|
|
+ type: 'line',
|
|
|
+ showSymbol: false,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#6bb3ff',
|
|
|
+ borderColor: 'rgba(50,194,219,0.2)',
|
|
|
+ borderWidth: 12
|
|
|
+ }
|
|
|
+ },
|
|
|
+ markLine: {
|
|
|
+ silent: true,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
- color: '#6bb3ff',
|
|
|
- borderColor: 'rgba(50,194,219,0.2)',
|
|
|
- borderWidth: 12
|
|
|
+ show: true,
|
|
|
+ color: 'red'
|
|
|
}
|
|
|
},
|
|
|
- markLine: {
|
|
|
- silent: true,
|
|
|
- itemStyle:{
|
|
|
- normal:{
|
|
|
- show:true,
|
|
|
- color:'red'
|
|
|
- }
|
|
|
- },
|
|
|
- data: this.markLineData
|
|
|
- },
|
|
|
- data: data.midTermPassRate
|
|
|
- })
|
|
|
- option.legend.data.push('中期合格率')
|
|
|
- }
|
|
|
- if(data.shortTermAccuracy != undefined){
|
|
|
- optionTitleText+='短期准确率:'+((data.shortTermAccuracy[lastindex] == null || isNaN(data.shortTermAccuracy[lastindex])) ? "--- ":data.shortTermAccuracy[lastindex]+" ")
|
|
|
- option.series.push({
|
|
|
- name: '短期准确率',
|
|
|
- type: 'line',
|
|
|
- showSymbol: false,
|
|
|
+ data: this.markLineData
|
|
|
+ },
|
|
|
+ data: data.midTermPassRate
|
|
|
+ })
|
|
|
+ option.legend.data.push(this.$t('中期合格率'))
|
|
|
+ }
|
|
|
+ if (data.shortTermAccuracy != undefined) {
|
|
|
+ optionTitleText += this.$t('短期准确率') + ':' + ((data.shortTermAccuracy[lastindex] == null || isNaN(data.shortTermAccuracy[lastindex])) ? "--- " : data.shortTermAccuracy[lastindex] + " ")
|
|
|
+ option.series.push({
|
|
|
+ name: this.$t('短期准确率'),
|
|
|
+ type: 'line',
|
|
|
+ showSymbol: false,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#cccc99',
|
|
|
+ borderColor: 'rgba(50,194,219,0.2)',
|
|
|
+ borderWidth: 12
|
|
|
+ }
|
|
|
+ },
|
|
|
+ markLine: {
|
|
|
+ silent: true,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
- color: '#cccc99',
|
|
|
- borderColor: 'rgba(50,194,219,0.2)',
|
|
|
- borderWidth: 12
|
|
|
+ show: true,
|
|
|
+ color: 'red'
|
|
|
}
|
|
|
},
|
|
|
- markLine: {
|
|
|
- silent: true,
|
|
|
- itemStyle:{
|
|
|
- normal:{
|
|
|
- show:true,
|
|
|
- color:'red'
|
|
|
- }
|
|
|
- },
|
|
|
- data: this.markLineData
|
|
|
- },
|
|
|
- data: data.shortTermAccuracy
|
|
|
- })
|
|
|
- option.legend.data.push('短期准确率')
|
|
|
- }
|
|
|
+ data: this.markLineData
|
|
|
+ },
|
|
|
+ data: data.shortTermAccuracy
|
|
|
+ })
|
|
|
+ option.legend.data.push(this.$t('短期准确率'))
|
|
|
+ }
|
|
|
+
|
|
|
+ if (data.tenDayShortTermAccuracy != undefined) {
|
|
|
+ optionTitleText += this.$t('短期第十天准确率') + ':' + ((data.tenDayShortTermAccuracy[lastindex] == null || isNaN(data.tenDayShortTermAccuracy[lastindex])) ? "--- " : data.tenDayShortTermAccuracy[lastindex] + " ")
|
|
|
+ option.series.push({
|
|
|
+ name: this.$t('短期第十天准确率'),
|
|
|
+ type: 'line',
|
|
|
+ showSymbol: false,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
|
|
|
- if(data.tenDayShortTermAccuracy != undefined){
|
|
|
- optionTitleText+='短期第十天准确率:'+((data.tenDayShortTermAccuracy[lastindex] == null || isNaN(data.tenDayShortTermAccuracy[lastindex])) ? "--- ":data.tenDayShortTermAccuracy[lastindex]+" ")
|
|
|
- option.series.push({
|
|
|
- name: '短期第十天准确率',
|
|
|
- type: 'line',
|
|
|
- showSymbol: false,
|
|
|
+ color: '#cccc99',
|
|
|
+ borderColor: 'rgba(50,194,219,0.2)',
|
|
|
+ borderWidth: 12
|
|
|
+ }
|
|
|
+ },
|
|
|
+ markLine: {
|
|
|
+ silent: true,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
-
|
|
|
- color: '#cccc99',
|
|
|
- borderColor: 'rgba(50,194,219,0.2)',
|
|
|
- borderWidth: 12
|
|
|
+ show: true,
|
|
|
+ color: 'red'
|
|
|
}
|
|
|
},
|
|
|
- markLine: {
|
|
|
- silent: true,
|
|
|
- itemStyle:{
|
|
|
- normal:{
|
|
|
- show:true,
|
|
|
- color:'red'
|
|
|
- }
|
|
|
- },
|
|
|
- data: this.markLineData
|
|
|
- },
|
|
|
- data: data.tenDayShortTermAccuracy
|
|
|
- })
|
|
|
- option.legend.data.push('短期第十天准确率')
|
|
|
- }
|
|
|
- if(data.shortTermPassRate != undefined){
|
|
|
- optionTitleText+= '短期合格率:'+((data.shortTermPassRate[lastindex] == null || isNaN(data.shortTermPassRate[lastindex])) ? "--- ":data.shortTermPassRate[lastindex]+" ")
|
|
|
- option.series.push({
|
|
|
- name: '短期合格率',
|
|
|
- type: 'line',
|
|
|
- showSymbol: false,
|
|
|
+ data: this.markLineData
|
|
|
+ },
|
|
|
+ data: data.tenDayShortTermAccuracy
|
|
|
+ })
|
|
|
+ option.legend.data.push(this.$t('短期第十天准确率'))
|
|
|
+ }
|
|
|
+ if (data.shortTermPassRate != undefined) {
|
|
|
+ optionTitleText += this.$t('短期合格率') + ':' + ((data.shortTermPassRate[lastindex] == null || isNaN(data.shortTermPassRate[lastindex])) ? "--- " : data.shortTermPassRate[lastindex] + " ")
|
|
|
+ option.series.push({
|
|
|
+ name: this.$t('短期合格率'),
|
|
|
+ type: 'line',
|
|
|
+ showSymbol: false,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+
|
|
|
+ color: '#ff6b6b',
|
|
|
+ borderColor: 'rgba(50,194,219,0.2)',
|
|
|
+ borderWidth: 12
|
|
|
+ }
|
|
|
+ },
|
|
|
+ markLine: {
|
|
|
+ silent: true,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
-
|
|
|
- color: '#ff6b6b',
|
|
|
- borderColor: 'rgba(50,194,219,0.2)',
|
|
|
- borderWidth: 12
|
|
|
+ show: true,
|
|
|
+ color: 'red'
|
|
|
}
|
|
|
},
|
|
|
- markLine: {
|
|
|
- silent: true,
|
|
|
- itemStyle:{
|
|
|
- normal:{
|
|
|
- show:true,
|
|
|
- color:'red'
|
|
|
- }
|
|
|
- },
|
|
|
- data: this.markLineData
|
|
|
- },
|
|
|
- data: data.shortTermPassRate
|
|
|
- })
|
|
|
- option.legend.data.push('短期合格率')
|
|
|
- }
|
|
|
- if(data.ultraShortTermAccuracy != undefined){
|
|
|
- optionTitleText+= '超短期准确率:'+((data.ultraShortTermAccuracy[lastindex]==null || isNaN(data.ultraShortTermAccuracy[lastindex])) ? "--- " : data.ultraShortTermAccuracy[lastindex]+" " )
|
|
|
- option.series.push({
|
|
|
- name: '超短期准确率',
|
|
|
- type: 'line',
|
|
|
- showSymbol: false,
|
|
|
+ data: this.markLineData
|
|
|
+ },
|
|
|
+ data: data.shortTermPassRate
|
|
|
+ })
|
|
|
+ option.legend.data.push(this.$t('短期合格率'))
|
|
|
+ }
|
|
|
+ if (data.ultraShortTermAccuracy != undefined) {
|
|
|
+ optionTitleText += this.$t('超短期准确率') + ':' + ((data.ultraShortTermAccuracy[lastindex] == null || isNaN(data.ultraShortTermAccuracy[lastindex])) ? "--- " : data.ultraShortTermAccuracy[lastindex] + " ")
|
|
|
+ option.series.push({
|
|
|
+ name: this.$t('超短期准确率'),
|
|
|
+ type: 'line',
|
|
|
+ showSymbol: false,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+
|
|
|
+ color: '#669966',
|
|
|
+ borderColor: 'rgba(50,194,219,0.2)',
|
|
|
+ borderWidth: 12
|
|
|
+ }
|
|
|
+ },
|
|
|
+ markLine: {
|
|
|
+ silent: true,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
-
|
|
|
- color: '#669966',
|
|
|
- borderColor: 'rgba(50,194,219,0.2)',
|
|
|
- borderWidth: 12
|
|
|
+ show: true,
|
|
|
+ color: 'red'
|
|
|
}
|
|
|
},
|
|
|
- markLine: {
|
|
|
- silent: true,
|
|
|
- itemStyle:{
|
|
|
- normal:{
|
|
|
- show:true,
|
|
|
- color:'red'
|
|
|
- }
|
|
|
- },
|
|
|
- data: this.markLineData
|
|
|
- },
|
|
|
- data: data.ultraShortTermAccuracy
|
|
|
- })
|
|
|
- option.legend.data.push('超短期准确率')
|
|
|
- }
|
|
|
- if(data.ultraShortTermPassRate != undefined){
|
|
|
- optionTitleText+= '超短期合格率:'+((data.ultraShortTermPassRate[lastindex] == null || isNaN(data.ultraShortTermPassRate[lastindex])) ? "--- ":data.ultraShortTermPassRate[lastindex]+" ")
|
|
|
- option.series.push({
|
|
|
- name: '超短期合格率',
|
|
|
- type: 'line',
|
|
|
- showSymbol: false,
|
|
|
+ data: this.markLineData
|
|
|
+ },
|
|
|
+ data: data.ultraShortTermAccuracy
|
|
|
+ })
|
|
|
+ option.legend.data.push(this.$t('超短期准确率'))
|
|
|
+ }
|
|
|
+ if (data.ultraShortTermPassRate != undefined) {
|
|
|
+ optionTitleText += this.$t('超短期合格率') + ':' + ((data.ultraShortTermPassRate[lastindex] == null || isNaN(data.ultraShortTermPassRate[lastindex])) ? "--- " : data.ultraShortTermPassRate[lastindex] + " ")
|
|
|
+ option.series.push({
|
|
|
+ name: this.$t('超短期合格率'),
|
|
|
+ type: 'line',
|
|
|
+ showSymbol: false,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+
|
|
|
+ color: '#66CC66',
|
|
|
+ borderColor: 'rgba(50,194,219,0.2)',
|
|
|
+ borderWidth: 12
|
|
|
+ }
|
|
|
+ },
|
|
|
+ markLine: {
|
|
|
+ silent: true,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
-
|
|
|
- color: '#66CC66',
|
|
|
- borderColor: 'rgba(50,194,219,0.2)',
|
|
|
- borderWidth: 12
|
|
|
+ show: true,
|
|
|
+ color: 'red'
|
|
|
}
|
|
|
},
|
|
|
- markLine: {
|
|
|
- silent: true,
|
|
|
- itemStyle:{
|
|
|
- normal:{
|
|
|
- show:true,
|
|
|
- color:'red'
|
|
|
- }
|
|
|
- },
|
|
|
- data: this.markLineData
|
|
|
- },
|
|
|
- data: data.ultraShortTermPassRate
|
|
|
- })
|
|
|
- option.legend.data.push('超短期合格率')
|
|
|
- }
|
|
|
- option.title.text ="实时 "+optionTitleText
|
|
|
- this.chart.setOption(option, true)
|
|
|
- /*window.onresize = chart.resize()*/
|
|
|
- },
|
|
|
- statisticsDraw(data) {
|
|
|
- // 如果是南网，则不显示准确率阈值红线，否则显示
|
|
|
- if(this.province=="E44" ||this.province=="E45" ||this.province=="E46" ||this.province=="E52" ||this.province=="E53" ){
|
|
|
- this.markLineData = [];
|
|
|
- }else {
|
|
|
- this.markLineData = [{
|
|
|
- label:{
|
|
|
- position:'end',
|
|
|
- formatter:"准确率"
|
|
|
- },
|
|
|
- yAxis: data.accuracyRate.split(',')[0]
|
|
|
+ data: this.markLineData
|
|
|
},
|
|
|
- {
|
|
|
- label:{
|
|
|
- position:'end',
|
|
|
- formatter:"合格率"
|
|
|
- },
|
|
|
- yAxis: data.accuracyRate.split(',')[1]
|
|
|
- }]
|
|
|
- }
|
|
|
-
|
|
|
- var lastindex = data.times.length-1
|
|
|
- this.chart2 = echarts.init(document.getElementById('statisticsChats'))
|
|
|
- var option = {
|
|
|
- title: {
|
|
|
- text: '统计 ',
|
|
|
- subtext: data.times[0]+'-'+data.times[lastindex],
|
|
|
- textStyle: {
|
|
|
- fontWeight: 'normal',
|
|
|
- fontSize: 16,
|
|
|
- color: this.lineColor
|
|
|
+ data: data.ultraShortTermPassRate
|
|
|
+ })
|
|
|
+ option.legend.data.push(this.$t('超短期合格率'))
|
|
|
+ }
|
|
|
+ option.title.text = this.$t("实时")+ optionTitleText
|
|
|
+ this.chart.setOption(option, true)
|
|
|
+ /*window.onresize = chart.resize()*/
|
|
|
+ },
|
|
|
+ statisticsDraw(data) {
|
|
|
+ // 如果是南网，则不显示准确率阈值红线，否则显示
|
|
|
+ if (this.province == "E44" || this.province == "E45" || this.province == "E46" || this.province == "E52" || this.province == "E53") {
|
|
|
+ this.markLineData = [];
|
|
|
+ } else {
|
|
|
+ this.markLineData = [{
|
|
|
+ label: {
|
|
|
+ position: 'end',
|
|
|
+ formatter: this.$t("准确率")
|
|
|
+ },
|
|
|
+ yAxis: data.accuracyRate.split(',')[0]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: {
|
|
|
+ position: 'end',
|
|
|
+ formatter: this.$t("合格率")
|
|
|
},
|
|
|
- left: '1%'
|
|
|
+ yAxis: data.accuracyRate.split(',')[1]
|
|
|
+ }]
|
|
|
+ }
|
|
|
+
|
|
|
+ var lastindex = data.times.length - 1
|
|
|
+ this.chart2 = echarts.init(document.getElementById('statisticsChats'))
|
|
|
+ var option = {
|
|
|
+ title: {
|
|
|
+ text: this.$t('统计'),
|
|
|
+ subtext: data.times[0] + '-' + data.times[lastindex],
|
|
|
+ textStyle: {
|
|
|
+ fontWeight: 'normal',
|
|
|
+ fontSize: 16,
|
|
|
+ color: this.lineColor
|
|
|
},
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- axisPointer: {
|
|
|
- lineStyle: {
|
|
|
- color: '#57617B'
|
|
|
- }
|
|
|
+ left: '1%'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#57617B'
|
|
|
}
|
|
|
- },
|
|
|
- legend: {
|
|
|
- top: 25,
|
|
|
- icon: 'rect',
|
|
|
- itemWidth: 14,
|
|
|
- itemHeight: 5,
|
|
|
- itemGap: 13,
|
|
|
- data: [],
|
|
|
- right: '4%',
|
|
|
- textStyle: {
|
|
|
- fontSize: 12,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ top: 25,
|
|
|
+ icon: 'rect',
|
|
|
+ itemWidth: 14,
|
|
|
+ itemHeight: 5,
|
|
|
+ itemGap: 13,
|
|
|
+ data: [],
|
|
|
+ right: '4%',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 12,
|
|
|
+ color: this.lineColor
|
|
|
+ }
|
|
|
+ },
|
|
|
+ dataZoom: [{
|
|
|
+ show: true,
|
|
|
+ realtime: true,
|
|
|
+ start: 0,
|
|
|
+ end: 100,
|
|
|
+ left: "15%",
|
|
|
+ right: "15%",
|
|
|
+ textStyle: {
|
|
|
+ color: this.lineColor
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'inside'
|
|
|
+ }],
|
|
|
+ grid: {
|
|
|
+ top: 100,
|
|
|
+ left: '2%',
|
|
|
+ right: '5%',
|
|
|
+ bottom: '10%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: data.times,
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
color: this.lineColor
|
|
|
}
|
|
|
- },
|
|
|
- dataZoom: [{
|
|
|
- show: true,
|
|
|
- realtime: true,
|
|
|
- start: 0,
|
|
|
- end: 100,
|
|
|
- left: "15%",
|
|
|
- right: "15%",
|
|
|
- textStyle: {
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ name: '(%)',
|
|
|
+ max: 100,
|
|
|
+ min: 0,
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
color: this.lineColor
|
|
|
}
|
|
|
},
|
|
|
- {
|
|
|
- type: 'inside'
|
|
|
- }],
|
|
|
- grid: {
|
|
|
- top: 100,
|
|
|
- left: '2%',
|
|
|
- right: '5%',
|
|
|
- bottom: '10%',
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- boundaryGap: false,
|
|
|
- data: data.times,
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: this.lineColor
|
|
|
- }
|
|
|
+ axisLabel: {
|
|
|
+ margin: 10,
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 14
|
|
|
}
|
|
|
},
|
|
|
- yAxis: {
|
|
|
- type: 'value',
|
|
|
- name: '(%)',
|
|
|
- max: 100,
|
|
|
- min: 0,
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: this.lineColor
|
|
|
- }
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- margin: 10,
|
|
|
- textStyle: {
|
|
|
- fontSize: 14
|
|
|
- }
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- lineStyle: {
|
|
|
- color: '#57617B'
|
|
|
- }
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#57617B'
|
|
|
}
|
|
|
- },
|
|
|
- series: []
|
|
|
- };
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: []
|
|
|
+ };
|
|
|
|
|
|
- // 统计/平均 echarts数据
|
|
|
- var optionTitleText = "";
|
|
|
- if(data.midTermAccuracy != undefined){
|
|
|
- optionTitleText+="中期准确率:"+(isNaN(this.midAccuracyAVG) || this.midAccuracyAVG == null ? '---':this.midAccuracyAVG)
|
|
|
- option.series.push({
|
|
|
- name: '中期准确率',
|
|
|
- type: 'line',
|
|
|
- showSymbol: false,
|
|
|
+ // 统计/平均 echarts数据
|
|
|
+ var optionTitleText = "";
|
|
|
+ if (data.midTermAccuracy != undefined) {
|
|
|
+ optionTitleText += this.$t('中期准确率')+":" + (isNaN(this.midAccuracyAVG) || this.midAccuracyAVG == null ? '---' : this.midAccuracyAVG)
|
|
|
+ option.series.push({
|
|
|
+ name: this.$t('中期准确率'),
|
|
|
+ type: 'line',
|
|
|
+ showSymbol: false,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#df13ee',
|
|
|
+ borderColor: 'rgba(50,194,219,0.2)',
|
|
|
+ borderWidth: 12
|
|
|
+ }
|
|
|
+ },
|
|
|
+ markLine: {
|
|
|
+ silent: true,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
- color: '#df13ee',
|
|
|
- borderColor: 'rgba(50,194,219,0.2)',
|
|
|
- borderWidth: 12
|
|
|
+ show: true,
|
|
|
+ color: 'red'
|
|
|
}
|
|
|
},
|
|
|
- markLine: {
|
|
|
- silent: true,
|
|
|
- itemStyle:{
|
|
|
- normal:{
|
|
|
- show:true,
|
|
|
- color:'red'
|
|
|
- }
|
|
|
- },
|
|
|
- data: this.markLineData
|
|
|
- },
|
|
|
- data: data.midTermAccuracy
|
|
|
- })
|
|
|
- option.legend.data.push('中期准确率')
|
|
|
- }
|
|
|
- if(data.midTermPassRate != undefined){
|
|
|
- optionTitleText+="中期合格率:"+(isNaN(this.midRateValueAVG) || this.midRateValueAVG == null ? '---':this.midRateValueAVG)
|
|
|
- option.series.push({
|
|
|
- name: '中期合格率',
|
|
|
- type: 'line',
|
|
|
- showSymbol: false,
|
|
|
+ data: this.markLineData
|
|
|
+ },
|
|
|
+ data: data.midTermAccuracy
|
|
|
+ })
|
|
|
+ option.legend.data.push(this.$t('中期准确率'))
|
|
|
+ }
|
|
|
+ if (data.midTermPassRate != undefined) {
|
|
|
+ optionTitleText += this.$t('中期合格率')+":" + (isNaN(this.midRateValueAVG) || this.midRateValueAVG == null ? '---' : this.midRateValueAVG)
|
|
|
+ option.series.push({
|
|
|
+ name: this.$t('中期合格率'),
|
|
|
+ type: 'line',
|
|
|
+ showSymbol: false,
|
|
|
+
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
|
|
|
+ color: '#6bb3ff',
|
|
|
+ borderColor: 'rgba(50,194,219,0.2)',
|
|
|
+ borderWidth: 12
|
|
|
+ }
|
|
|
+ },
|
|
|
+ markLine: {
|
|
|
+ silent: true,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
-
|
|
|
- color: '#6bb3ff',
|
|
|
- borderColor: 'rgba(50,194,219,0.2)',
|
|
|
- borderWidth: 12
|
|
|
+ show: true,
|
|
|
+ color: 'red'
|
|
|
}
|
|
|
},
|
|
|
- markLine: {
|
|
|
- silent: true,
|
|
|
- itemStyle:{
|
|
|
- normal:{
|
|
|
- show:true,
|
|
|
- color:'red'
|
|
|
- }
|
|
|
- },
|
|
|
- data: this.markLineData
|
|
|
- },
|
|
|
- data: data.midTermPassRate
|
|
|
- })
|
|
|
- option.legend.data.push('中期合格率')
|
|
|
- }
|
|
|
- if(data.shortTermAccuracy != undefined){
|
|
|
- optionTitleText+="短期准确率:"+(isNaN(this.dqAccuracyAVG) || this.dqAccuracyAVG == null ? '---':this.dqAccuracyAVG)
|
|
|
- option.series.push({
|
|
|
- name: '短期准确率',
|
|
|
- type: 'line',
|
|
|
- showSymbol: false,
|
|
|
+ data: this.markLineData
|
|
|
+ },
|
|
|
+ data: data.midTermPassRate
|
|
|
+ })
|
|
|
+ option.legend.data.push(this.$t('中期合格率'))
|
|
|
+ }
|
|
|
+ if (data.shortTermAccuracy != undefined) {
|
|
|
+ optionTitleText += this.$t('短期准确率')+":" + (isNaN(this.dqAccuracyAVG) || this.dqAccuracyAVG == null ? '---' : this.dqAccuracyAVG)
|
|
|
+ option.series.push({
|
|
|
+ name: this.$t('短期准确率'),
|
|
|
+ type: 'line',
|
|
|
+ showSymbol: false,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#cccc99',
|
|
|
+ borderColor: 'rgba(50,194,219,0.2)',
|
|
|
+ borderWidth: 12
|
|
|
+ }
|
|
|
+ },
|
|
|
+ markLine: {
|
|
|
+ silent: true,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
- color: '#cccc99',
|
|
|
- borderColor: 'rgba(50,194,219,0.2)',
|
|
|
- borderWidth: 12
|
|
|
+ show: true,
|
|
|
+ color: 'red'
|
|
|
}
|
|
|
},
|
|
|
- markLine: {
|
|
|
- silent: true,
|
|
|
- itemStyle:{
|
|
|
- normal:{
|
|
|
- show:true,
|
|
|
- color:'red'
|
|
|
- }
|
|
|
- },
|
|
|
- data: this.markLineData
|
|
|
- },
|
|
|
- data: data.shortTermAccuracy
|
|
|
- })
|
|
|
- option.legend.data.push('短期准确率')
|
|
|
- }
|
|
|
- if(data.tenDayShortTermAccuracy != undefined){
|
|
|
- optionTitleText+="短期第十天准确率:"+(isNaN(this.tenDayDqAccuracyAVG) || this.tenDayDqAccuracyAVG == null ? '---':this.tenDayDqAccuracyAVG)
|
|
|
- option.series.push({
|
|
|
- name: '短期第十天准确率',
|
|
|
- type: 'line',
|
|
|
- showSymbol: false,
|
|
|
+ data: this.markLineData
|
|
|
+ },
|
|
|
+ data: data.shortTermAccuracy
|
|
|
+ })
|
|
|
+ option.legend.data.push(this.$t('短期准确率'))
|
|
|
+ }
|
|
|
+ if (data.tenDayShortTermAccuracy != undefined) {
|
|
|
+ optionTitleText += this.$t('短期第十天准确率')+":" + (isNaN(this.tenDayDqAccuracyAVG) || this.tenDayDqAccuracyAVG == null ? '---' : this.tenDayDqAccuracyAVG)
|
|
|
+ option.series.push({
|
|
|
+ name: this.$t('短期第十天准确率'),
|
|
|
+ type: 'line',
|
|
|
+ showSymbol: false,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#cccc99',
|
|
|
+ borderColor: 'rgba(50,194,219,0.2)',
|
|
|
+ borderWidth: 12
|
|
|
+ }
|
|
|
+ },
|
|
|
+ markLine: {
|
|
|
+ silent: true,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
- color: '#cccc99',
|
|
|
- borderColor: 'rgba(50,194,219,0.2)',
|
|
|
- borderWidth: 12
|
|
|
+ show: true,
|
|
|
+ color: 'red'
|
|
|
}
|
|
|
},
|
|
|
- markLine: {
|
|
|
- silent: true,
|
|
|
- itemStyle:{
|
|
|
- normal:{
|
|
|
- show:true,
|
|
|
- color:'red'
|
|
|
- }
|
|
|
- },
|
|
|
- data: this.markLineData
|
|
|
- },
|
|
|
- data: data.tenDayShortTermAccuracy
|
|
|
- })
|
|
|
- option.legend.data.push('短期第十天准确率')
|
|
|
- }
|
|
|
- if(data.shortTermPassRate != undefined){
|
|
|
- optionTitleText+="短期合格率:"+(isNaN(this.dqRateValueAVG) || this.dqRateValueAVG == null ? '---':this.dqRateValueAVG)
|
|
|
- option.series.push({
|
|
|
- name: '短期合格率',
|
|
|
- type: 'line',
|
|
|
- showSymbol: false,
|
|
|
+ data: this.markLineData
|
|
|
+ },
|
|
|
+ data: data.tenDayShortTermAccuracy
|
|
|
+ })
|
|
|
+ option.legend.data.push(this.$t('短期第十天准确率'))
|
|
|
+ }
|
|
|
+ if (data.shortTermPassRate != undefined) {
|
|
|
+ optionTitleText += this.$t('短期合格率')+":" + (isNaN(this.dqRateValueAVG) || this.dqRateValueAVG == null ? '---' : this.dqRateValueAVG)
|
|
|
+ option.series.push({
|
|
|
+ name: this.$t('短期合格率'),
|
|
|
+ type: 'line',
|
|
|
+ showSymbol: false,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#ff6b6b',
|
|
|
+ borderColor: 'rgba(50,194,219,0.2)',
|
|
|
+ borderWidth: 12
|
|
|
+ }
|
|
|
+ },
|
|
|
+ markLine: {
|
|
|
+ silent: true,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
- color: '#ff6b6b',
|
|
|
- borderColor: 'rgba(50,194,219,0.2)',
|
|
|
- borderWidth: 12
|
|
|
+ show: true,
|
|
|
+ color: 'red'
|
|
|
}
|
|
|
},
|
|
|
- markLine: {
|
|
|
- silent: true,
|
|
|
- itemStyle:{
|
|
|
- normal:{
|
|
|
- show:true,
|
|
|
- color:'red'
|
|
|
- }
|
|
|
- },
|
|
|
- data: this.markLineData
|
|
|
- },
|
|
|
- data: data.shortTermPassRate
|
|
|
- })
|
|
|
- option.legend.data.push('短期合格率')
|
|
|
- }
|
|
|
- if(data.ultraShortTermAccuracy != undefined){
|
|
|
- optionTitleText+="超短期准确率:"+(isNaN(this.cdqAccuracyAVG) || this.cdqAccuracyAVG == null ? '---':this.cdqAccuracyAVG)
|
|
|
- option.series.push({
|
|
|
- name: '超短期准确率',
|
|
|
- type: 'line',
|
|
|
- showSymbol: false,
|
|
|
+ data: this.markLineData
|
|
|
+ },
|
|
|
+ data: data.shortTermPassRate
|
|
|
+ })
|
|
|
+ option.legend.data.push(this.$t('短期合格率'))
|
|
|
+ }
|
|
|
+ if (data.ultraShortTermAccuracy != undefined) {
|
|
|
+ optionTitleText += this.$t('超短期准确率')+":" + (isNaN(this.cdqAccuracyAVG) || this.cdqAccuracyAVG == null ? '---' : this.cdqAccuracyAVG)
|
|
|
+ option.series.push({
|
|
|
+ name: this.$t('超短期准确率'),
|
|
|
+ type: 'line',
|
|
|
+ showSymbol: false,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+
|
|
|
+ color: '#669966',
|
|
|
+ borderColor: 'rgba(50,194,219,0.2)',
|
|
|
+ borderWidth: 12
|
|
|
+ }
|
|
|
+ },
|
|
|
+ markLine: {
|
|
|
+ silent: true,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
-
|
|
|
- color: '#669966',
|
|
|
- borderColor: 'rgba(50,194,219,0.2)',
|
|
|
- borderWidth: 12
|
|
|
+ show: true,
|
|
|
+ color: 'red'
|
|
|
}
|
|
|
},
|
|
|
- markLine: {
|
|
|
- silent: true,
|
|
|
- itemStyle:{
|
|
|
- normal:{
|
|
|
- show:true,
|
|
|
- color:'red'
|
|
|
- }
|
|
|
- },
|
|
|
- data: this.markLineData
|
|
|
- },
|
|
|
- data: data.ultraShortTermAccuracy
|
|
|
- })
|
|
|
- option.legend.data.push('超短期准确率')
|
|
|
- }
|
|
|
- if(data.ultraShortTermPassRate != undefined){
|
|
|
- optionTitleText+="超短期合格率:"+(isNaN(this.cdqRateValueAVG) || this.cdqRateValueAVG == null ? '---':this.cdqRateValueAVG)
|
|
|
- option.series.push({
|
|
|
- name: '超短期合格率',
|
|
|
- type: 'line',
|
|
|
- showSymbol: false,
|
|
|
+ data: this.markLineData
|
|
|
+ },
|
|
|
+ data: data.ultraShortTermAccuracy
|
|
|
+ })
|
|
|
+ option.legend.data.push(this.$t('超短期准确率'))
|
|
|
+ }
|
|
|
+ if (data.ultraShortTermPassRate != undefined) {
|
|
|
+ optionTitleText += this.$t('超短期合格率')+":" + (isNaN(this.cdqRateValueAVG) || this.cdqRateValueAVG == null ? '---' : this.cdqRateValueAVG)
|
|
|
+ option.series.push({
|
|
|
+ name: this.$t('超短期合格率'),
|
|
|
+ type: 'line',
|
|
|
+ showSymbol: false,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+
|
|
|
+ color: '#66CC66',
|
|
|
+ borderColor: 'rgba(50,194,219,0.2)',
|
|
|
+ borderWidth: 12
|
|
|
+ }
|
|
|
+ },
|
|
|
+ markLine: {
|
|
|
+ silent: true,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
-
|
|
|
- color: '#66CC66',
|
|
|
- borderColor: 'rgba(50,194,219,0.2)',
|
|
|
- borderWidth: 12
|
|
|
+ show: true,
|
|
|
+ color: 'red'
|
|
|
}
|
|
|
},
|
|
|
- markLine: {
|
|
|
- silent: true,
|
|
|
- itemStyle:{
|
|
|
- normal:{
|
|
|
- show:true,
|
|
|
- color:'red'
|
|
|
- }
|
|
|
- },
|
|
|
- data: this.markLineData
|
|
|
- },
|
|
|
- data: data.ultraShortTermPassRate
|
|
|
- })
|
|
|
- option.legend.data.push('超短期合格率')
|
|
|
- }
|
|
|
- option.title.text ="统计 平均/"+optionTitleText
|
|
|
- this.chart2.setOption(option, true)
|
|
|
- },
|
|
|
-
|
|
|
- sortChangeEvent ({ column, property, order }) {
|
|
|
- if(order == null){
|
|
|
- order = 'asc'
|
|
|
- }
|
|
|
- this.currentPage = 1
|
|
|
- this.sortOrder = order
|
|
|
- this.loading = true
|
|
|
- this.getTable()
|
|
|
- },
|
|
|
+ data: this.markLineData
|
|
|
+ },
|
|
|
+ data: data.ultraShortTermPassRate
|
|
|
+ })
|
|
|
+ option.legend.data.push(this.$t('超短期合格率'))
|
|
|
+ }
|
|
|
+ option.title.text = this.$t("统计 平均/") + optionTitleText
|
|
|
+ this.chart2.setOption(option, true)
|
|
|
+ },
|
|
|
|
|
|
- checkColumnMethod ({ column }) {
|
|
|
- if (column.property === 'preTime') {
|
|
|
- return false
|
|
|
- }
|
|
|
- return true
|
|
|
+ sortChangeEvent({column, property, order}) {
|
|
|
+ if (order == null) {
|
|
|
+ order = 'asc'
|
|
|
}
|
|
|
+ this.currentPage = 1
|
|
|
+ this.sortOrder = order
|
|
|
+ this.loading = true
|
|
|
+ this.getTable()
|
|
|
+ },
|
|
|
|
|
|
+ checkColumnMethod({column}) {
|
|
|
+ if (column.property === 'preTime') {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ return true
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
|
- .tableContent {
|
|
|
- /*width: 100%;*/
|
|
|
- height: 40%;
|
|
|
- }
|
|
|
+.tableContent {
|
|
|
+ /*width: 100%;*/
|
|
|
+ height: 40%;
|
|
|
+}
|
|
|
|
|
|
- .drag-box-item {
|
|
|
- /*margin:10px;*/
|
|
|
- flex: 1;
|
|
|
- height: 220px;
|
|
|
- max-width: 100%;
|
|
|
- min-width: 100%;
|
|
|
- background-color: #eff1f5;
|
|
|
- margin-right: 16px;
|
|
|
- border-radius: 6px;
|
|
|
- border: 1px #e1e4e8 solid;
|
|
|
- }
|
|
|
+.drag-box-item {
|
|
|
+ /*margin:10px;*/
|
|
|
+ flex: 1;
|
|
|
+ height: 220px;
|
|
|
+ max-width: 100%;
|
|
|
+ min-width: 100%;
|
|
|
+ background-color: #eff1f5;
|
|
|
+ margin-right: 16px;
|
|
|
+ border-radius: 6px;
|
|
|
+ border: 1px #e1e4e8 solid;
|
|
|
+}
|
|
|
|
|
|
- .item-title {
|
|
|
- padding: 8px 8px 8px 12px;
|
|
|
- font-size: 14px;
|
|
|
- line-height: 1.5;
|
|
|
- color: #24292e;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
+.item-title {
|
|
|
+ padding: 8px 8px 8px 12px;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 1.5;
|
|
|
+ color: #24292e;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
|
|
|
- .item-ul {
|
|
|
- padding: 0 8px 8px;
|
|
|
- height: 200px;
|
|
|
- overflow-y: scroll;
|
|
|
- }
|
|
|
+.item-ul {
|
|
|
+ padding: 0 8px 8px;
|
|
|
+ height: 200px;
|
|
|
+ overflow-y: scroll;
|
|
|
+}
|
|
|
|
|
|
- .item-ul::-webkit-scrollbar {
|
|
|
- width: 0;
|
|
|
- }
|
|
|
+.item-ul::-webkit-scrollbar {
|
|
|
+ width: 0;
|
|
|
+}
|
|
|
|
|
|
- .drag-list {
|
|
|
- width: 14%;
|
|
|
- float: left;
|
|
|
- border: 1px #e1e4e8 solid;
|
|
|
- padding: 10px;
|
|
|
- /*margin: 5px 0 10px;*/
|
|
|
- list-style: none;
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 6px;
|
|
|
- cursor: pointer;
|
|
|
- -webkit-transition: border .3s ease-in;
|
|
|
- transition: border .3s ease-in;
|
|
|
- }
|
|
|
+.drag-list {
|
|
|
+ width: 14%;
|
|
|
+ float: left;
|
|
|
+ border: 1px #e1e4e8 solid;
|
|
|
+ padding: 10px;
|
|
|
+ /*margin: 5px 0 10px;*/
|
|
|
+ list-style: none;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ -webkit-transition: border .3s ease-in;
|
|
|
+ transition: border .3s ease-in;
|
|
|
+}
|
|
|
|
|
|
- .drag-list:hover {
|
|
|
- border: 1px solid #20a0ff;
|
|
|
- }
|
|
|
+.drag-list:hover {
|
|
|
+ border: 1px solid #20a0ff;
|
|
|
+}
|
|
|
|
|
|
- .inputNum {
|
|
|
- height: 50px;
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
- .accuracyPassRate{
|
|
|
- width: 49%;
|
|
|
- height: 100%;
|
|
|
- margin-top: 20px;
|
|
|
- }
|
|
|
+.inputNum {
|
|
|
+ height: 50px;
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+
|
|
|
+.accuracyPassRate {
|
|
|
+ width: 49%;
|
|
|
+ height: 100%;
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
</style>
|
|
|
|
zy