xzt
1 year ago
11 changed files with 409 additions and 297 deletions
@ -1,96 +1,107 @@ |
|||
<template> |
|||
<div class="chart-wrap"> |
|||
<div id="mychart" :style="myChartStyle"></div> |
|||
</div> |
|||
<div class="chart-wrap"> |
|||
<div id="mychart" :style="myChartStyle"></div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
myChartStyle: { float: "left", width: "90%", height: "500px" } //图表样式 |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.initEcharts(); |
|||
}) |
|||
}, |
|||
methods: { |
|||
initEcharts() { |
|||
const option = { |
|||
title: { |
|||
text: "ECharts 入门示例" |
|||
}, |
|||
grid: { |
|||
top: '10%', |
|||
left: '10%', |
|||
right: '0%', |
|||
bottom: '8%' |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], |
|||
boundaryGap: false, |
|||
nameTextStyle: { |
|||
color: '#fff', |
|||
}, |
|||
axisLabel: { |
|||
interval: 0, |
|||
textStyle: { |
|||
color: '#ccc', |
|||
fontSize: '12', |
|||
}, |
|||
}, |
|||
}, |
|||
// toolbox: { //工具栏 |
|||
// show: true, |
|||
// feature: { |
|||
// mark: { show: true }, |
|||
// dataView: { show: true, readOnly: false }, |
|||
// magicType: { show: true, type: ["line", "bar"] }, |
|||
// restore: { show: true }, |
|||
// saveAsImage: { show: true } |
|||
// } |
|||
// }, |
|||
tooltip: { |
|||
trigger: "axis" //显示当前列的所有信息 |
|||
}, |
|||
yAxis: { |
|||
type: 'value', |
|||
// axisLabel: { |
|||
// interval: 0, |
|||
// textStyle: { |
|||
// color: 'rgba(255, 255, 255, 1)', |
|||
// fontSize: '12', |
|||
// }, |
|||
// }, |
|||
}, |
|||
lineStyle: { |
|||
color: 'red', |
|||
}, |
|||
series: [ |
|||
{ |
|||
symbol: 'none', |
|||
data: [ |
|||
202, 250, 100, 300, 280, 600, 300, 250, 180, 500, 400, 260, |
|||
], |
|||
type: 'line', |
|||
// smooth: true, |
|||
}, |
|||
] |
|||
data() { |
|||
return { |
|||
myChartStyle: { float: "left", width: "90%", height: "500px" } //图表样式 |
|||
}; |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.initEcharts(); |
|||
}); |
|||
}, |
|||
methods: { |
|||
initEcharts() { |
|||
const option = { |
|||
title: { |
|||
text: "XXXXX公司" |
|||
}, |
|||
grid: { |
|||
top: "10%", |
|||
left: "10%", |
|||
right: "0%", |
|||
bottom: "8%" |
|||
}, |
|||
xAxis: { |
|||
type: "category", |
|||
data: [ |
|||
"1月", |
|||
"2月", |
|||
"3月", |
|||
"4月", |
|||
"5月", |
|||
"6月", |
|||
"7月", |
|||
"8月", |
|||
"9月", |
|||
"10月", |
|||
"11月", |
|||
"12月" |
|||
], |
|||
boundaryGap: false, |
|||
nameTextStyle: { |
|||
color: "#fff" |
|||
}, |
|||
axisLabel: { |
|||
interval: 0, |
|||
textStyle: { |
|||
color: "#ccc", |
|||
fontSize: "12" |
|||
} |
|||
const myChart = this.$echarts.init(document.getElementById("mychart")); |
|||
myChart.setOption(option); |
|||
//随着屏幕大小调节图表 |
|||
window.addEventListener("resize", () => { |
|||
myChart.resize(); |
|||
}); |
|||
} |
|||
} |
|||
}, |
|||
// toolbox: { //工具栏 |
|||
// show: true, |
|||
// feature: { |
|||
// mark: { show: true }, |
|||
// dataView: { show: true, readOnly: false }, |
|||
// magicType: { show: true, type: ["line", "bar"] }, |
|||
// restore: { show: true }, |
|||
// saveAsImage: { show: true } |
|||
// } |
|||
// }, |
|||
tooltip: { |
|||
trigger: "axis" //显示当前列的所有信息 |
|||
}, |
|||
yAxis: { |
|||
type: "value" |
|||
// axisLabel: { |
|||
// interval: 0, |
|||
// textStyle: { |
|||
// color: 'rgba(255, 255, 255, 1)', |
|||
// fontSize: '12', |
|||
// }, |
|||
// }, |
|||
}, |
|||
lineStyle: { |
|||
color: "red" |
|||
}, |
|||
series: [ |
|||
{ |
|||
symbol: "none", |
|||
data: [202, 250, 100, 300, 280, 600, 300, 250, 180, 500, 400, 260], |
|||
type: "line" |
|||
// smooth: true, |
|||
} |
|||
] |
|||
}; |
|||
const myChart = this.$echarts.init(document.getElementById("mychart")); |
|||
myChart.setOption(option); |
|||
//随着屏幕大小调节图表 |
|||
window.addEventListener("resize", () => { |
|||
myChart.resize(); |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.chart-wrap { |
|||
padding: 20px; |
|||
padding: 20px; |
|||
} |
|||
</style> |
|||
</style> |
|||
|
|||
@ -1,168 +1,179 @@ |
|||
<template> |
|||
<div class="credit-wrap"> |
|||
<el-form :inline="true" :model="queryForm"> |
|||
<el-form-item> |
|||
<el-select v-model="queryForm.qualificationCategory" clearable placeholder="" @change="selectVal"> |
|||
<el-option v-for="item in selectData" :key="item.qualificationCategory" |
|||
:label="item.qualificationCategoryLabel" :value="item.qualificationCategory"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="实时信用分数:" label-width="110px"> |
|||
<span style="font-size: 35px;display: block;font-style:italic; font-style:oblique;color: red;">{{ qualificationCategoryLabel }} {{ dynamicCreditScore }}</span> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div class="time-wrap"> |
|||
<span id="y"></span>年<span id="mo"></span>月<span id="s"></span>日 星期<span id="d"></span> |
|||
<span id="h"></span>:<span id="m"></span>:<span id="sec"></span> |
|||
</div> |
|||
<div class="tabs-line"> |
|||
<div class="tabs-wrap"> |
|||
<el-tabs type="border-card"> |
|||
<el-tab-pane label="近一个月"></el-tab-pane> |
|||
<el-tab-pane label="近三个月"></el-tab-pane> |
|||
<el-tab-pane label="近六个月"></el-tab-pane> |
|||
</el-tabs> |
|||
</div> |
|||
<div class="line-wrap"> |
|||
<lineCredit /> |
|||
</div> |
|||
</div> |
|||
<div class="credit-wrap"> |
|||
<el-form :inline="true" :model="queryForm"> |
|||
<el-form-item> |
|||
<el-select |
|||
v-model="queryForm.qualificationCategory" |
|||
clearable |
|||
placeholder="" |
|||
@change="selectVal" |
|||
> |
|||
<el-option |
|||
v-for="item in selectData" |
|||
:key="item.qualificationCategory" |
|||
:label="item.qualificationCategoryLabel" |
|||
:value="item.qualificationCategory" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="实时信用分数:" label-width="110px"> |
|||
<span |
|||
style="font-size: 35px;display: block;font-style:italic; font-style:oblique;color: red;" |
|||
>{{ qualificationCategoryLabel }} {{ dynamicCreditScore }}</span |
|||
> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div class="time-wrap"> |
|||
<span id="y"></span>年<span id="mo"></span>月<span id="s"></span>日 |
|||
星期<span id="d"></span> <span id="h"></span>:<span id="m"></span>:<span |
|||
id="sec" |
|||
></span> |
|||
</div> |
|||
<div class="tabs-line"> |
|||
<div class="tabs-wrap"> |
|||
<el-tabs type="border-card"> |
|||
<el-tab-pane label="近一个月"></el-tab-pane> |
|||
<el-tab-pane label="近三个月"></el-tab-pane> |
|||
<el-tab-pane label="近六个月"></el-tab-pane> |
|||
</el-tabs> |
|||
</div> |
|||
<div class="line-wrap"> |
|||
<lineCredit /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { getParent } from "@/api/enterpriseInformation" |
|||
import lineCredit from "./lineCredit" |
|||
import { getParent } from "@/api/enterpriseInformation"; |
|||
import lineCredit from "./lineCredit"; |
|||
export default { |
|||
components: { |
|||
lineCredit, |
|||
components: { |
|||
lineCredit |
|||
}, |
|||
data() { |
|||
return { |
|||
queryForm: { |
|||
enterpriseId: "", |
|||
qualificationCategory: "" |
|||
}, |
|||
categoryList: [], |
|||
selectData: [], |
|||
dynamicCreditScore: "", |
|||
qualificationCategoryLabel: "" |
|||
}; |
|||
}, |
|||
mounted() { |
|||
this.queryForm.enterpriseId = this.$route.query.enterpriseId; |
|||
this.getTime(); |
|||
this.getDicts("qualification_type").then(res => { |
|||
this.categoryList = res.data.data; |
|||
this.getParentData(); |
|||
}); |
|||
}, |
|||
methods: { |
|||
getParentData() { |
|||
getParent(this.queryForm.enterpriseId).then(res => { |
|||
let dataArr = []; |
|||
console.log(9999, res); |
|||
this.categoryList.forEach(item => { |
|||
res.data.data.forEach(item2 => { |
|||
if (item.dictValue == item2.qualificationCategory) { |
|||
dataArr.push({ |
|||
...item2, |
|||
qualificationCategoryLabel: item.dictLabel |
|||
}); |
|||
} |
|||
}); |
|||
}); |
|||
this.selectData = dataArr; |
|||
this.queryForm.qualificationCategory = this.selectData[0].qualificationCategory; |
|||
this.dynamicCreditScore = this.selectData[0].dynamicCreditScore; |
|||
this.qualificationCategoryLabel = this.selectData[0].qualificationCategoryLabel; |
|||
}); |
|||
}, |
|||
data() { |
|||
return { |
|||
queryForm: { |
|||
enterpriseId: "", |
|||
qualificationCategory: "" |
|||
}, |
|||
categoryList: [], |
|||
selectData: [], |
|||
dynamicCreditScore: "", |
|||
qualificationCategoryLabel: "" |
|||
selectVal(val) { |
|||
this.selectData.forEach(item => { |
|||
if (item.qualificationCategory == val) { |
|||
this.dynamicCreditScore = item.dynamicCreditScore; |
|||
this.qualificationCategoryLabel = item.qualificationCategoryLabel; |
|||
} |
|||
}); |
|||
}, |
|||
mounted() { |
|||
this.queryForm.enterpriseId = this.$route.query.enterpriseId |
|||
this.getTime() |
|||
this.getDicts("qualification_type").then(res => { |
|||
this.categoryList = res.data.data |
|||
this.getParentData() |
|||
}) |
|||
}, |
|||
methods: { |
|||
getParentData() { |
|||
getParent(this.queryForm.enterpriseId).then(res => { |
|||
let dataArr = [] |
|||
this.categoryList.forEach(item => { |
|||
res.data.data.forEach(item2 => { |
|||
if (item.dictValue == item2.qualificationCategory) { |
|||
dataArr.push({ |
|||
...item2, |
|||
qualificationCategoryLabel: item.dictLabel |
|||
}) |
|||
} |
|||
}) |
|||
}) |
|||
this.selectData = dataArr |
|||
this.queryForm.qualificationCategory = this.selectData[0].qualificationCategory |
|||
this.dynamicCreditScore = this.selectData[0].dynamicCreditScore |
|||
this.qualificationCategoryLabel = this.selectData[0].qualificationCategoryLabel |
|||
}) |
|||
}, |
|||
selectVal(val){ |
|||
this.selectData.forEach(item=>{ |
|||
if(item.qualificationCategory==val){ |
|||
this.dynamicCreditScore = item.dynamicCreditScore |
|||
this.qualificationCategoryLabel = item.qualificationCategoryLabel |
|||
} |
|||
}) |
|||
}, |
|||
getTime() { |
|||
var vWeek = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]; |
|||
var now = new Date(); |
|||
|
|||
var year = now.getFullYear(); //得到年份 |
|||
|
|||
var month = now.getMonth() + 1;//得到月份 |
|||
|
|||
var date = now.getDate();//得到日期 |
|||
|
|||
var day_s = now.getDay();//得到周几 |
|||
|
|||
var hour = now.getHours();//得到小时数 |
|||
|
|||
var minute = now.getMinutes();//得到分钟数 |
|||
|
|||
var second = now.getSeconds();//得到秒数 |
|||
|
|||
|
|||
|
|||
getTime() { |
|||
var vWeek = [ |
|||
"星期天", |
|||
"星期一", |
|||
"星期二", |
|||
"星期三", |
|||
"星期四", |
|||
"星期五", |
|||
"星期六" |
|||
]; |
|||
var now = new Date(); |
|||
|
|||
var year = now.getFullYear(); //得到年份 |
|||
|
|||
document.getElementById("y").innerHTML = year; |
|||
var month = now.getMonth() + 1; //得到月份 |
|||
|
|||
var date = now.getDate(); //得到日期 |
|||
|
|||
var day_s = now.getDay(); //得到周几 |
|||
|
|||
document.getElementById("mo").innerHTML = month; |
|||
var hour = now.getHours(); //得到小时数 |
|||
|
|||
var minute = now.getMinutes(); //得到分钟数 |
|||
|
|||
var second = now.getSeconds(); //得到秒数 |
|||
|
|||
document.getElementById("s").innerHTML = date; |
|||
document.getElementById("y").innerHTML = year; |
|||
|
|||
document.getElementById("d").innerHTML = vWeek[day_s]; |
|||
document.getElementById("mo").innerHTML = month; |
|||
|
|||
document.getElementById("h").innerHTML = hour; |
|||
document.getElementById("s").innerHTML = date; |
|||
|
|||
document.getElementById("d").innerHTML = vWeek[day_s]; |
|||
|
|||
document.getElementById("h").innerHTML = hour; |
|||
|
|||
document.getElementById("m").innerHTML = minute; |
|||
document.getElementById("m").innerHTML = minute; |
|||
|
|||
document.getElementById("sec").innerHTML = second; |
|||
|
|||
setTimeout(this.getTime, 1000); //定时器一直调用show()函数 |
|||
|
|||
document.getElementById("sec").innerHTML = second; |
|||
|
|||
setTimeout(this.getTime, 1000);//定时器一直调用show()函数 |
|||
|
|||
return ""; |
|||
} |
|||
return ""; |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.credit-wrap { |
|||
margin: 20px; |
|||
height: 700px; |
|||
border: 1px solid #cfe7fe; |
|||
|
|||
/deep/.el-form { |
|||
margin-top: 20px; |
|||
display: flex; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.time-wrap { |
|||
display: flex; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.tabs-line { |
|||
margin-top: 20px; |
|||
} |
|||
|
|||
.list-wrap { |
|||
margin-top: 20px; |
|||
} |
|||
margin: 20px; |
|||
height: 700px; |
|||
border: 1px solid #cfe7fe; |
|||
|
|||
/deep/.el-form { |
|||
margin-top: 20px; |
|||
display: flex; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.time-wrap { |
|||
display: flex; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.tabs-line { |
|||
margin-top: 20px; |
|||
} |
|||
|
|||
.list-wrap { |
|||
margin-top: 20px; |
|||
} |
|||
} |
|||
|
|||
/deep/.el-tabs--border-card>.el-tabs__header { |
|||
background: #fff; |
|||
/deep/.el-tabs--border-card > .el-tabs__header { |
|||
background: #fff; |
|||
} |
|||
</style> |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue