其他分享
首页 > 其他分享> > 山东大学暑期项目实训——农产品智能推荐系统——第三周(3)

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

作者:互联网

项目实训 7.18

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

代码:

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

                                <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.month" placeholder="请选择月份">

                                                    <el-option

                                                            v-for="item in options2"

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

                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>

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

页面展示:

标签:monitor,data,100%,暑期,height,width,实训,山东大学,1000
来源: https://blog.csdn.net/weixin_43845888/article/details/118861689