山东大学暑期项目实训——农产品智能推荐系统——第三周（3）

2023-10-08 13:00:34

项目实训 7.18

完成月平均降水细则前端。

代码：

<el-dialog title="多选城市" :visible.sync="mutiDialogVisible" width="24%" >

<el-form>

<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>

<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>

<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>

月平均降水

</div>

<el-form ref="nongchan" :model="nongchan" >

<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 >

<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 >

<el-form-item >

<el-button size="small" type="primary" @click="openDialog()">多选</el-button>

</div>

</el-form-item >

</div>

</el-form>

</div>

</el-col>

<el-col :span="24">

</el-col>

</el-row>

<el-row class="monitor-header-two" :gutter="20">

<el-col :span="24">

</div>

月平均气温排序

</div>

<el-form ref="nongchan" :model="nongchan" >

<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 >

<el-form-item >

<el-select size="small" v-model="nongchan.month" placeholder="请选择月份">

<el-option

v-for="item in options2"

:key="item"

:label="item"

:value="item">

</el-option>

</el-select>

</el-form-item >

<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">

</el-col>

</el-row>

</el-col>

</el-row>

</div>

</template>

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 {

radio: '1',

mutiDialogVisible:false,

checkAll: false,

checkedCities: ['济南', '青岛'],

cities: cityOptions,

isIndeterminate: true,

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:'',

month:''

options2: [

'一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'

contrast:{

city1:'',

city2:'',

type:'',

year:null

options3: [{

value: '选项1',

label: '黄金糕'

},{

value: '选项5',

label: '北京烤鸭'

}],

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.getMapData()

//刚进入网页的渲染

const _this = this

_this.$axios.get("/citycrop/city").then(res =>{

console.log(res)

_this.options = res.data.city

})

_this.$axios.get("/citycrop/croptype").then(res2 =>{

console.log(res2)

_this.options2 = res2.data.croptype

})

_this.$axios.get("/citycrop/cropyear").then(res3 =>{

console.log(res3)

_this.options6 = res3.data.year

})

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: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']

yAxis: {

type: 'value'

series: [{

name:'济南',

type: 'bar',

stack: '总量',

data: [2000,820, 932, 901, 934, 1290, 1330, 1320,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1100,1100],

{name:'青岛',

type: 'bar',

stack: '总量',

data: [2000,820, 932, 901, 934, 1290, 1330, 1320,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1100,1100],

}

]

};

option1 = {

title:{text:'月平均降水排序'},

xAxis: {

type: 'category',

data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

yAxis: {

type: 'value'

series: [{

data: [820, 932, 901, 934, 1290, 1330, 1320],

type: 'line',

smooth: true

}]

};

myChart.setOption(option)

myChart1.setOption(option1)

methods: {

ascending(){

console.log(this.radio)

//后端升序

const myChart1 = this.$echarts.init(document.getElementById('main2'));

let option = myChart1.getOption();

let xAxis = option.xAxis;

let series = option.series;

series.splice(0, series.length)

xAxis[0].data.splice(0, xAxis[0].data.length)

xAxis[0].data=['2000','2001','2003','2004','2005','2006','2007']

//series更新

myChart1.setOption(option) },

descending(){

console.log(this.radio)

//后端降序

const myChart1 = this.$echarts.init(document.getElementById('main2'));

let option = myChart1.getOption();

let xAxis = option.xAxis;

let series = option.series;

series.splice(0, series.length)

xAxis[0].data.splice(0, xAxis[0].data.length)

xAxis[0].data=['2000','2001','2003','2004','2005','2006','2007']

//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("Ssss")

//后端接口获取数据

if(this.nongchan.chart=='柱状堆叠图'){

for(let i =0;i<this.checkedCities.length;i++){

series.push( {

name:this.checkedCities[i],

type: 'bar',

stack: '总量',

data: [2000,820, 932, 901, 934, 1290, 1330, 1320,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1100,1100],

})

}

else{

for(let i =0;i<this.checkedCities.length;i++){

series.push( {

name:this.checkedCities[i],

type: 'line',

stack: '总量',

data: [500,820, 932, 901, 934, 1290, 1330, 1320,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1100,1100],

areaStyle: {},

emphasis: {

focus: 'series'

})

}

console.log(series[0])

myChart.setOption(option)

openDialog(){

this.mutiDialogVisible=true

submit(){

console.log(this.checkedCities)

this.mutiDialogVisible=false

this.getMapData()

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;

submitForm(formName) {

this.$refs[formName].validate((valid) => {

if (valid) {

console.log(111)

const _this = this

// this.chartData.rows.push(

// { '年份': '1', '总产量': this.va, '种植面积': 3230, '单产': 0.26 },

// )

// 在Post里面要带有data，这里看来用this就没问题

this.$axios.post('/citycrop/crops',this.nongchan,

// {

// headers:{

// "Authorization":localStorage.getItem("token")

// }

).then(res =>{

this.chartData.rows = []

console.log(res)

// _this.chartData.rows = res.data.data

const area = res.data.area;

const weight_all = res.data.weight_all;

const weight_avg = res.data.weight_avg;

console.log(area)

console.log(weight_all)

console.log(weight_avg)

for(let i = 0,year = 2000, len = area.length; i < len; i++,year++) {

var name = '年份'

var all = '总产量'

var are = '种植面积'

var single = '单产×10'

var obj = {}

obj[name]=year.toString()

obj[all]=weight_all[i]

obj[are]=area[i]

obj[single]=weight_avg[i] * 10

console.log(obj)

this.chartData.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;

}

});

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,

// {

// headers:{

// "Authorization":localStorage.getItem("token")

// }

).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>

.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>

页面展示：

码农公寓

相关文章