項(xiàng)目7Vue+Echarts農(nóng)業(yè)數(shù)據(jù)管理圖表數(shù)據(jù)傳輸項(xiàng)目7Vue+ECharts農(nóng)業(yè)數(shù)據(jù)管理圖表數(shù)據(jù)傳輸主講人：邵佳靚項(xiàng)目描述本任務(wù)分別采用使用jQuery操作DOM和使用jQuery讀取文本中的JSON數(shù)據(jù)兩種方式，完成智慧農(nóng)業(yè)數(shù)據(jù)大屏中的公司簡介、技術(shù)資源和農(nóng)資產(chǎn)品市場價格等內(nèi)容的拼接和展示。其中，技術(shù)資源的內(nèi)容以分頁標(biāo)簽的形式展示，農(nóng)資產(chǎn)品市場價格以滾屏消息的形式展示。該部分內(nèi)容作為后續(xù)幾個任務(wù)的基礎(chǔ)，需要全面了解和掌握。我國農(nóng)業(yè)信息化已經(jīng)取得了顯著進(jìn)展，為農(nóng)業(yè)現(xiàn)代化建設(shè)提供了有力支撐。在未來，隨著科技的不斷進(jìn)步和創(chuàng)新，我國農(nóng)業(yè)信息化還將取得更多的突破性成果，為農(nóng)業(yè)可持續(xù)發(fā)展做出更大的貢獻(xiàn)。項(xiàng)目目標(biāo)01知識目標(biāo)了解Axios的概念。了解路由VueRouter的概念及基本用法。了解Vuex的基本概念和工作原理。了解JSON數(shù)據(jù)結(jié)構(gòu)02能力目標(biāo)能在項(xiàng)目中安裝并使用Axios。能在項(xiàng)目中配置VueRouter。能實(shí)現(xiàn)路由的嵌套。03素質(zhì)目標(biāo)按照企業(yè)交付標(biāo)準(zhǔn)完成項(xiàng)目，增強(qiáng)團(tuán)隊精神。為農(nóng)業(yè)發(fā)展注入科技力量，提升科技自信。實(shí)現(xiàn)數(shù)據(jù)接口，體會通力合作的作用，提升團(tuán)隊協(xié)作意識。任務(wù)1AJAX與Axios任務(wù)準(zhǔn)備任務(wù)實(shí)施任務(wù)拓展7.1.1認(rèn)識Axios是一個基于Promise的網(wǎng)絡(luò)請求庫，適用于瀏覽器和Node.js環(huán)境。1.Axios（是什么？）特點(diǎn)01020304在Vue.js等前端框架中，Axios因其出色的性能和易用性而被了廣泛應(yīng)用?；谠腦MLHttpRequest進(jìn)行封裝，提供了更簡潔、易用的API。支持豐富的配置選項(xiàng)，可以方便地設(shè)置請求頭、請求體等參數(shù)。它還提供了攔截器功能。響應(yīng)數(shù)據(jù)自動轉(zhuǎn)換為JSON格式，無需手動解析。支持PromiseAPI，使異步操作更加簡潔易于管理。7.1.2Axios的基礎(chǔ)用法（1）安裝Axios1（1）使用npm命令安裝Axios。npminstallaxios（2）使用yarn命令安裝Axios。yarnaddaxios在項(xiàng)目根目錄下，打開終端或命令行界面，使用npm命令或yarn命令來安裝Axios。7.1.2Axios的基礎(chǔ)用法（2）使用Axios<template>

<div>

<table>

<thead>

<tr>

<!--表頭列-->

</tr>

</thead>

<tbody>

<trv-for="itemintableData":key="item.id">

<!--表格數(shù)據(jù)列-->

</tr>

</tbody>

</table>

</div>

</template>

<script>

importaxiosfrom'axios';

exportdefault{

data(){

return{

tableData:[]//將tableData初始化為一個空數(shù)組

};

},

created(){

this.fetchData();//在組件創(chuàng)建時獲取數(shù)據(jù)

},

methods:{

fetchData(){

axios.get("/dataSummary.json").then(res=>{

this.tableData=res.data;//將返回的數(shù)據(jù)賦值給tableData

}).catch(error=>{

console.error("Errorfetchingdata:",error);//處理請求失敗的情況

});

}

}

};

</script>在以上示例中，當(dāng)Vue組件被創(chuàng)建時（created生命周期鉤子），會調(diào)用fetchData()方法來獲取數(shù)據(jù)。一旦數(shù)據(jù)被成功獲取，就會更新tableData數(shù)組，隨后Vue的響應(yīng)式系統(tǒng)會自動更新DOM來反映新的數(shù)據(jù)。2以下是一個完整的Vue組件示例，展示了在Vue組件中使用Axios的過程。任務(wù)2前端路由VueRouter任務(wù)準(zhǔn)備任務(wù)實(shí)施任務(wù)拓展7.2.1VueRouter的基本用法

