前端组分配四个任务。我主要负责农场品产量细则页面、月平均降水、月平均气温和价格比较页面。
农作物产量细则页面：
代码：
<template>
<div class="monitor">
<!-- 图标 -->
<!--添加多选框-->
<el-dialog title="多选城市" :visible.sync="mutiDialogVisible" width="24%" >
<!--内容主体区域-->
<el-form>
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
<div style="margin: 15px 0;"></div>
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>
</el-form>
<!--底部区域-->
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="submit()">确 定</el-button>
</span>
</el-dialog>
<!-- 图标二 -->
<el-row :gutter="20">
<el-col :xs="24" :sm="24" :md="13" :lg="17" :xl="17">
<el-row class="monitor-header-two" :gutter="20">
<el-col :span="24">
<div class="monitor-cart-name">
<div class="monitor-cart-name-left">
<div class="monitor-cart-name-left-icon">
<Visitors class="monitor-cart-name-left-icon-s" />
</div>
农作物总产量堆叠图
</div>
<el-form ref="nongchan" :model="nongchan" >
<div class="monitor-cart-name-right">
<div class="monitor-cart-name-right-list"></div>
<el-form-item >
<el-select size="small" v-model="nongchan.chart" placeholder="请选择图表类型">
<el-option
v-for="item in options"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item >
<font color="white">11</font>
<el-form-item >
<el-select size="small" v-model="nongchan.type" placeholder="请选择类型">
<el-option
v-for="item in options_type"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item >
<font color="white">11</font>
<font color="white">11</font>
<el-form-item >
<div class="monitor-cart-name-right-list">
<el-button size="small" type="primary" @click="openDialog()">多选</el-button>
</div>
</el-form-item >
</div>
</el-form>
</div>
</el-col>
<el-col :span="24">
<div id="main1" style="width: 100%;height:800px;"></div>
</el-col>
</el-row>
<el-row class="monitor-header-two" :gutter="20">
<el-col :span="24">
<div class="monitor-cart-name">
<div class="monitor-cart-name-left">
<div class="monitor-cart-name-left-icon">
<Visitors class="monitor-cart-name-left-icon-s" />
</div>
农作物总产量排序
</div>
<el-form ref="nongchan" :model="nongchan" >
<div class="monitor-cart-name-right">
<div class="monitor-cart-name-right-list"></div>
<el-form-item >
<el-select size="small" v-model="nongchan.year" placeholder="请选择年份">
<el-option
v-for="item in options9"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item >
<font color="white">11</font>
<el-form-item >
<el-select size="small" v-model="nongchan.type" placeholder="请选择类型">
<el-option
v-for="item in options_type"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item >
<font color="white">11</font>
<font color="white">11</font>
<el-form-item >
<el-radio-group v-model="radio">
<el-radio :label="3" @change="ascending()">升序</el-radio>
<el-radio :label="6" @change="descending()">降序</el-radio>
</el-radio-group>
</el-form-item >
</div>
</el-form>
</div>
</el-col>
<el-col :span="24">
<div id="main2" style="width: 100%;height:800px;"></div>
</el-col>
</el-row>
</el-col>
</el-row>
</div>
</template>
<script>
const cityOptions = ['济南', '青岛','淄博','枣庄','东营','烟台','潍坊','济宁','泰安','威海','日照','莱芜','临沂','德州','聊城','滨州','菏泽'];
import Monitorcar from '../../components/analyze/monitorcar'
import Count from '../../assets/icon/count.svg'
import Visitors from '../../assets/icon/visitors.svg'
import CircleSvg from '../../assets/icon/circle.svg'
import HerdSvg from '../../assets/icon/herd.svg'
import CryingSvg from '../../assets/icon/crying.svg'
import LaughSvg from '../../assets/icon/laugh.svg'
import * as echarts from 'echarts';
import countTo from 'vue-count-to';
export default {
data(){
this.chartSettings = {}
return {
isOK:0,
tempList:{},
radio: '1',
mutiDialogVisible:false,
checkAll: false,
checkedCities: ['济南', '青岛'],
cities: cityOptions,
isIndeterminate: true,
ascendingList:{},
descendingList:{},
options: [
'柱状堆叠图',
'堆叠面积图'
],
options9:[
'2000','2001','2002','2003','2004','2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015',
'2016','2017','2018','2019'
],
nongchan:{
chart: '柱状堆叠图',
type: '小麦',
year: '2019',
month:'1'
},
date:{
year:2019,
month:1
},
options2: [
'1','2','3','4','5','6','7','8','9','10','11','12'
],
contrast:{
city1:'',
city2:'',
type:'',
year:null
},
options_type:['小麦','棉花','玉米'],
options4: [{
value: '选项1',
label: '黄金糕'
},{
value: '选项5',
label: '北京烤鸭'
}],
options5: [{
value: '选项1',
label: '黄金糕'
},{
value: '选项5',
label: '北京烤鸭'
}],
options6: [
1999,
2000
],
value1:'',
config:{
data: [66],
shape: 'roundRect'
},
chartData:{
columns: ['年份', '总产量', '种植面积', '单产×10'],
rows: [
// { '年份': '2000', '总产量': 1393, '种植面积': 1093, '单产': 0.32 },
]
},
chartData2:{
columns: ['指标', '城市1', '城市2'],
rows: [
// { '指标': '总产量', '城市1': 1393, '城市2': 1093},
// { '指标': '种植面积', '城市1': 3530, '城市2': 3230 },
// { '指标': '单产', '城市1': 4593, '城市2': 4293}
]
},
colors : ['#F141AF','#F85E1F', '#9830FA', '#0C99FD', '#25D9B4','#1AA2FC'],
scaleData: {
columns: ['类目', '销量'],
rows: [
{ '类目': '安心蔬菜', '销量': 1393 },
{ '类目': '时令水果', '销量': 3530 },
{ '类目': '乳品早点', '销量': 2923 },
{ '类目': '酒水饮料', '销量': 1723 },
{ '类目': '速冻食品', '销量': 3792 },
{ '类目': '其他', '销量': 4593 }
]
},
funnelSettings: {
sequence: ['跳出率', '留存率', '活跃率', '转化率']
},
funnelData: {
columns: ['状态', '数值'],
rows: [
{ '状态': '跳出率', '数值': 900 },
{ '状态': '留存率', '数值': 600 },
{ '状态': '活跃率', '数值': 300 },
{ '状态': '转化率', '数值': 200 }
]
},
va : 1000
}
},
components:{
Monitorcar,
Count,
Visitors,
CircleSvg,
countTo,
HerdSvg,
CryingSvg,
LaughSvg
},
created(){
this.ascending()
this.getTemList(this.checkedCities,this.nongchan.type)
//刚进入网页的渲染
},
mounted(){
var chartDom = document.getElementById('main1');
var myChart = echarts.init(chartDom);
var option;
var chartDom1 = document.getElementById('main2');
var myChart1 = echarts.init(chartDom1);
var option1;
option = {
title: {
text: '农产品总产量堆叠图'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['2000','2001','2002','2003','2004','2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016','2017','2018','2019']
},
yAxis: {
type: 'value'
},
series: [{
name:'济南',
type: 'bar',
stack: '总量',
data: [-0.2,1.4, 10.7, 14.6, 22.3, 27.9, 28.2, 25.2,22.5,15.3,9,1.9],
},
{name:'青岛',
type: 'bar',
stack: '总量',
data: [0,1.2, 6.3, 12.2, 19.6, 22.3, 26.3, 25.7,26.3,25.7,22.9,15.8,9.5,2.7],
}
]
};
option1 = {
title:{text:'农作物产量排序'},
xAxis: {
type: 'category',
data: ['泰安', '德州', '滨州', '东营', '聊城', '淄博', '潍坊','烟台','济南','青岛','莱芜','威海','日照','临沂','济宁','菏泽','枣庄']
},
yAxis: {
type: 'value'
},
series: [{
data: [-1.3, -1.3, -1, -0.9, -0.7, -0.6, -0.6,-0.5,-0.2,0,0,0.1,0.3,0.3,0.5,0.6,1.1],
type: 'line',
smooth: true
}]
};
myChart.setOption(option)
myChart1.setOption(option1)
},
methods: {
getAscTem(){
this.$axios.post('/cityclimate/avg_temp_asc',this.date,
).then(res =>{
console.log(res)
})
},
async getTemList(checkedCitiesList,y){
let year1 = parseInt(y)
let temlist={
checkedCities:checkedCitiesList,
type: this.nongchan.type
}
console.log("打印参数")
console.log(temlist)
console.log("打印temlist")
console.log(temlist)
this.$axios.post('/citycrop/weight_of_cities',temlist,
).then(res =>{
console.log(res)
console.log("打印返回")
console.log(res.data)
this.templist=res.data
const myChart = this.$echarts.init(document.getElementById('main1'));
let option = myChart.getOption();
let xAxis = option.xAxis;
let series = option.series;
series.splice(0, series.length)
console.log("-0---------------")
//后端接口获取数据
console.log("打印checkCities")
console.log(this.checkedCities)
console.log("打印调用")
console.log(this.templist)
if(this.nongchan.chart=='柱状堆叠图'){
for(let i =0;i<this.templist.length;i++){
series.push( {
name:this.templist[i].city,
type: 'bar',
stack: '总量',
data: this.templist[i].list
})
}
}
else{
for(let i =0;i<this.templist.length;i++){
series.push( {
name:this.templist[i].city,
type: 'line',
stack: '总量',
data: this.templist[i].list,
areaStyle: {},
emphasis: {
focus: 'series'
},
})
}
}
console.log("打印series")
for(let i=0;i<series.length;i++){
console.log(series[i])
}
myChart.setOption(option)
})
},
ascending(){
console.log(this.radio)
let y=parseInt(this.nongchan.year)
let asclist={
year:y,
type:this.nongchan.type
}
this.$axios.post('/citycrop/asc_weight',asclist,
).then(res =>{
console.log("__________")
console.log("打印升序")
console.log(res.data)
this.ascendingList=res.data
const myChart1 = this.$echarts.init(document.getElementById('main2'));
let option = myChart1.getOption();
let xAxis = option.xAxis;
let series = option.series;
let d=[];
series.splice(0, series.length)
xAxis[0].data.splice(0, xAxis[0].data.length)
for(let i=0;i<this.ascendingList.length;i++){
console.log(this.ascendingList[i].city)
xAxis[0].data.push(this.ascendingList[i].city)
d.push(this.ascendingList[i].weight_all)
}
series.push({
data: d,
type: 'line',
smooth: true
})
//series更新
myChart1.setOption(option)
})
},
descending(){
console.log(this.radio)
let y=parseInt(this.nongchan.year)
let desclist={
year:y,
type:this.nongchan.type
}
this.$axios.post('/citycrop/desc_weight',desclist,
).then(res =>{
console.log("__________")
console.log("打印降序")
console.log(res.data)
this.descendingList=res.data
const myChart1 = this.$echarts.init(document.getElementById('main2'));
let option = myChart1.getOption();
let xAxis = option.xAxis;
let series = option.series;
let d=[];
series.splice(0, series.length)
xAxis[0].data.splice(0, xAxis[0].data.length)
for(let i=0;i<this.descendingList.length;i++){
console.log(this.descendingList[i].city)
xAxis[0].data.push(this.descendingList[i].city)
d.push(this.descendingList[i].weight_all)
}
series.push({
data: d,
type: 'line',
smooth: true
})
//series更新
myChart1.setOption(option)
})
},
getMapData() {
const myChart = this.$echarts.init(document.getElementById('main1'));
let option = myChart.getOption();
let xAxis = option.xAxis;
let series = option.series;
series.splice(0, series.length)
console.log("-0---------------")
//后端接口获取数据
console.log("打印checkCities")
console.log(this.checkedCities)
console.log("打印调用")
console.log(this.templist)
if(this.nongchan.chart=='柱状堆叠图'){
for(let i =0;i<this.templist.length;i++){
series.push( {
name:this.templist[i].city,
type: 'bar',
stack: '总量',
data: this.templist[i].list
})
}
}
else{
for(let i =0;i<this.templist.length;i++){
series.push( {
name:this.templist[i].city,
type: 'line',
stack: '总量',
data: this.templist[i].list,
areaStyle: {},
emphasis: {
focus: 'series'
},
})
}
}
console.log("打印series")
console.log(series[0])
myChart.setOption(option)
},
openDialog(){
this.mutiDialogVisible=true
},
submit(){
console.log(this.checkedCities)
this.mutiDialogVisible=false
this.getTemList(this.checkedCities,this.nongchan.year)
},
handleCheckAllChange(val) {
this.checkedCities = val ? cityOptions : [];
this.isIndeterminate = false;
console.log(val)
},
handleCheckedCitiesChange(value) {
let checkedCount = value.length;
this.checkAll = checkedCount === this.cities.length;
console.log(this.checkedCities)
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
},
submitForm2(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
const _this = this
// this.chartData2.rows.push(
// { '指标': '11', '城市1': 4593, '城市2': 4293},
// { '指标': '12', '城市1': 4593, '城市2': 4293},
// { '指标': '13', '城市1': 4593, '城市2': 4293},
// )
//在Post里面要带有data，这里看来用this就没问题
this.$axios.post('/citycrop/cropscompare',this.contrast,
).then(res =>{
console.log(res)
// _this.chartData.rows = res.data.data
this.chartData2.rows = []
const arr = ['总产量','种植面积','单产']
const next = [res.data.weight_all,res.data.area,res.data.weight_avg]
console.log(next)
for(let i = 0, len = arr.length; i < len; i++) {
var zhibiao = '指标'
var city1 = '城市1'
var city2 = '城市2'
var obj = {}
obj[zhibiao]=arr[i]
obj[city1]=next[i].city1
obj[city2]=next[i].city2
console.log(obj)
this.chartData2.rows.push(
obj
)
}
this.$notify({
title: '查询完成',
message: '',
type: 'success',
offset: 100
});
// _this.$alert('操作成功', '提示', {
// confirmButtonText: '确定',
// callback: action => {
// _this.$router.push("/blogs")
// }
// });
})
} else {
console.log('error submit!!');
return false;
}
});
},
}
}
</script>
<style scoped>
.monitor{
background: #F5F7F9;
padding: 25px;
box-sizing: border-box;
width: 100%;
min-height: 100%;
}
.monitor-header{
border: 1px solid #E6E6E6;
background: #ffffff;
border-radius: 5px;
margin-bottom: 20px;
}
.monitor-header-two{
border: 1px solid #E6E6E6;
background: #ffffff;
border-radius: 5px;
margin-bottom: 20px;
}
.monitor-cart-name{
width: 100%;
height: 50px;
/* background: yellow; */
margin-bottom: 20px;
border-bottom: 1px solid #E6E6E6;
display: flex;
justify-content: space-between;
}
.monitor-cart-name-left{
width: 100%;
height: 100%;
/* background: blueviolet; */
line-height: 42px;
color: #5C5C5C;
font-size: 14px;
font-weight: bold;
display: flex;
align-items: center;
}
.monitor-cart-name-left-icon{
width: 30px;
height: 30px;
background: #F7EEFF;
border-radius: 2px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
margin-right: 10px;
}
.monitor-cart-name-left-icon-s{
width: 20px;
height: 20px;
color: blueviolet;
fill: currentColor;
}
.monitor-cart-name-right{
display: flex;
justify-content: flex-end;
align-items: center;
}
.monitor-cart-name-right-list{
width: 60px;
height: 50px;
/* background: chartreuse; */
text-align: center;
line-height: 50px;
color: #515A6E;
font-size: 14px;
cursor: pointer;
}
.monitor-cart-name-right-list:hover{
color: #2D8CF0;
}
.monitor-cart-box{
/* background: chocolate; */
width: 100%;
height: 100px;
padding: 10px 15px 0;
box-sizing: border-box;
/* border: 1px solid #E6E6E6; */
background: #ffffff;
border-radius: 5px;
margin-bottom: 20px;
}
.monitor-cart-probability{
/* background: cornflowerblue; */
width: 100%;
height: 210px;
padding: 20px 15px 0px;
box-sizing: border-box;
}
.monitor-cart-probability-box{
width: 100%;
height: 80%;
/* border: 1px solid #515A6E; */
border-radius: 5px;
}
.monitor-cart-probability-name{
width: 100%;
height: 20%;
text-align: center;
line-height: 34px;
/* background: chartreuse; */
color: #515A6E;
font-size: 14px;
cursor: pointer;
}
.monitor-visitors{
width: 100%;
height: 400px;
}
.monitor-visitors-scale{
display: flex;
justify-content: space-between;
}
.monitor-visitors-left{
width: 80%;
height: 100%;
margin-left: 90px;
}
.monitor-visitors-right{
width: 40%;
height: 100%;
/* background: chocolate; */
padding: 20px;
box-sizing: border-box;
}
.monitor-visitors-right-list{
width: 100%;
height: 40px;
/* background: cyan; */
display: flex;
justify-content: flex-start;
align-items: center;
}
.monitor-visitors-right-list-icon{
width: 15px;
height: 15px;
color: #666666;
fill: currentColor;
}
.monitor-visitors-right-list-name{
width: 120px;
/* background: darkgoldenrod; */
height: 40px;
line-height: 40px;
font-size: 12px;
color: #595959;
padding-left: 10px;
box-sizing: border-box;
}
.monitor-visitors-right-list-number{
flex: 1;
/* background: yellowgreen; */
height: 40px;
line-height: 40px;
font-size: 12px;
color: #8C8C8C;
padding-left: 10px;
box-sizing: border-box;
text-align: right;
padding-right: 15px;
}
.monitor-header-users{
width: 100%;
height: auto;
padding: 0px 10px;
box-sizing: border-box;
}
.monitor-header-users-time{
width: 100%;
height: 30px;
line-height: 30px;
font-size: 12px;
color: #515A6E;
text-align: center;
margin-bottom: 10px;
}
.monitor-header-users-number{
width: 100%;
height: 58px;
text-align: center;
font-size: 40px;
line-height: 58px;
color: #515A6E;
font-weight: bold;
}
.monitor-header-users-message{
width: 100%;
height: 40px;
line-height: 40px;
font-size: 12px;
color: #515A6E;
text-align: center;
}
/* 用户数 */
.monitor-header-users-icon{
width: 100%;
height: 50px;
text-align: center;
/* background: chocolate; */
display: flex;
justify-content: center;
align-items: center;
}
.monitor-header-users-icon-s{
width: 36px;
height: 36px;
fill: currentColor;
color: #2399FA;
}
/* 评论 */
.monitor-header-comment{
width: 100%;
height: auto;
}
.monitor-header-comment .monitor-header-comment-list:nth-last-child(1){
border-bottom-color: transparent;
}
.monitor-header-comment-list{
width: 100%;
height: 120px;
display: flex;
box-sizing: border-box;
border-bottom: 1px solid #E8EAEC;
}
.monitor-header-comment-list-li{
width: 33%;
height: 120px;
}
.monitor-header-comment-list-li-number{
font-weight: bold;
font-size: 30px;
color: #515A6E;
line-height: 120px;
text-align: center;
}
.monitor-header-comment-list-li-icon{
width: 50px;
height: 50px;
color: #FBD971;
fill: currentColor;
}
.monitor-header-comment-list-li-tag{
display: flex;
/* background: cyan; */
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.monitor-header-comment-list-li-tag-text{
width: 100%;
height: 35px;
text-align: center;
line-height: 35px;
color: #808695;
font-size: 14px;
}
.monitor-header-comment-list-li-percentage{
height: 100%;
line-height: 120px;
color: #36C17B;
font-size: 18px;
text-align: center;
}
</style>
1417
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
