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

项目实训 7.17

完成了月平均气温细则的前端部分：

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