VueRouter（是什么？）VueRouter是Vue.js官方的路由管理器，與Vue.js核心深度集成，使構(gòu)建單頁面應(yīng)用（SPA）變得輕而易舉。路由是SPA的路徑管理器而SPA是現(xiàn)代Web開發(fā)的主流方式之一，它提供了一種在用戶與Web應(yīng)用交互時無須重新加載整個頁面的機(jī)制。7.2.1VueRouter的基本用法1.VueRouter的安裝1使用npm命令安裝VueRouter。npminstallvue-router2使用yarn命令安裝VueRouter。yarnaddvue-router2.VueRouter的基本使用VueRouter安裝完成后，就可以使用路由了。路由的基本使用步驟為：首先定義路由組件，以便使用VueRouter控制路由組件的展示與切換；然后定義路由鏈接和路由視圖，以便告知路由組件渲染頁面的位置；接著在項(xiàng)目中創(chuàng)建路由模塊；最后導(dǎo)入并掛載路由模塊。接下來通過實(shí)際操作的方式演示VueRouter的使用方法，具體使用步驟如下。7.2.1VueRouter的基本用法1）定義路由組件在“src\components”文件夾下創(chuàng)建兩個組件，分別為Home（首頁）組件和About（關(guān)于）組件，用于演示組件的切換效果，組件名分別為Home.vue和About.vue。1Home.vue組件的具體代碼如下。<template><divclass-"home-container"><h3>Home組件</h3></div></template><stylescoped>.about-container{min-height:150px;background-color:#f2f2f2;padding:15px;}</style>About.vue組件的具體實(shí)現(xiàn)代碼如下。2<template><divclass="about-container">

<h3>About組件</h3></div></template><styleacoped>.about-container{

min-height:150px;

background-color:#f2f2f2;

10padding:15px;}</style>7.2.1VueRouter的基本用法2）定義路由鏈接和路由視圖在App根組件中使用<router-view>顯示當(dāng)前路由對應(yīng)的組件，用<router-linkto="path">定義路由跳轉(zhuǎn)鏈接，to屬性需匹配路由配置的path。1

在“src\App.vue”文件中，定義路由視圖及Home組件和About組件的路由鏈接，具體實(shí)現(xiàn)代碼如下。1. <template>2. <divclass="app-container">3. <h1>App根組件</h1>4. <router-linkto="/home">首頁</router-link>5. <router-linkto="/about">關(guān)于</router-link>6. <hr>7. <router-view></router-view>8. </div>9. </template>10. <stylescoped>11. .app-container{12. text-align:center;13. font-size:16px;14. }15. app-containera{16. padding:10px;17. color:#000;18. }19. .app-containera.router-link-active{20. color:#fff;21. background-color:#000;22. }23. </style>在上述代碼中，第4行代碼通過to屬性定義Home組件的鏈接地址為“/home”，與路由匹配規(guī)則中的path屬性值“/home”對應(yīng)；第5行代碼通過to屬性定義About組件的鏈接地址為“/about”，與路由匹配規(guī)則中的path屬性值“/about”對應(yīng)；第7行代碼使用<router-view>標(biāo)簽渲染當(dāng)前路由對應(yīng)的組件；第19~22行代碼用于為激活的路由鏈接設(shè)置高亮樣式。7.2.1VueRouter的基本用法3）創(chuàng)建路由模塊在項(xiàng)目的src文件夾下創(chuàng)建一個名為router的文件夾，并在其中創(chuàng)建一個index.js文件作為路由模塊，在該文件中按照如下步驟進(jìn)行操作。1導(dǎo)入路由相關(guān)函數(shù)，具體代碼如下。在上述代碼中，從vue-router中導(dǎo)入了createRouter()函數(shù)和createWebHashHistory()函數(shù)。其中，createRouter()函數(shù)用于創(chuàng)建路由的實(shí)例對象；createWebHashHistory()函數(shù)用于指定路由的工作模式為Hash。另外，如果需要指定路由的工作模式為HTML5，可以將createWebHashHistory()函數(shù)更換為createWebHistory()函數(shù)。導(dǎo)入需要被路由控制的Home組件和About組件，具體實(shí)現(xiàn)代碼如下。2import{createRouter,createWebHashHistory}from'vue-router'importHomefrom'./components/Home.vue'importAboutfrom'./components/About,vue'7.2.1VueRouter的基本用法3創(chuàng)建路由實(shí)例對象，具體實(shí)現(xiàn)代碼如下。導(dǎo)入需要被路由控制的Home組件和About組件，具體實(shí)現(xiàn)代碼如下。4exportdefaultrouter1. constrouter=createRouter({2. history:createWebHashHistory(),3. routes:[4. {path:'/home',component:Home},5. {path:'/about',component:About},6. ]7. })上述代碼的組件加載方式為一次性加載所有組件。如果需要通過懶加載的方式動態(tài)加載組件，則可以刪除步驟二中的代碼，同時將第3～6行代碼改為如下形式。在上述代碼中，第1～7行代碼用于創(chuàng)建路由實(shí)例對象。第2行代碼通過history屬性指定路由的工作模式為Hash；第3行代碼中的routes數(shù)組用于定義路由匹配規(guī)則；第4行和第5行代碼中的path屬性表示待匹配的路徑，component屬性表示路徑對應(yīng)的組件。routes:[{path:'/home',component:()=>import(‘./components/Home.vue’)},{path:'/about',component:()->import('./components/About.vue')}上述代碼用于將路由實(shí)例對象router導(dǎo)出，以供其他模塊導(dǎo)入并使用。7.2.1VueRouter的基本用法4）導(dǎo)入并掛載路由模塊1在“src\main.js”文件中導(dǎo)入并掛載路由模塊，具體實(shí)現(xiàn)代碼如下。1. import{createApp}from'vue'2. import'./style.css'3. importAppfrom'./App.vue'4. //導(dǎo)入路由模塊5. importrouterfrom'.router/index.js'6. constapp=createApp(App)7. //掛載路由模塊8. app.use(router)9. app.mount('#app')在上述代碼中，第5行代碼用于導(dǎo)入路由模塊；第8行代碼使用app.use()方法掛載路由模塊。7.2.2嵌套路由嵌套路由是指通過路由實(shí)現(xiàn)組件的嵌套展示，它主要由頁面結(jié)構(gòu)決定。實(shí)際項(xiàng)目中的應(yīng)用頁面通常由多層嵌套的組件組合而成，為了使多層嵌套的組件能夠通過路由訪問，路由需要具有嵌套關(guān)系，也就是在路由中嵌套子路由。使用嵌套路由時，需要在srelrouter.js文件的路由匹配規(guī)則中通過children屬性定義子路由匹配規(guī)則。children也是一組路由，它可以按照與routes相同的方式配置子路由數(shù)組。1下面演示一個簡單的嵌套路由配置，語法格式如下。1. routes:[2. {3. path:'父路由路徑'，4. component:父組件，5. children:[6. {path:'子路由路徑1'，component:子組件1},7. {path:'子路由路徑2'，component:子組件2},8. ]9. },10. ]在上述語法格式中，第5~8行代碼用于通過children屬性定義子路由匹配規(guī)則。其中，第6行代碼定義子組件1的路由匹配規(guī)則;第7行代碼定義子組件2的路由匹配規(guī)則。7.2.2嵌套路由在組件中定義子路由鏈接的語法格式如下。2<router-linkto="/父路由路徑/子路由路徑"></router-link>需要注意的是，當(dāng)使用children屬性定義子路由匹配規(guī)則時，子路由的path屬性前不要帶有“/”，否則會永遠(yuǎn)以根路徑開始請求。7.2.3動態(tài)路由匹配在大多數(shù)情況下，需要將給定匹配模式的路由映射到同一個組件。例如，User組件應(yīng)該對所有用戶進(jìn)行渲染，但用戶ID不同導(dǎo)致無法實(shí)現(xiàn)。在VueRouter中，可以在路徑中使用動態(tài)字段來實(shí)現(xiàn)對所有用戶進(jìn)行渲染，該字段被稱之為路徑參數(shù)，語法格式如下。constroutes=[

//動態(tài)字段以冒號開始

{path:'/users/:id',component:User},]路徑參數(shù)用冒號表示，與/users/johnny和/users/jolyne類似的URL都會映射到同一個路由。當(dāng)路由進(jìn)行匹配時，路由的param屬性可以用this.$route.params的形式在每個組件中獲取。在同一路徑中可以有多個參數(shù)，它們將分別映射到$route.params的相應(yīng)字段上，如表7-1所示。表7-1

param屬性與路徑的匹配關(guān)系匹配模式匹配路徑params/users/:username/users/eduardo{username:'eduardo'}/users/:username/posts/:postId/users/eduardo/posts/123{username:'eduardo',postId:'123'}7.2.4命名路由在使用路由時，一般會先在routes屬性中配置路由匹配規(guī)則，然后在頁面中使用<router-link>標(biāo)簽的to屬性跳轉(zhuǎn)到指定目標(biāo)地址。但這種方式存在一些弊端。例如，當(dāng)目標(biāo)地址比較復(fù)雜時，不便于記憶；當(dāng)目標(biāo)地址發(fā)生變化時，需要同步修改所有使用該地址的代碼，會增加開發(fā)的工作量。因此，VueRouter提供了命名路由。在定義路由匹配規(guī)則時，使用name屬性為路由匹配規(guī)則定義路由名稱，即可實(shí)現(xiàn)命名路由。當(dāng)路由匹配規(guī)則擁有路由名稱后，在定義路由鏈接或執(zhí)行某些跳轉(zhuǎn)操作時，可以直接通過路由名稱表示相應(yīng)的路由，不再需要通過路由路徑表示相應(yīng)的路由。1使用命名路由的語法格式如下。{path:'路由路徑'，name:'路由名稱'，component:組件}在上述語法格式中，使用name屬性為當(dāng)前路由規(guī)則定義名稱。需要注意的是，命名路由的name屬性值不能重復(fù)，必須保證是唯一的。7.2.4命名路由在<router-link>標(biāo)簽中使用命名路由時，需要動態(tài)綁定to屬性值為對象。當(dāng)使用對象作為to屬性值時，to前面需要添加冒號，表示使用v-bind指令進(jìn)行綁定。在對象中，通過name屬性指定要跳轉(zhuǎn)到的路由名稱，使用params屬性指定跳轉(zhuǎn)時所攜帶的路由參數(shù)。1語法格式如下<router-link:to="{name:路由名稱，params:{參數(shù)名:參數(shù)值}}"></router-link>在上述語法格式中，name屬性用于指定路由名稱；params屬性為可選項(xiàng)，用于傳遞參數(shù)值。任務(wù)3路由插件Vuex任務(wù)準(zhǔn)備任務(wù)實(shí)施任務(wù)拓展7.3路由插件Vuex

Vuex（是什么？）Vuex是一個專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲的方式管理應(yīng)用所有組件的狀態(tài)，解決了多組件數(shù)據(jù)通信問題，使數(shù)據(jù)操作更加簡潔。在Vue.js中，組件的狀態(tài)變化是通過單向數(shù)據(jù)流的設(shè)計理念實(shí)現(xiàn)的，指只能從一個方向修改組件狀態(tài)，如圖7-1所示。

State（狀態(tài)）：驅(qū)動整個應(yīng)用的數(shù)據(jù)源。

View（視圖）：對狀態(tài)的一種聲明式映射。

Actions（交互）：狀態(tài)根據(jù)用戶在視圖中的輸入而作出相應(yīng)變更的可能方式。圖7-1

單向數(shù)據(jù)流示意圖7.3路由插件Vuex（1）Vuex的安裝通過標(biāo)簽引入通過標(biāo)簽引入時，可以使用Unpkg的CDN服務(wù)提供的Vuex文件，也可以將Vuex文件下載至本地再引入。使用Unpkg的CDN服務(wù)引入Vuex的示例代碼如下。Vuex的安裝步驟相對簡單，但需要注意選擇與Vue版本相對應(yīng)的Vuex版本。Vuex3.x版本對應(yīng)Vue2.x版本，而Vuex4.x版本對應(yīng)Vue3.x版本。下面以Vuex4為例，介紹Vuex的安裝過程。Vuex的安裝方式主要有兩種，一種是通過標(biāo)簽引入，另一種是使用包管理工具安裝，具體如下。1<scriptsrc="/vuex@next"></script>7.3路由插件Vuex2使用包管理工具安裝除了通過標(biāo)簽引入Vuex，還可以使用包管理工具安裝Vuex，具體命令如下。（1）使用npm包管理工具安裝Vuex。（2）使用yarn包管理工具安裝Vuex。npminstallvuex--saveyarnaddvuex--save7.3路由插件Vuex3下面演示如何將Vuex安裝到項(xiàng)目中，基本步驟如下。（1）打開命令提示符，切換至D:\vue\chapter07目錄，使用yarn命令創(chuàng)建一個名稱為my-vuex的項(xiàng)目，具體命令如下。在上述命令中，my-vuex表示項(xiàng)目名稱。在命令提示符中，切換至my-vuex目錄，為項(xiàng)目安裝所有依賴，具體命令如下。（2）上述命令執(zhí)行完畢后，在my-vuex目錄下使用yarn包管理工具安裝Vuex，具體命令如下。（3）使用編輯器打開my-vuex目錄。（4）執(zhí)行命令啟動服務(wù)，具體命令如下。項(xiàng)目啟動后，默認(rèn)開啟一個本地服務(wù)，地址為:5173/。至此，my-vuex項(xiàng)目創(chuàng)建完成，并在項(xiàng)目中成功安裝Vuex。yarncreatevitemy-vuex--templatevuecdmy-vuexyarnyarnaddvuex@4.0.2-saveyarndev任務(wù)實(shí)施1在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“費(fèi)用支出”圖表

任務(wù)準(zhǔn)備任務(wù)實(shí)施任務(wù)拓展任務(wù)實(shí)施7.1在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“費(fèi)用支出”圖表

本任務(wù)主要完成智慧農(nóng)業(yè)后臺管理系統(tǒng)中的“費(fèi)用支出”模塊，搭建表單組件界面，并在表單中使用雙向綁定，加載JSON數(shù)據(jù)，將費(fèi)用支出數(shù)據(jù)置于指定的表單位置。在智慧農(nóng)業(yè)后臺管理系統(tǒng)中繪制餅圖組件，并在“費(fèi)用支出匯總”頁面與首頁中引用。準(zhǔn)備數(shù)據(jù)文件“農(nóng)業(yè)數(shù)據(jù)平臺-費(fèi)用支出.xlsx”和“農(nóng)業(yè)數(shù)據(jù)平臺-費(fèi)用支出匯總.xlsx”，代碼基礎(chǔ)文件“FarmingVueTemplate-7.1.zip”,任務(wù)效果如圖7-2、圖7-3和圖7-4所示。任務(wù)

要求

任務(wù)

要求

圖7-2

“費(fèi)用支出數(shù)據(jù)”表單效果任務(wù)實(shí)施7.1在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“費(fèi)用支出”圖表

任務(wù)

要求

圖7-3

“費(fèi)用支出匯總”圖表效果任務(wù)實(shí)施7.1在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“費(fèi)用支出”圖表

任務(wù)

要求

圖7-4

首頁中的“費(fèi)用支出匯總”圖表效果任務(wù)實(shí)施7.1在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“費(fèi)用支出”圖表

1在public文件夾中創(chuàng)建costInfo.json文件，用于存放需要分頁顯示的“費(fèi)用支出數(shù)據(jù)”，文件內(nèi)的數(shù)據(jù)結(jié)構(gòu)如圖7-5所示。創(chuàng)建costSummary.json文件，使用數(shù)組存放不需要分頁顯示的“費(fèi)用支出匯總”數(shù)據(jù)，文件內(nèi)的數(shù)據(jù)結(jié)構(gòu)如圖7-6所示。2圖7-5

costInfo.json文件圖7-6

costSummary.json文件（1）構(gòu)建JSON數(shù)據(jù)任務(wù)實(shí)施7.1在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“費(fèi)用支出”圖表

1在“src\components\views\condition\expense”文件夾下創(chuàng)建costInfo.vue組件。在costInfo.vue組件中添加面包屑標(biāo)題“收支情況/費(fèi)用支出/費(fèi)用支出數(shù)據(jù)”。（2）創(chuàng)建“費(fèi)用支出數(shù)據(jù)”的分頁表格與彈框<divclass="crumbs">

<el-breadcrumbseparator="/">

<el-breadcrumb-item>

<iclass="el-icon-s-custom"></i>收支情況

</el-breadcrumb-item>

<el-breadcrumb-item>

費(fèi)用支出

</el-breadcrumb-item>

<el-breadcrumb-item>

費(fèi)用支出數(shù)據(jù)

</el-breadcrumb-item>

</el-breadcrumb></div>2任務(wù)實(shí)施7.1在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“費(fèi)用支出”圖表

在“src\router\index.js”文件中為“費(fèi)用支出數(shù)據(jù)”添加路由地址。3（2）創(chuàng)建“費(fèi)用支出數(shù)據(jù)”的分頁表格與彈框{

path:'/costInfo',

component:()=>import(/*webpackChunkName:"costInfo"*/'../components/views/condition/expense/costInfo.vue'),

meta:{title:'費(fèi)用支出數(shù)據(jù)'}

}任務(wù)實(shí)施7.1在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“費(fèi)用支出”圖表

在“src\router\index.js”文件中為“費(fèi)用支出數(shù)據(jù)”添加路由地址。4（2）創(chuàng)建“費(fèi)用支出數(shù)據(jù)”的分頁表格與彈框 { icon:'el-icon-school', index:'map', title:'收支情況', subs:[{ index:'costInfo', title:'費(fèi)用支出', subs:[{ index:'costInfo', title:'費(fèi)用支出數(shù)據(jù)' } ] }, ] }任務(wù)實(shí)施7.1在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“費(fèi)用支出”圖表

仿照“農(nóng)資產(chǎn)品市場價格”的priceSummary.vue組件內(nèi)容修改“費(fèi)用支出數(shù)據(jù)”的costInfo.vue組件內(nèi)容。

修改name屬性值為CostInfo。

修改getData()函數(shù)中的JSON文件名稱為costInfo.json。

5（2）創(chuàng)建“費(fèi)用支出數(shù)據(jù)”的分頁表格與彈框任務(wù)實(shí)施7.1在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“費(fèi)用支出”圖表

在修改搜索欄、新增按鈕、表格的內(nèi)容。修改搜索欄的顯示名稱、下拉框內(nèi)容。6（2）創(chuàng)建“費(fèi)用支出數(shù)據(jù)”的分頁表格與彈框<divclass="handle-box"><el-buttontype="primary"icon="el-icon-delete"class="handle-delmr10"@click="delAllSelection">批量刪除</el-button><el-selectv-model="query.type"placeholder="支出類型"class="handle-selectmr10"><el-optionkey="-1"label="全部"value="全部"></el-option><el-optionkey="1"label="農(nóng)藥"value="農(nóng)藥"></el-option><el-optionkey="2"label="化肥"value="化肥"></el-option><el-optionkey="3"label="技術(shù)研發(fā)"value="技術(shù)研發(fā)"></el-option><el-optionkey="4"label="種子"value="種子"></el-option><el-optionkey="5"label="人工成本"value="人工成本"></el-option></el-select><el-inputv-model=""placeholder="產(chǎn)品名稱"class="handle-inputmr10"></el-input><el-buttontype="primary"icon="el-icon-search"@click="handleSearch">搜索</el-button><el-buttontype="success"icon="el-icon-plus"class="handle-addmr10"@click="handleAdd">新增</el-button></div>任務(wù)實(shí)施7.1在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“費(fèi)用支出”圖表

修改表格中的字段名為對應(yīng)JSON數(shù)據(jù)中的屬性。6（2）創(chuàng)建“費(fèi)用支出數(shù)據(jù)”的分頁表格與彈框<el-table:data="tableData"borderclass="table"ref="multipleTable"header-cell-class-name="table-header"@selection-change="handleSelectionChange"> <el-table-columntype="selection"width="55"align="center"></el-table-column> <el-table-columnprop="id"width="55"label="ID"align="center"></el-table-column> <el-table-columnprop="type"label="支出類型"></el-table-column> <el-table-columnprop="name"label="產(chǎn)品名稱"></el-table-column> <el-table-columnprop="cost"label="支出"></el-table-column> <el-table-columnlabel="操作"width="180"align="center"> <templateslot-scope="scope"> <el-buttontype="text"icon="el-icon-edit"@click="handleEdit(scope.$index,scope.row)">編輯 </el-button> <el-buttontype="text"icon="el-icon-delete"class="red" @click="handleDelete(scope.$index,scope.row)">刪除</el-button> </template> </el-table-column> </el-table>任務(wù)實(shí)施7.1在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“費(fèi)用支出”圖表

在<style>標(biāo)簽中設(shè)置相關(guān)樣式。6（2）創(chuàng)建“費(fèi)用支出數(shù)據(jù)”的分頁表格與彈框<stylescoped>.table{font-size:14px;width:45%;display:inline-block;}.etable{display:inline-block;}</style>任務(wù)實(shí)施7.1在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“費(fèi)用支出”圖表

修改批量刪除時，設(shè)置彈出的字符串格式為“支出類型-產(chǎn)品名稱”彈框中顯示刪除行對應(yīng)的內(nèi)容，彈出“刪除了農(nóng)藥-撲草凈

農(nóng)藥-二甲戊靈”，結(jié)果如圖7-7所示。6（2）創(chuàng)建“費(fèi)用支出數(shù)據(jù)”的分頁表格與彈框str+=this.multipleSelection[i].type+'-'+this.multipleSelection[i].name+'';圖7-7

“費(fèi)用支出數(shù)據(jù)”分頁表格任務(wù)實(shí)施7.1在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“費(fèi)用支出”圖表

修改“編輯”對話框表單內(nèi)容。7（2）創(chuàng)建“費(fèi)用支出數(shù)據(jù)”的分頁表格與彈框 <el-dialogid="dialogEdit":title="dialogTitle":visible.sync="dialogVisible"width="30%"> <el-formref="form":model="form"label-width="70px"> <el-inputtype="hidden"v-model="form.id"></el-input> <el-form-itemlabel="產(chǎn)品名稱"> <el-inputv-model=""></el-input> </el-form-item> <el-form-itemlabel="支出類型"> <el-selectv-model="form.type"placeholder="支出類型"class="handle-selectmr10"> <el-optionkey="-1"label="全部"value="全部"></el-option> <el-optionkey="1"label="農(nóng)藥"value="農(nóng)藥"></el-option> <el-optionkey="2"label="化肥"value="化肥"></el-option> <el-optionkey="3"label="技術(shù)研發(fā)"value="技術(shù)研發(fā)"></el-option> <el-optionkey="4"label="種子"value="種子"></el-option> <el-optionkey="5"label="人工成本"value="人工成本"></el-option> </el-select> </el-form-item> <el-form-itemlabel="支出"> <el-inputv-model="form.cost"></el-input>任務(wù)實(shí)施7.1在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“費(fèi)用支出”圖表

修改“編輯”對話框表單內(nèi)容。7（2）創(chuàng)建“費(fèi)用支出數(shù)據(jù)”的分頁表格與彈框 </el-form-item> </el-form> <spanslot="footer"class="dialog-footer"> <el-button@click="dialogVisible=false">取

消</el-button> <el-buttontype="primary"@click="saveEditAdd">確

定</el-button> </span> </el-dialog>圖7-8

“編輯”對話框任務(wù)實(shí)施7.1在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“費(fèi)用支出”圖表

在“src\components\views\condition\expense”文件夾下創(chuàng)建costSummary.vue組件。

在costSummary.vue組件中添加面包屑標(biāo)題“收支情況/費(fèi)用支出/費(fèi)用支出匯總”。1（3）創(chuàng)建“費(fèi)用支出匯總”表格2<el-breadcrumbseparator="/"><el-breadcrumb-item><iclass="el-icon-s-custom"></i>收支情況</el-breadcrumb-item><el-breadcrumb-item>費(fèi)用支出</el-breadcrumb-item><el-breadcrumb-item>費(fèi)用支出匯總</el-breadcrumb-item></el-breadcrumb>任務(wù)實(shí)施7.1在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“費(fèi)用支出”圖表

在“src\router\index.js”文件中為“費(fèi)用支出匯總”添加路由地址。3{ path:'/costSummary', component:()=>import(/*webpackChunkName:"costSummary"*/'../components/views/condition/expense/costSummary.vue'), meta:{ title:'費(fèi)用支出匯總' } }（3）創(chuàng)建“費(fèi)用支出匯總”表格任務(wù)實(shí)施7.1在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“費(fèi)用支出”圖表

在“src\components\common\Sidebar.vue”組件中的菜單“收支情況/費(fèi)用支出”下配置“費(fèi)用支出數(shù)據(jù)匯總”的路由地址。4{ index:'costSummary', title:'費(fèi)用支出匯總' }（3）創(chuàng)建“費(fèi)用支出匯總”表格任務(wù)實(shí)施7.1在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“費(fèi)用支出”圖表

仿照“費(fèi)用支出數(shù)據(jù)”組件的<script>標(biāo)簽內(nèi)容修改“費(fèi)用支出匯總”組件內(nèi)容。

修改name屬性值為cost。

在methods屬性中保留getData()函數(shù)，獲取JSON數(shù)據(jù)。修改getData()函數(shù)中的JSON文件名為“costSummary.json”。5（3）創(chuàng)建“費(fèi)用支出匯總”表格任務(wù)實(shí)施7.1在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“費(fèi)用支出”圖表

修改表格中的字段名為對應(yīng)JSON數(shù)據(jù)中的屬性。6<divclass="container"> <el-table:data="tableData"borderclass="table"header-cell-class-name="table-header"> <el-table-columnprop="name"label="名稱"align="center"></el-table-column> <el-table-columnprop="value"label="支出金額"align="center"></el-table-column> <el-table-columnprop="proportion"label="占比"align="center"></el-table-column> </el-table> </div>（3）創(chuàng)建“費(fèi)用支出匯總”表格任務(wù)實(shí)施7.1在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“費(fèi)用支出”圖表

修改“編輯”對話框表單內(nèi)容。7<stylescoped>.table{ font-size:14px; width:45%; display:inline-block; }</style>（3）創(chuàng)建“費(fèi)用支出匯總”表格任務(wù)實(shí)施7.1在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“費(fèi)用支出”圖表

在<script>標(biāo)簽的exportdefault語句中綁定函數(shù)并調(diào)用。

在methods屬性中定義initCharts()函數(shù)。在created()生命周期鉤子中調(diào)用initCharts()函數(shù)。1（4）實(shí)現(xiàn)“費(fèi)用支出匯總”圖表組件exportdefault{name:'eCostSummary',created(){this.initCharts();},methods:{initCharts(){}}}任務(wù)實(shí)施7.1在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“費(fèi)用支出”圖表

在initCharts()函數(shù)中獲取JSON數(shù)據(jù)，并顯示對應(yīng)圖表。2（4）實(shí)現(xiàn)“費(fèi)用支出匯總”圖表組件<template><div><divid="main_costSummary"style="height:250px;width:560px;"></div></div></template><script>exportdefault{name:'eCostSummary'}</script>3引入Axios和ECharts。importaxiosfrom'axios'//引入EChartsimport*asechartsfrom'echarts'任務(wù)實(shí)施7.1在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“費(fèi)用支出”圖表

在initCharts()函數(shù)中獲取JSON數(shù)據(jù)，并顯示對應(yīng)圖表。4initCharts(){axios.get("/costSummary.json").then(res=>{//1.通過id屬性獲取DOM對象，并初始化為ECharts對象letmyChart=echarts.init(document.getElementById('main_costSummary'));//2.構(gòu)建圖表數(shù)據(jù)letmydata=res.data;//3.配置圖表參數(shù)letoption={title:{text:'費(fèi)用支出',subtext:'數(shù)據(jù)匯總',left:'center'},tooltip:{trigger:'item'},legend:{orient:'vertical',left:'right'},（4）實(shí)現(xiàn)“費(fèi)用支出匯總”圖表組件任務(wù)實(shí)施7.1在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“費(fèi)用支出”圖表

series:[{name:'支出占比',type:'pie',radius:'50%',data:mydata,label:{show:true,formatter:":(z3jilz61osys%)"http://c：對應(yīng)值value，d：百分比},emphasis:{itemStyle:{shadowBlur:10,shadowOffsetX:0,shadowColor:'rgba(0,0,0,0.5)'}}}]};//4.為Echarts對象設(shè)置option參數(shù)myChart.setOption(option);});}任務(wù)實(shí)施7.1在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“費(fèi)用支出”圖表

在“src\components\views\condition\expense\costSummary.vue”組件下的“費(fèi)用支出匯總”表格組件中引入圖表組件。（5）在“費(fèi)用支出匯總”頁面中引入圖表組件·

在<script>標(biāo)簽中引入eCostSummary圖表組件。//引入自定義組件importeCostfrom'@/components/views/eTables/eCostSummary'在exportdefault語句中，使用components屬性聲明要使用的自定義組件。components:{eCost}·

在template元素中的<divclass="container">容器加入<eCost>圖表的自定義控件標(biāo)簽，此圖表標(biāo)簽與<el-table>表格平級。<divclass="container"><el-table:data="tableData"borderclass="table"header-cell-class-name="table-header"><el-table-columnprop="name"label="名稱"align="center"></el-table-column><el-table-columnprop="value"label="支出金額"align="center"></el-table-column><el-table-columnprop="proportion"label="占比"align="center"></el-table-column></el-table><eCostclass=etable></eCost></div>任務(wù)實(shí)施7.1在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“費(fèi)用支出”圖表

在<style>標(biāo)簽中添加如下代碼，調(diào)整組件位置至表格右側(cè)。.etable{display:inline-block;}圖7-9

“費(fèi)用支出匯總”頁面運(yùn)行效果（5）在“費(fèi)用支出匯總”頁面中引入圖表組件任務(wù)實(shí)施7.1在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“費(fèi)用支出”圖表

在“src\components\page\Dashboard.vue”組件中引入自定義組件。在<script>標(biāo)簽中通過import語句引入自定義組件。

在components屬性中添加需要使用的組件名稱。

引用自定義組件標(biāo)簽的方式如圖7-10所示。1importeCostfrom'@/components/views/eTables/eCostSummary';（6）在智慧農(nóng)業(yè)后臺管理系統(tǒng)首頁引入餅圖components:{eCost}圖7-10

引用自定義組件標(biāo)簽任務(wù)實(shí)施7.1在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“費(fèi)用支出”圖表

運(yùn)行查看首頁效果，如圖7-11所示。2圖7-11

首頁中的“費(fèi)用支出匯總”圖表效果（6）在智慧農(nóng)業(yè)后臺管理系統(tǒng)首頁引入餅圖任務(wù)實(shí)施7.1在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“費(fèi)用支出”圖表

任務(wù)實(shí)施7.2

在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“技術(shù)培訓(xùn)”模塊

任務(wù)準(zhǔn)備任務(wù)實(shí)施任務(wù)拓展任務(wù)實(shí)施7.2在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“技術(shù)培訓(xùn)”模塊

任務(wù)

要求

本任務(wù)主要完成智慧農(nóng)業(yè)后臺管理系統(tǒng)中的“技術(shù)培訓(xùn)”模塊，繪制折線圖組件，并在“農(nóng)戶技術(shù)培訓(xùn)數(shù)據(jù)”頁面與首頁中引用。

準(zhǔn)備數(shù)據(jù)文件“農(nóng)業(yè)數(shù)據(jù)平臺-組織農(nóng)戶培訓(xùn).xlsx”和“農(nóng)業(yè)數(shù)據(jù)平臺-組織農(nóng)戶培訓(xùn)數(shù)據(jù).xlsx”，代碼基礎(chǔ)文件“FarmingVueTemplate-7.2.zip”，任務(wù)效果如圖7-12、圖7-13所示。任務(wù)實(shí)施7.2在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“技術(shù)培訓(xùn)”模塊

任務(wù)

要求

圖7-12

“農(nóng)戶技術(shù)培訓(xùn)數(shù)據(jù)”表單效果任務(wù)實(shí)施7.2在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“技術(shù)培訓(xùn)”模塊

任務(wù)

要求

圖7-13“組織農(nóng)戶技術(shù)培訓(xùn)”圖表效果1在public文件夾中創(chuàng)建trainingInfo.json文件，用于存放需要分頁顯示的“農(nóng)戶技術(shù)培訓(xùn)”數(shù)據(jù)，文件內(nèi)的數(shù)據(jù)結(jié)構(gòu)如圖7-14所示。創(chuàng)建trainingSummary.json文件，使用數(shù)組存放不需要分頁顯示的“組織農(nóng)戶技術(shù)培訓(xùn)”數(shù)據(jù)，文件內(nèi)的數(shù)據(jù)結(jié)構(gòu)如圖7-15所示。2圖7-14trainingInfo.json文件圖7-15trainingSummary.json文件（1）構(gòu)建JSON數(shù)據(jù)任務(wù)實(shí)施7.2在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“技術(shù)培訓(xùn)”模塊

（2）創(chuàng)建“農(nóng)戶技術(shù)培訓(xùn)數(shù)據(jù)”的分頁表格與彈框3在src\router\index.js文件中為“費(fèi)用支出數(shù)據(jù)”添加路由地址。在“src\components\views\training”文件夾下創(chuàng)建trainingInfo.vue組件。在trainingInfo.vue組件中添加面包屑標(biāo)題“企業(yè)培訓(xùn)/農(nóng)戶技術(shù)培訓(xùn)數(shù)據(jù)”。21在“src\components\common\Sidebar.vue”中添加“技術(shù)培訓(xùn)/農(nóng)戶技術(shù)培訓(xùn)數(shù)據(jù)”菜單目錄并配置“農(nóng)戶技術(shù)培訓(xùn)數(shù)據(jù)”的路由地址。4任務(wù)實(shí)施7.2在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“技術(shù)培訓(xùn)”模塊

仿照“農(nóng)資產(chǎn)品市場價格”的priceSummary.vue組件內(nèi)容，在trainingInfo..vue組件中構(gòu)建“農(nóng)戶技術(shù)培訓(xùn)數(shù)據(jù)”組件內(nèi)容。

修改name屬性值為TrainingInfo。修改getData()函數(shù)中的JSON文件名稱為trainingInfo.json。5（2）創(chuàng)建“費(fèi)用支出數(shù)據(jù)”的分頁表格與彈框任務(wù)實(shí)施7.2在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“技術(shù)培訓(xùn)”模塊

修改搜索欄、新增按鈕、表格的內(nèi)容。修改搜索欄的顯示名稱、下拉框內(nèi)容。修改表格中的字段名為對應(yīng)JSON數(shù)據(jù)中的屬性。在<style>標(biāo)簽中粘貼相關(guān)樣式。修改批量刪除時，設(shè)置彈出的字符串格式為“培訓(xùn)區(qū)縣-農(nóng)戶姓名”，彈框中顯示刪除行對應(yīng)的內(nèi)容，彈出“刪除了桐廬縣-戚荔

桐廬縣-何耀文”，結(jié)果如圖7-16所示。6（2）創(chuàng)建“費(fèi)用支出數(shù)據(jù)”的分頁表格與彈框圖7-16“農(nóng)戶技術(shù)培訓(xùn)數(shù)據(jù)”分頁表格

修改“編輯”對話框表單內(nèi)容。7任務(wù)實(shí)施7.2在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“技術(shù)培訓(xùn)”模塊

（3）創(chuàng)建“組織農(nóng)戶技術(shù)培訓(xùn)”表格3在“src\router\index.js”文件中為“組織農(nóng)戶技術(shù)培訓(xùn)”添加路由地址；21在“src\components\views\training”文件夾下創(chuàng)建trainingSummary.vue組件。在“trainingSummary.vue”組件中添加面包屑標(biāo)題“企業(yè)培訓(xùn)/組織農(nóng)戶技術(shù)培訓(xùn)匯總”。4在“src\components\common\Sidebar.vue”組件中的菜單“技術(shù)培訓(xùn)/組織農(nóng)戶技術(shù)培訓(xùn)”下配置“組織農(nóng)戶技術(shù)培訓(xùn)”的路由地址。任務(wù)實(shí)施7.2在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“技術(shù)培訓(xùn)”模塊

仿照“費(fèi)用支出數(shù)據(jù)”組件的<script>標(biāo)簽內(nèi)容修改“組織農(nóng)戶技術(shù)培訓(xùn)”的trainingSummary.vue組件內(nèi)容。修改name屬性值為TrainingSummary。

在methods屬性中保留getData()函數(shù)，獲取JSON數(shù)據(jù)。修改getData()函數(shù)中的JSON文件名稱為“trainingSummary.json”。5（3）創(chuàng)建“組織農(nóng)戶技術(shù)培訓(xùn)”表格任務(wù)實(shí)施7.2在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“技術(shù)培訓(xùn)”模塊

完成表格部分內(nèi)容，修改表格中的字段名為對應(yīng)JSON數(shù)據(jù)中的屬性6<divclass="container"> <el-table:data="tableData"borderclass="table"header-cell-class-name="table-header"> <el-table-columnprop="month"label="月份"align="center"></el-table-column> <el-table-columnprop="numberOfFarmers"label="農(nóng)戶人數(shù)"align="center"></el-table-column> </el-table> </div>（3）創(chuàng)建“組織農(nóng)戶技術(shù)培訓(xùn)”表格7

在<style>標(biāo)簽中加入樣式任務(wù)實(shí)施7.2在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“技術(shù)培訓(xùn)”模塊

在“src>components>views”文件夾下創(chuàng)建文件夾eTables，并創(chuàng)建“組織農(nóng)戶技術(shù)培訓(xùn)”圖表組件，文件名為eTrainingSummary.vue。將圖表命名為“eTrainingSummary”，并在template元素中添加一個<div>標(biāo)簽，用于載入圖表。1（4）實(shí)現(xiàn)“組織農(nóng)戶技術(shù)培訓(xùn)”圖表組件23引入Axios和ECharts。在<script>標(biāo)簽的exportdefault語句中綁定函數(shù)并調(diào)用?！?/p>

在methods屬性中定義initCharts()函數(shù)?！?/p>

在created()生命周期鉤子中調(diào)用initCharts()函數(shù)。在initCharts()函數(shù)中獲取JSON的數(shù)據(jù)，并顯示對應(yīng)圖表。4任務(wù)實(shí)施7.2在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“技術(shù)培訓(xùn)”模塊

在“src\components\views\condition\expense\trainingSummary.vue”組件下的“組織農(nóng)戶技術(shù)培訓(xùn)”表格組件中引入圖表組件，運(yùn)行效果如圖7-17所示。在<script>標(biāo)簽中引入eTrainingSummary圖表組件。在exportdefault語句中，使用components屬性聲明要使用的自定義組件。在template元素的<divclass="container">容器中加入<eTraining>圖表自定義的控件標(biāo)簽，此圖表標(biāo)簽與<el-table>表格平級。在<style>標(biāo)簽中添加如下代碼，調(diào)整組件位置至表格右邊。（5）在“組織農(nóng)戶技術(shù)培訓(xùn)”頁面引入圖表組件圖7-17

“組織農(nóng)戶技術(shù)培訓(xùn)”頁面運(yùn)行效果任務(wù)實(shí)施7.2在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“技術(shù)培訓(xùn)”模塊

在“src\components\page\Dashboard.vue”組件中引入自定義組件。

在<script>標(biāo)簽中通過import語句引入自定義組件。importeTrainingfrom'@/components/views/eTables/eTrainingSummary'

在components屬性中添加需要使用的組件名稱。components:{ eTraining}

引用自定義組件標(biāo)簽。運(yùn)行查看首頁效果。1（6）在智慧農(nóng)業(yè)后臺管理中臺系統(tǒng)首頁引入折線圖2任務(wù)實(shí)施7.2在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“技術(shù)培訓(xùn)”模塊

任務(wù)實(shí)施7.3

在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“合作單位”模塊

任務(wù)準(zhǔn)備任務(wù)實(shí)施任務(wù)拓展任務(wù)實(shí)施7.3在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“合作單位”模塊

任務(wù)

要求

本任務(wù)主要完成智慧農(nóng)業(yè)后臺管理系統(tǒng)中的“合作單位”模塊，繪制地圖組件，并在“合作單位數(shù)據(jù)”頁面與首頁中引用。準(zhǔn)備數(shù)據(jù)文件“農(nóng)業(yè)數(shù)據(jù)平臺-地區(qū)合作單位.xlsx”和“農(nóng)業(yè)數(shù)據(jù)平臺-地區(qū)合作單位明細(xì).xlsx”，代碼基礎(chǔ)文件“FarmingVueTemplate-7.3.zip”，任務(wù)效果如圖7-18、圖7-19和圖7-20所示。任務(wù)

要求

圖7-18“合作單位”表單效果任務(wù)實(shí)施7.3在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“合作單位”模塊

任務(wù)

要求

圖7-19“合作單位數(shù)據(jù)”匯總圖表任務(wù)實(shí)施7.3在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“合作單位”模塊

任務(wù)

要求

圖7-20首頁的“合作單位”圖表效果任務(wù)實(shí)施7.3在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“合作單位”模塊

構(gòu)建JSON數(shù)據(jù)1（1）在public文件夾中創(chuàng)建partners.json文件，用于存放需要分頁顯示的“合作單位”數(shù)據(jù)，文件內(nèi)的數(shù)據(jù)結(jié)構(gòu)如圖7-21所示。（2）創(chuàng)建partnersRegionSummary.json文件，使用數(shù)組存放不需要分頁顯示的“地區(qū)合作單位”匯總數(shù)據(jù)，文件內(nèi)的數(shù)據(jù)結(jié)構(gòu)如圖7-22所示。（3）創(chuàng)建partnersSummary.json文件，使用數(shù)組存放不需要分頁的“合作單位數(shù)據(jù)匯總”數(shù)據(jù)。圖7-21

partners.json文件

圖7-22

partnersRegionSummary.json文件任務(wù)實(shí)施7.3在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“合作單位”模塊

創(chuàng)建“合作單位”的表單分頁表格與彈框2（1）在“src\components\views”文件夾下創(chuàng)建文件夾map，并在其中創(chuàng)建partners.vue。（2）在partners.vue組件中添加面包屑標(biāo)題“地圖信息/合作單位”。（3）在“src\router\index.js”文件中為“合作單位”添加路由地址。（4）在“src\components\common\Sidebar.vue”組件中添加菜單“地圖信息/坐標(biāo)數(shù)據(jù)”并配置“合作單位”的路由地址。（5）根據(jù)“坐標(biāo)數(shù)據(jù)”的coordinates.vue組件，修改“views\map”文件夾下的partners.vue組件中<script>標(biāo)簽的內(nèi)容。修改name屬性值為Partners。修改getData()函數(shù)中的JSON文件名稱為partners.json。任務(wù)實(shí)施7.3在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“合作單位”模塊

（6）修改搜索欄、新增按鈕、表格的內(nèi)容。修改搜索欄的顯示名稱、下拉框內(nèi)容。修改表格中的字段名為對應(yīng)JSON數(shù)據(jù)中的屬性。在<style>表中粘貼相關(guān)樣式。修改批量刪除時，設(shè)置彈出的字符串格式為“合作單位”，彈框中顯示刪除行對應(yīng)的內(nèi)容，彈出“刪除了南昌交通學(xué)院

浙江安防職業(yè)技術(shù)學(xué)院”，效果如圖7-23所示。（7）修改彈框表單內(nèi)容，并將輸入框、下拉框的內(nèi)容對應(yīng)JSON的屬性。圖7-23

“合作單位”表單效果任務(wù)實(shí)施7.3在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“合作單位”模塊

創(chuàng)建“合作單位數(shù)據(jù)”普通表格3（1）在“src\components\views\map”文件夾下創(chuàng)建partnersSummary.vue組件。（2）在“partnersSummary.vue”組件中分別添加兩個<div>標(biāo)簽用于存放兩個表格。（3）在“partnersSummary.vue”組件中分別添加面包屑標(biāo)題“地圖信息/地區(qū)合作單位數(shù)據(jù)”和“地圖信息/合作單位數(shù)據(jù)匯總”。（4）在“src\router\index.js”文件中為“合作單位數(shù)據(jù)”添加路由地址。（5）在“src\components\common\Sidebar.vue”組件中的菜單“地圖信息/”下配置“合作單位數(shù)據(jù)”的路由地址。任務(wù)實(shí)施7.3在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“合作單位”模塊

（6）仿照“費(fèi)用支出數(shù)據(jù)”costInfo.vue組件，修改partnersSummary.vue中<script>標(biāo)簽的內(nèi)容。

修改name屬性值為PartnersSummary。在data()函數(shù)的兩個表格中，分別定義綁定值的數(shù)組名。在methods屬性中定義getDataTypes()函數(shù)，獲取“合作單位數(shù)據(jù)匯總”的JSON數(shù)據(jù)。在methods屬性中定義getDataRegion()函數(shù)，獲取“地區(qū)合作單位數(shù)據(jù)”的JSON數(shù)據(jù)。設(shè)置getDataTypes()中函數(shù)的JSON文件名稱為partnersSummary.json。設(shè)置getDataRegion()函數(shù)中的JSON文件名稱為partnersRegionSummary.json。（7）完成“地區(qū)合作單位數(shù)據(jù)”表格的部分內(nèi)容，修改表格中的字段名為對應(yīng)JSON數(shù)據(jù)中的屬性，修改“:data”綁定的模型名稱。（8）完成“合作單位數(shù)據(jù)匯總”表格的部分內(nèi)容，修改表格中的字段名為對應(yīng)JSON數(shù)據(jù)中的屬性，修改“:data”綁定的模型名稱任務(wù)實(shí)施7.3在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“合作單位”模塊

實(shí)現(xiàn)“地區(qū)合作單位數(shù)據(jù)”圖表組件4（1）在“src\components\views\eTables”文件夾下創(chuàng)建“地區(qū)合作單位數(shù)據(jù)-地圖”圖表組件，文件名為ePartnersRegionSummary.vue，將圖表命名為“ePartnersRegionSummary”。（2）在template元素中放置一個<div>標(biāo)簽，用于載入圖表。（3）引入Axios、ECharts及ECharts地圖。（4）在全局index.html文件中引入chinaGeo.js文件。在public文件夾下粘貼chinaGeo.js文件。在“public/index.html”中引入chinaGeo.js文件，具體實(shí)現(xiàn)代碼如圖7-24所示。圖7-24

引入坐標(biāo)文件chinaGeo.js任務(wù)實(shí)施7.3在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“合作單位”模塊

（5）在<script>標(biāo)簽的exportdefault語句中綁定函數(shù)并調(diào)用，具體實(shí)現(xiàn)代碼如圖7-25所示。在methods屬性中定義initCharts()函數(shù)。在created()生命周期鉤子中調(diào)用initCharts()函數(shù)。（6）在initCharts()函數(shù)中獲取JSON數(shù)據(jù)，并顯示對應(yīng)圖表。修改JSON獲取方式，JSON數(shù)據(jù)為“partnersRegionSummary.json”。修改獲取容器的id屬性值為main_map。地圖坐標(biāo)數(shù)據(jù)，來自于前面引入的chinaGeo.js中的geoJson。構(gòu)建圖表中需要的chinaDatas數(shù)據(jù)，數(shù)據(jù)來源于“partnersRegionSummary.json”文件。圖7-25

創(chuàng)建并引用函數(shù)任務(wù)實(shí)施7.3在智慧農(nóng)業(yè)后臺管理系統(tǒng)中完成“合作單位”模塊

在“地區(qū)合作單位數(shù)據(jù)”頁面引入地圖組件。5在“views\map\partnersSummary.vue”組件下的“合作單位數(shù)據(jù)匯總”表格組件中引入圖表組件。在<script>標(biāo)簽中引入ePartnersRegionSummary圖表組件。在exportdefault語句中，使用components屬性中聲明要使用的自定義組件；在<template>中的<divclass="c