控制台 柱状图

package-lock.json

@@ -4735,6 +4735,22 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "echarts": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.2.2.tgz",
+      "integrity": "sha512-yxuBfeIH5c+0FsoRP60w4De6omXhA06c7eUYBsC1ykB6Ys2yK5fSteIYWvkJ4xJVLQgCvAdO8C4mN6MLeJpBaw==",
+      "requires": {
+        "tslib": "2.3.0",
+        "zrender": "5.2.1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
@@ -12597,6 +12613,21 @@
       "version": "20.2.7",
       "resolved": "https://registry.npm.taobao.org/yargs-parser/download/yargs-parser-20.2.7.tgz",
       "integrity": "sha1-Yd+FwRPt+1p6TjbriqYO9CPLyQo="
+    },
+    "zrender": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.2.1.tgz",
+      "integrity": "sha512-M3bPGZuyLTNBC6LiNKXJwSCtglMp8XUEqEBG+2MdICDI3d1s500Y4P0CzldQGsqpRVB7fkvf3BKQQRxsEaTlsw==",
+      "requires": {
+        "tslib": "2.3.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
     }
   }
 }

package.json

@@ -10,6 +10,7 @@
     "af-table-column": "^1.0.3",
     "axios": "^0.21.1",
     "core-js": "^3.11.1",
+    "echarts": "^5.2.2",
     "element-china-area-data": "^5.0.2",
     "element-ui": "^2.15.5",
     "file-saver": "^2.0.5",

src/components/homePage.vue → src/components/admin copy.vue

@@ -2,22 +2,24 @@
 	<div style="height: 100%; width: 100%;" @click="checkTimeOut()" @mouseenter="checkTimeOut()"
 		@mousemove="checkTimeOut()">
 		<el-container class="admin-container">
-			<!--页面头部-->
+			<!--页面头部(上边)-->
 			<el-header>
 				<div class="admin-logo-container">
 					<!--<img class="admin-logo" src="../assets/img/admin.jpg" alt="" > -->
 					<span>安徽省农产品质量安全监测系统-监管平台</span>
 				</div>
-				<div class="right-function-container"></div>
+				<div class="right-function-container">
+					<el-button type="text" style="color:#FFFFFF" size="medium" @click="getAccount()">个人中心</el-button>
+					<el-button @click="logout">
+						退 出
+					</el-button>
+				</div>
 			</el-header>
 			<!-- 页面个人中心 -->
-				<div class="header2">
-					<span class="hello">您好，监管部门！--{{name}}</span>
-						<el-button class="btn" @click="userInform()" size="mini">个人信息</el-button>
-						<el-button class="btn" @click="logout" size="mini">退出</el-button>
+				<div>
+					<span>您好，监管部门！--{{name}}</span>
+					<!-- <span>{{name}}</span> -->
 				</div>
-
-                
 			<!--页面主体部分-->
 			<el-container>
 				<!--页面侧边栏(左边)-->
@@ -63,7 +65,7 @@
 							<el-container>
 								<el-main>
 									<el-card shadow="always">
-										<!--内容显示-->
+										<!--            内容显示-->
 										<router-view :key="item.name" />
 									</el-card>
 								</el-main>
@@ -93,7 +95,23 @@
 				menuList: []
 			}
 		},
-
+		// watch: {
+		// 	/** 监听,当路由发生变化的时候执行(防止用户手动更换地址导致tabs的面板变动却不切换相应的tabs) */
+		// 	'$route.path': function() {
+		// 		var iindex = -1
+		// 		var jindex = -1
+		// 		for (let i = 0; i < this.menuList.length; i++) {
+		// 			for (let j = 0; j < this.menuList[i].children.length; j++) {
+		// 				if (this.menuList[i].children[j].path == this.$route.path) {
+		// 					iindex = i
+		// 					jindex = j
+		// 					break
+		// 				}
+		// 			}
+		// 		}
+		// 		this.addTab(this.menuList[iindex].children[jindex].subMenuName, this.$route.path)
+		// 	}
+		// },
 		created() {
 			this.getAccount()
 			this.lastTime = new Date().getTime() // 网页第一次打开时，记录当前时间
@@ -102,11 +120,16 @@
 			let groupname = window.sessionStorage.getItem('groupname')
 			let data1 = []
 			let data = [
-				{	
-					subMenuName: '系统介绍',
-                    path: '/admin/systemIntro'
-				},
-                {
+				// {
+				//     // icon: 'el-icon-user-solid',
+				//      subMenuName: '监测模型',
+				//      children: [{
+				//      id: '1-1',
+				//      subMenuName: '模型配置',
+				//      path: '/admin/'
+				//     }]
+				//   },
+				{
 					// icon: 'el-icon-user-solid',
 					subMenuName: '主体信息管理',
 					children: [{
@@ -141,7 +164,8 @@
 						     path: '/admin/retask'
 						}
 						]
-				},	
+				},
+				
 			]
 			this.menuList = data
 		},
@@ -151,9 +175,10 @@
 				this.name = result.data.data.name
 				console.log(this.name)
 			},
-			userInform() {
-				this.$router.push('getAccount')
-			},		
+			
+			// 	async getAccount() {
+			// 	this.$router.push('getAccount')
+			// },		
 			handleOpen(index) {
 				console.log(index)
 			},
@@ -341,17 +366,4 @@
 		float: right;
 		margin-top:10px;
 	}
-	.header2{
-		border: 0.5px solid rgb(233, 233, 233);
-		height: 30px;
-	}
-	.hello{
-		text-align:left;
-	}
-	.btn{
-		// margin-left: 5px;
-		// margin-top:2px;
-		// margin-bottom: 2px;
-		text-align: right;	
-	}
 </style>

src/components/admin.vue

@@ -5,15 +5,15 @@
 			<!--页面头部(上边)-->
 			<el-header>
 				<div class="admin-logo-container">
-					<span>安徽省农产品质量安全监测系统-监管平台</span>
+					<span  >安徽省农产品质量安全监测系统——监管平台</span>
 				</div>
 			</el-header>
 			<!-- 页面个人中心 -->
 				<div class="hello">
-					<span>您好，监管部门！--{{name}}</span>
+					<span>您好，{{name}}!</span>
 					<div class="btn">
-						<el-button  class="btns" @click="userInform()" size="mini">个人信息</el-button>
-						<el-button  class="btns" @click="logout" size="mini">退出</el-button>
+						<el-button  class="btns"  icon="el-icon-user-solid" @click="userInform()" size="small">个人信息</el-button>
+						<el-button  class="btns" @click="logout" icon="el-icon-switch-button" size="small">退出</el-button>
 					</div>
 				</div>
 			<!--页面主体部分-->
@@ -29,9 +29,9 @@
              					 		<span slot="title">首页</span>
            							</el-menu-item> -->
 						<!--          一级菜单-->
-						<el-submenu :index="index+''" v-for="(item, index) in menuList" :key="index">
+						<el-submenu :index="index+''" v-for="(item, index) in menuList" :key="index"  class="font">
 							<!--          一级菜单模板区-->
-							<template slot="title">
+							<template slot="title" class="font">
 								<!--              图标-->
 								<!-- <i :class="item.icon" /> -->
 								<!--              文本-->
@@ -39,7 +39,7 @@
 							</template>
 							<!--            二级菜单-->
 							<el-menu-item :index="subItem.path+''" v-for="subItem in item.children" :key="subItem.id"
-								@click="addTab(subItem.subMenuName, subItem.path)">
+								@click="addTab(subItem.subMenuName, subItem.path)"  class="font">
 								<!--          二级菜单模板区-->
 								<template slot="title">
 									<!--              图标-->
@@ -68,6 +68,10 @@
 					</el-tabs>
 				</el-main>
 			</el-container>
+			 <el-footer id="foot">
+				<p>主办单位：安徽省农业农村厅</p>
+				<p>技术支持：安徽省北斗精准农业信息工程实验室 农产品安全安徽省重点实验室</p>
+			</el-footer>
 		</el-container>
 	</div>
 </template>
@@ -89,12 +93,14 @@
 				menuList: []
 			}
 		},
-
+		mounted:function(){
+		this.addTab("首页",'/admin/conSole')
+		},
 		created() {
 			this.getAccount()
 			this.lastTime = new Date().getTime() // 网页第一次打开时，记录当前时间
 			// 保证admin中的页面刷新后重置到/admin路由下
-			if (this.$route.path !== '/admin/routineMonitor') this.$router.push('/admin/routineMonitor')
+			if (this.$route.path !== '/admin/conSole') this.$router.push('/admin/conSole')
 			let groupname = window.sessionStorage.getItem('groupname')
 			let data1 = []
 			let data = [
@@ -104,7 +110,12 @@
 					children: [{
 							id: '6-1',
 							subMenuName: '控制台',
-							path: '/admin/Console'
+							path: '/admin/conSole'
+					// },{
+					// 		id: '6-2',
+					// 		subMenuName: '系统介绍',
+					// 		path: '/admin/systemIntro'
+					// }
 					}]
 				},
 				{
@@ -136,11 +147,16 @@
 						     subMenuName: '监督抽查',
 						     path: '/admin/checkMonitor'
 						},
+						// {
+						//      id: '5-4',
+						//      subMenuName: '退回任务',
+						//      path: '/admin/retask'
+						// }
 						{
-						     id: '5-4',
-						     subMenuName: '退回任务',
-						     path: '/admin/retask'
-						}
+						     id: '5-5',
+						     subMenuName: '数据统计',
+						     path: '/admin/dataEchart'
+						},
 						]
 				},
 				
@@ -268,7 +284,9 @@
 	.el-main {
 		padding-top: 8px !important;
 	}
-
+	.font{
+		font-size: 15px;
+	}
 	// .el-menu-item.is-active {
 
 		// background-color: #3ace04 !important;
@@ -278,12 +296,7 @@
 
 
 	// .admin-logo-container {
-	// 	border-color: #5EB9DE;
-	// 	border-right-width: 1px;
-	// 	border-right-style: solid;
-	// 	border-color: #5EB9DE;
-	// 	border-right-width: 1px;
-	// 	border-right-style: solid;
+	// 	text-shadow: 0px 5px 5px #0024f3;
 	// }
 
 	.admin-logo {
@@ -345,20 +358,30 @@
 	}
 	.hello{
 		border: 0.5px solid rgb(233, 233, 233);
-		height: 30px;
+		height: 32px;
 		// position: relative;
 		float: right;
 		padding: 3px;
+		// margin: .625rem ;
+		font-size: .9375rem;
+     	font-weight: 600;
+		 
 	}
 	.btn{
-		// margin-left: 5px;
-		// margin-top:2px;
-		// margin-bottom: 2px;
 		text-align: right;	
 		float: right;
+		box-shadow: #145faa;
 	}
 	.btns{
 		border-style: solid;
-  		border-color: rgb(52, 92, 224);
+  		border-color: rgb(199, 199, 199);
 	}
+	/deep/ #foot {
+        color: #413b3b;
+        width: 100%;
+        text-align: center;
+        font-size: .875rem;
+        font-weight: 550;
+        margin-bottom: 1%;
+      }
 </style>

src/components/admin/checkMonitor.vue

@@ -43,9 +43,9 @@
 					<el-input v-model="queryInfo.task_name"></el-input>
 				</el-form-item>
 				<!-- 查询 -->
-				<el-button  size="mini" style="height: 40px;margin-left: 10px;" type="success" @click="searchData()">查询</el-button>
+				<el-button  size="medium"  icon="el-icon-search" @click="searchData()">查询</el-button>
 				<!-- 重置 -->
-				<el-button  size="mini" style="height: 40px;margin-left: 5px;" type="success" @click="reset()">重置</el-button>
+				<el-button  size="medium" type="info" @click="reset()">重置</el-button>
 				</el-form>
 			</el-row>
 		</div>
@@ -83,11 +83,14 @@
 				<el-table-column prop="status" label="任务状态" width="130" align="center" >
 					<template slot-scope="scope">
 						<el-tag v-if="scope.row.ispublic==0">未发布</el-tag>
-						<el-tag type="warning" v-if="scope.row.ispublic==1">已发布</el-tag>
+						<el-tag v-if="scope.row.ispublic==1" plain>已发布</el-tag>
 						<el-tag type="danger" v-if="scope.row.ispublic==2">已废止</el-tag>
-						<el-tag type="info" v-if="scope.row.ispublic==3">已结束,未完成</el-tag>
-						<el-tag type="success" v-if="scope.row.ispublic==4">已结束,已完成</el-tag>
-						<el-tag type="success"  effect="plain" v-if="scope.row.ispublic==5">执行中</el-tag>
+						<el-tag type="info" v-if="scope.row.ispublic==5">已查看</el-tag>
+						<el-tag type="primary"  effect="plain" v-if="scope.row.ispublic==9">执行中</el-tag>
+						<el-tag type="info" v-if="scope.row.ispublic==13">抽样中</el-tag>
+						<el-tag type="info" v-if="scope.row.ispublic==17">检测中</el-tag>
+						<el-tag type="success"  v-if="scope.row.ispublic==21">已完成</el-tag>
+						<el-tag type="info" v-if="scope.row.ispublic==25">未完成</el-tag>
 					</template>
 				</el-table-column>
 				<el-table-column prop="level" label="任务优先级" width="95" align="center">

src/components/admin/conSole.vue

@@ -1,4 +1,10 @@
 <template>
+<div>
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+			<el-breadcrumb-item>首页</el-breadcrumb-item>
+			<el-breadcrumb-item>控制台</el-breadcrumb-item>
+	</el-breadcrumb>
+
     <div class="workblock">
         <div class="block" @click="searchInstitution()">
             <el-image style="width: 150px; height: 150px" :src=r></el-image>
@@ -12,7 +18,14 @@
         <div class="block"  @click="SystemIntroduction()">
             <el-image style="width: 150px; height: 150px" :src=sy></el-image>
         </div>
+        <div class="block"  @click="searchDataChart()">
+            <el-image style="width: 150px; height: 150px" :src=ss></el-image>
+        </div>
     </div>
+
+  
+</div>
+    
 </template>
 <script>
 
@@ -22,13 +35,16 @@ export default {
         r: require('../../assets/img/jgcx.png'),
         s: require('../../assets/img/jcrw.png'),
         p: require('../../assets/img/jccx.png'),
-        sy: require('../../assets/img/xtjs.png')
+        sy: require('../../assets/img/xtjs.png'),
+        ss: require('../../assets/img/sjtj.png'),
+         msg: 'Welcome to Your Vue.js App'
       }
     },
     mounted() {
-		},
+         this.drawHistogram();
+    },
     created() {
-		},
+	},
     methods: {
         async searchInstitution() {
             this.$router.push({
@@ -37,7 +53,7 @@ export default {
         },
         async monitoringTasks() {
             this.$router.push({
-                path: '/admin/addTask',
+                path: '/admin/conSoleChild',
             }) 
         },
         async queryTask() {
@@ -49,7 +65,12 @@ export default {
             this.$router.push({
                 path: '/admin/systemIntro'
             })
-        }
+        },
+        async searchDataChart() {
+            this.$router.push({
+                path: '/admin/dataEchart'
+            })
+        },
     }
   }
 
@@ -58,9 +79,18 @@ export default {
     .workblock{
         display: flex;
         justify-content: center;
+        align-items: center;
         height: 80%;
-        .block{
-            margin: 1.25rem 1.25rem;
+        height: 28rem;
+    .block{
+        margin: 1.25rem 1.25rem;
+        }
+        .block:hover {
+            // box-shadow: 0px 0px 0px #ccc;
+            transition-duration: 0.4s;
+            transform: scale(1.05);
+            // z-index: 10;
+            //  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
         }
     }
 </style>

src/components/admin/conSoleChild.vue

@@ -0,0 +1,95 @@
+<template>
+<div>
+    <div class="title">
+			新增监测任务
+	</div>
+   <div class="workblock">
+        <div @click="routineMonitor()">
+            <el-button class="block" type="success" icon="el-icon-s-order">例行监测</el-button>
+        </div>
+        <div  @click="specialMonitor()">
+            <el-button class="block" type="primary" icon="el-icon-aim">专项监测</el-button>
+        </div>
+        <div  @click="checkMonitor()">
+            <el-button class="block" type="warning" icon="el-icon-edit-outline">监督抽查</el-button>
+        </div>
+       
+    </div>
+    <div>
+        <el-button class="return" @click="fanhui">返回控制台</el-button>
+    </div>
+
+</div>
+ 
+    
+</template>
+<script>
+
+export default {
+    data() {
+      return {
+        // lx: require('../../assets/img/jgcx.png'),
+        // zx: require('../../assets/img/jcrw.png'),
+        // jd: require('../../assets/img/jccx.png'),
+      }
+    },
+    mounted() {
+		},
+    created() {
+		},
+    methods: {
+        async routineMonitor() {
+            this.$router.push({
+                path: '/admin/addTask',
+            })
+        },
+        async specialMonitor() {
+            this.$router.push({
+                path: '/admin/addTaskZx',
+            }) 
+        },
+        async checkMonitor() {
+            this.$router.push({
+                path: '/admin/addTaskJd'
+            })
+        },
+        async fanhui(){
+        this.$router.push({path: '/admin/conSole'})
+    }
+      
+    },
+   
+  }
+
+</script>
+<style lang="less" scoped>
+    .workblock{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 80%;
+        height: 28rem;
+    .block{
+        margin: 1.25rem 1.25rem;
+        width: 200px;
+        height: 100px;
+        font-size: 18px;
+        }
+        .block:hover {
+            // box-shadow: 0px 0px 0px #ccc;
+            transition-duration: 0.4s;
+            transform: scale(1.05);
+            // z-index: 10;
+            //  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
+        }
+    }
+    .return{
+        float: right;
+        margin-bottom: 10px;
+    }
+    .title {
+		margin-left: 45%;
+		margin-bottom: 20px;
+        font-size: 20px;
+	}
+</style>

src/components/admin/dataEchart copy.vue

@@ -0,0 +1,102 @@
+<template>
+<div>
+    <div>
+        <h2>监测任务统计</h2>
+        <div id="monitor" style="width:100%;height:400px;">
+    </div>
+    </div>
+    
+    
+</div>
+      
+</template>
+
+<script>
+export default {
+    data(){
+         return {
+             monitorData:'',
+             task_class:'例行监测'
+        }
+    },
+    created(){
+
+    },
+    mounted() {
+        this.stasticalTasks();
+    },
+    methods:{
+        async stasticalTasks(){
+            const result = await this.$http.post("stasticalTasks",{task_class}); 
+            this.monitorData = this.result.data.data
+        },
+         stasticalTasks () {
+//第一步：实例化对象
+            const monitorChart = this.$echarts.init(document.getElementById('monitor'))
+//第二步：指定配置项和数据            
+            const monitorData = {
+                //工具提示
+                tooltip: { 
+                    trigger: 'axis',//触发：轴
+                    axisPointer: { // 坐标轴指示器，坐标轴触发有效（鼠标悬停时候的样式）
+                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+                    }
+                },
+                //网格样式
+                grid: {
+                    left: '15%',//左边距
+                    right: '15%',//右边距
+                    bottom: '3%',//底边距
+                    containLabel: true//是否包含标签
+                },
+                //x轴
+                xAxis: [ 
+                {
+                    type: 'category',
+                    data: ['已完成', '未完成', '未发布', '已发布', '已废止'],
+                    axisTick: {
+                        alignWithLabel: true //轴刻度 --与标签对齐
+                    },
+                    axisLabel:{
+                        fontSize:15
+                    },
+                    //不显示x坐标轴线
+                    axisLine:{
+                        show: false,
+                    }
+                }
+                ],
+                //y轴
+                yAxis: [  
+                {
+                    type: 'value',
+                }
+                ],
+                //
+                series: [
+                {
+                    type: 'bar', // type值设置图表类型，bar为柱状图
+                    barWidth: '30%', // 柱形的宽度
+                    data: [10, 52, 200, 334, 390 ],
+                    showBackground: true,//是否显示背景色
+                    backgroundStyle: {
+                        color: 'rgba(180, 180, 180, 0.2)'
+      }
+                }
+                ]
+            }
+//第三步：把配置项给实例对象
+      monitorChart.setOption(monitorData)
+    }
+    }
+  
+
+}
+</script>
+<style>
+    h2{
+        /* margin: 0 auto; */
+        display: flex;
+        justify-content: center;;
+    }
+</style>

src/components/admin/dataEchart.vue

@@ -0,0 +1,102 @@
+<template>
+<div>
+    <div>
+        <h2>监测任务统计</h2>
+        <div id="monitor" style="width:100%;height:400px;">
+    </div>
+    </div>
+    
+    
+</div>
+      
+</template>
+
+<script>
+export default {
+    data(){
+         return {
+             monitorData:'',
+             task_class:'例行监测'
+        }
+    },
+    created(){
+
+    },
+    mounted() {
+        this.stasticalTasks();
+    },
+    methods:{
+        async stasticalTasks(){
+            const result = await this.$http.post("stasticalTasks",{task_class}); 
+            this.monitorData = this.result.data.data
+        },
+         stasticalTasks () {
+//第一步：实例化对象
+            const monitorChart = this.$echarts.init(document.getElementById('monitor'))
+//第二步：指定配置项和数据            
+            const monitorData = {
+                //工具提示
+                tooltip: { 
+                    trigger: 'axis',//触发：轴
+                    axisPointer: { // 坐标轴指示器，坐标轴触发有效（鼠标悬停时候的样式）
+                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+                    }
+                },
+                //网格样式
+                grid: {
+                    left: '15%',//左边距
+                    right: '15%',//右边距
+                    bottom: '3%',//底边距
+                    containLabel: true//是否包含标签
+                },
+                //x轴
+                xAxis: [ 
+                {
+                    type: 'category',
+                    data: ['已完成', '未完成', '未发布', '已发布', '已废止'],
+                    axisTick: {
+                        alignWithLabel: true //轴刻度 --与标签对齐
+                    },
+                    axisLabel:{
+                        fontSize:15
+                    },
+                    //不显示x坐标轴线
+                    axisLine:{
+                        show: false,
+                    }
+                }
+                ],
+                //y轴
+                yAxis: [  
+                {
+                    type: 'value',
+                }
+                ],
+                //
+                series: [
+                {
+                    type: 'bar', // type值设置图表类型，bar为柱状图
+                    barWidth: '30%', // 柱形的宽度
+                    data: [10, 52, 200, 334, 390 ],
+                    showBackground: true,//是否显示背景色
+                    backgroundStyle: {
+                        color: 'rgba(180, 180, 180, 0.2)'
+      }
+                }
+                ]
+            }
+//第三步：把配置项给实例对象
+      monitorChart.setOption(monitorData)
+    }
+    }
+  
+
+}
+</script>
+<style>
+    h2{
+        /* margin: 0 auto; */
+        display: flex;
+        justify-content: center;;
+    }
+</style>

src/components/admin/getMonitor.vue

@@ -28,9 +28,10 @@
                         <el-input v-model="queryInfo.name"></el-input>
                     </el-form-item>
                     <!-- 查询 -->
-                    <el-button  size="mini" style="height: 40px;margin-left: 10px;" type="success" @click="searchData()">查询</el-button>
+                    <!-- <el-button  size="mini" style="height: 40px;margin-left: 10px;" type="success" @click="searchData()">查询</el-button> -->
+                    <el-button  size="medium"  icon="el-icon-search" @click="searchData()">搜索</el-button>
                     <!-- 重置 -->
-                    <el-button  size="mini" style="height: 40px;margin-left: 5px;" type="success" @click="reset()">重置</el-button>
+                    <el-button  size="medium" type="info" @click="reset()">重置</el-button>
 				</el-form>
 			</el-row>
 		</div>
@@ -53,7 +54,7 @@
 				</el-table-column>
             <el-table-column label="操作" align="center" fixed="right"> 
                 <template slot-scope="scope">
-                    <el-button style="margin:5px 0" type="success" size="small" @click="readDialogVisible1(scope.row)">查看详情</el-button>
+                    <el-button style="margin:5px 0" type="text" size="medium" @click="readDialogVisible1(scope.row)">查看详情</el-button>
                 </template>
             </el-table-column>
         </el-table>

src/components/admin/getOrganization.vue

@@ -18,7 +18,7 @@
                         </el-select>
                     </el-form-item> -->
 
-                  <el-form-item label="机构名称" size="small">
+                  <el-form-item label="机构名称" size="medium">
                         <el-input v-model="queryInfo.name"></el-input>
                     </el-form-item>
                     <!-- <el-form-item label="法人姓名" size="small">
@@ -30,9 +30,9 @@
                         </el-select>
                     </el-form-item> -->
                     <!-- 查询 -->
-                    <el-button  size="mini" style="height: 40px;margin-left: 10px;" type="success" @click="searchData()">查询</el-button>
+                    <el-button  size="medium"  icon="el-icon-search" @click="searchData()">搜索</el-button>
                     <!-- 重置 -->
-                    <el-button  size="mini" style="height: 40px;margin-left: 5px;" type="success" @click="reset()">重置</el-button>
+                    <el-button  size="medium"  type="info" @click="reset()">重置</el-button>
 				</el-form>
 			</el-row>
 		</div>
@@ -48,12 +48,12 @@
             <el-table-column label="审核状态" prop="flag"  align="center">
                 <template slot-scope="scope">
                     <el-tag type="success" v-if="scope.row.flag==1">已通过</el-tag>
-                    <el-tag type="success" v-if="scope.row.flag!==1">未通过</el-tag>
+                    <el-tag type="warning" v-if="scope.row.flag!==1">未通过</el-tag>
                 </template>
 			</el-table-column>
             <el-table-column label="操作" align="center" fixed="right"> 
                 <template slot-scope="scope">
-                    <el-button style="margin:5px 0" type="success" size="small" @click="readDialogVisible1(scope.row)">查看详情</el-button>
+                    <el-button style="margin:5px 0" type="text" size="medium" @click="readDialogVisible1(scope.row)">查看详情</el-button>
                 </template>
             </el-table-column>
         </el-table>
@@ -159,7 +159,7 @@ export default {
              {
                 label: '机构名称',
                 prop: 'name',
-                width: 180
+                width: 230
 			},{
                 label: '依托单位',
                 prop: 'userJcjgProfile.dtRelyOnUnit',

src/components/admin/routineMonitor.vue

@@ -43,9 +43,9 @@
 					<el-input v-model="queryInfo.task_name"></el-input>
 				</el-form-item>
 				<!-- 查询 -->
-				<el-button  size="mini" style="height: 40px;margin-left: 10px;" type="success" @click="searchData()">查询</el-button>
+				<el-button  size="medium" icon="el-icon-search" @click="searchData()">查询</el-button>
 				<!-- 重置 -->
-				<el-button  size="mini" style="height: 40px;margin-left: 5px;" type="success" @click="reset()">重置</el-button>
+				<el-button  size="medium" type="info" @click="reset()">重置</el-button>
 				</el-form>
 			</el-row>
 		</div>
@@ -54,11 +54,11 @@
 		<div class="rightButton">
 			<el-row :gutter="90" style="margin-right: 0px;">
 				<div style="display: flex;flex-direction: row;float: right;">
-					<el-button type="primary" size="small" plain icon="el-icon-plus" @click="add()">新增</el-button>
-					<el-button type="primary" size="small" plain icon="el-icon-edit-outline" @click="ispublic()">发布
+					<!-- <el-button type="primary" size="small" plain icon="el-icon-plus" @click="add()">新增</el-button> -->
+					<el-button type="primary" size="small"  icon="el-icon-edit-outline" @click="ispublic()">发布
 					</el-button>
-					<el-button type="primary" size="small" plain icon="el-icon-scissors" @click="repeal()">废止</el-button>
-					<el-button type="primary" size="small" plain icon="el-icon-delete" @click="delArray()">删除</el-button>
+					<el-button type="primary" size="small"  icon="el-icon-scissors" @click="repeal()">废止</el-button>
+					<el-button type="danger" size="small"  icon="el-icon-delete" @click="delArray()">删除</el-button>
 					<!-- <el-button type="primary" size="small" plain icon="el-icon-download">导出</el-button> -->
 				</div>
 			</el-row>
@@ -83,11 +83,15 @@
 				<el-table-column prop="status" label="任务状态" width="130" align="center" >
 					<template slot-scope="scope">
 						<el-tag v-if="scope.row.ispublic==0">未发布</el-tag>
-						<el-tag type="warning" v-if="scope.row.ispublic==1">已发布</el-tag>
+						<el-tag v-if="scope.row.ispublic==1" plain>已发布</el-tag>
 						<el-tag type="danger" v-if="scope.row.ispublic==2">已废止</el-tag>
-						<el-tag type="info" v-if="scope.row.ispublic==3">已结束,未完成</el-tag>
-						<el-tag type="success" v-if="scope.row.ispublic==4">已结束,已完成</el-tag>
-						<el-tag type="success"  effect="plain" v-if="scope.row.ispublic==5">执行中</el-tag>
+						<el-tag type="info" v-if="scope.row.ispublic==5">已查看</el-tag>
+						<el-tag type="primary"  effect="plain" v-if="scope.row.ispublic==9">执行中</el-tag>
+						<el-tag type="info" v-if="scope.row.ispublic==13">抽样中</el-tag>
+						<el-tag type="info" v-if="scope.row.ispublic==17">检测中</el-tag>
+						<el-tag type="success"  v-if="scope.row.ispublic==21">已完成</el-tag>
+						<el-tag type="info" v-if="scope.row.ispublic==25">未完成</el-tag>
+						
 					</template>
 				</el-table-column>
 				<el-table-column prop="level" label="任务优先级" width="95" align="center">
@@ -101,12 +105,12 @@
 				<!-- 操作按钮区域的作用域插槽 -->
 				<template slot-scope="scope">
 					<el-col style="margin-bottom: 5px;">
-						<el-button type="success" size="mini" @click="readDialogVisible1(scope.row)" style="margin-top:5px">详情</el-button>
-						<el-button type="success" size="mini" @click="sendBack(scope.row.id)" style="margin-top:5px" >退回</el-button>
+						<el-button size="mini" @click="readDialogVisible1(scope.row)" style="margin-top:5px">查看详情</el-button>
+						<el-button type="info"  plain size="mini" @click="sendBack(scope.row.id)" style="margin-top:5px" >退回</el-button>
 					</el-col>
 					<el-col style="margin-bottom: 5px;">
-						<el-button type="success" size="mini" plain @click="getJcds(scope.row.id)" style="margin-top:5px">检测单</el-button> 
-						<el-button type="success" size="mini" plain @click="sampleList(scope.row.id)">抽样单</el-button>
+						<el-button type="primary" size="mini" plain @click="getJcds(scope.row.id)" style="margin-top:5px">检测单</el-button> 
+						<el-button type="primary" size="mini" plain @click="sampleList(scope.row.id)">抽样单</el-button>
 					</el-col>
 				</template>
 			</el-table-column>

src/components/admin/specialMonitor.vue

@@ -44,9 +44,9 @@
 				</el-form-item>
 
 				<!-- 查询 -->
-				<el-button  size="mini" style="height: 40px;margin-left: 10px;" type="success" @click="searchData()">查询</el-button>
+				<el-button  size="medium"  icon="el-icon-search" @click="searchData()">查询</el-button>
 				<!-- 重置 -->
-				<el-button  size="mini" style="height: 40px;margin-left: 5px;" type="success" @click="reset()">重置</el-button>
+				<el-button  size="medium" type="info" @click="reset()">重置</el-button>
 				</el-form>
 			</el-row>
 		</div>
@@ -84,11 +84,14 @@
 				<el-table-column prop="status" label="任务状态" width="130" align="center" >
 					<template slot-scope="scope">
 						<el-tag v-if="scope.row.ispublic==0">未发布</el-tag>
-						<el-tag type="warning" v-if="scope.row.ispublic==1">已发布</el-tag>
+						<el-tag v-if="scope.row.ispublic==1" plain>已发布</el-tag>
 						<el-tag type="danger" v-if="scope.row.ispublic==2">已废止</el-tag>
-						<el-tag type="info" v-if="scope.row.ispublic==3">已结束,未完成</el-tag>
-						<el-tag type="success" v-if="scope.row.ispublic==4">已结束,已完成</el-tag>
-						<el-tag type="success"  effect="plain" v-if="scope.row.ispublic==5">执行中</el-tag>
+						<el-tag type="info" v-if="scope.row.ispublic==5">已查看</el-tag>
+						<el-tag type="primary"  effect="plain" v-if="scope.row.ispublic==9">执行中</el-tag>
+						<el-tag type="info" v-if="scope.row.ispublic==13">抽样中</el-tag>
+						<el-tag type="info" v-if="scope.row.ispublic==17">检测中</el-tag>
+						<el-tag type="success"  v-if="scope.row.ispublic==21">已完成</el-tag>
+						<el-tag type="info" v-if="scope.row.ispublic==25">未完成</el-tag>
 					</template>
 				</el-table-column>
 				<el-table-column prop="level" label="任务优先级" width="95" align="center">

src/components/admin/systemIntro.vue

@@ -1,6 +1,10 @@
 
 <template>
 	<div style="width: 100%">
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+			<el-breadcrumb-item>首页</el-breadcrumb-item>
+			<el-breadcrumb-item>系统操作流程</el-breadcrumb-item>
+		</el-breadcrumb>
         <div class="img">
             <el-image :src=lct></el-image>
         </div>

src/components/login copy.vue

@@ -0,0 +1,346 @@
+<template>
+	<el-container id="login">
+		<!-- 顶部 -->
+		<el-header style="height: 114px;">
+			<!-- 左边logo -->
+			<div class="header-left">
+				安徽省农产品质量安全监测系统
+			</div>
+		</el-header>
+		<el-form class="form" ref="loginForm" :model="loginForm" label-position="top" :rules="rulesLoginForm" label-width="70px" @keyup.enter="submitForm">
+			<!-- 	<el-radio v-model="loginForm.user_flag" label="1">监管机构</el-radio>
+			<el-radio v-model="loginForm.user_flag" label="2">检测机构</el-radio> -->
+			<el-form-item  prop="login_name">
+				<el-input prefix-icon="el-icon-user-solid" class="login_input"  placeholder="用户名称" v-model="loginForm.login_name" clearable />
+			</el-form-item>
+			<el-form-item  prop="pwd">
+				<el-input prefix-icon="el-icon-c-scale-to-original" placeholder="密码" v-model="loginForm.pwd" show-password clearable />
+			</el-form-item>
+			<input type="button" name="" value="登录" class="btn" @click="submitForm">
+			<!-- <el-button ref="loginButton" type="success" @click="submitForm"> -->
+				<!-- 登录 -->
+			<!-- </el-button> -->
+		</el-form>
+		<div class="footer">
+			<p>主办单位：安徽省农业农村厅</p>
+			<!--  <p>承办单位：安徽省北斗精准农业信息工程实验室</p> -->
+			<p>技术支持：安徽省北斗精准农业信息工程实验室 农产品安全安徽省重点实验室</p>
+		</div>
+	</el-container>
+
+
+</template>
+ 
+<script>
+	export default {
+		name: 'Login',
+		data() {
+			return {
+				met:null,
+				loginForm: {
+					login_name: '',
+					pwd: ''
+				},
+				msg: null,
+				rend:null,
+				containers:null,
+				// 长度校验
+				rulesLoginForm: {}
+			}
+		},
+		// 方法绑定
+		methods: {
+			// 检测是否初始化系统
+			// async isSysteInit () {
+			//   const formData = JSON.stringify({ useraction: 'isSystemInit' })
+			//   const result = await this.$http.post('/user/', formData)
+			//   // 判断业务逻辑
+			//   if (result.data.ret === 1) {
+			//     this.$router.push('init')
+			//   }
+			// },
+			// 表单提交方法
+			submitForm() {
+				// 设置按钮状态
+				const message = this.$message
+				const route = this.$router
+				this.$refs.loginForm.validate(async valid => {
+					window.localStorage.setItem('token', '')
+
+					var loginButton = this.$refs.loginButton
+					// 判断是否合法
+					if (valid) {
+						// loginButton.loading = true
+						const result = await this.$http.post('login', this.loginForm)
+						if (result.data.code == 0) {
+							// loginButton.loading = false
+							// 登录成功保存用户账号
+							// 存储token
+							// 存身份信息
+							// window.sessionStorage.setItem('token', result.data.data.token)
+							 window.localStorage.setItem('token', result.data.data.token)
+							// window.sessionStorage.setItem('groupname', result.data.data.groupname)
+							// window.sessionStorage.setItem('name', result.data.data.name)
+							// window.sessionStorage.setItem('qydm', result.data.data.qydm)
+							// window.sessionStorage.setItem('rybh', result.data.data.rybh)
+							// window.sessionStorage.setItem('rymc', result.data.data.rymc)
+							this.containers.style.cssText=("z-index:-1;height:0px;")
+							// this.met.visible=false;
+							// this.rend.setSize(0,0)
+							let di = document.getElementById('3d')
+							di.remove(di.selectedIndex)
+							if(result.data.data.groupname=="检测机构"){
+								route.push('/jc')
+							}else{
+								route.push('/admin')
+							}
+							
+						} else if (result.data.code != 0) {
+							// loginButton.loading = false
+							this.containers.style.cssText=("z-index:-1")
+							this.msg = result.data.msg
+							message({
+								message: this.msg,
+								type: 'error',
+								showClose: true,
+								center: true
+							})
+						}
+					}
+				})
+			},
+
+			beforeDestroy() {
+				if (this.timer) {
+					clearInterval(this.timer) // 在Vue实例销毁前，清除定时器
+				}
+			},
+			init() {
+      container = document.createElement("div");
+      document.body.appendChild(container);
+	  this.containers=container
+      camera = new THREE.THREE.PerspectiveCamera(
+        75,
+        window.innerWidth / window.innerHeight,
+        1,
+        10000
+      );
+      container.style.cssText = "position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:1";
+	  container.id="3d";
+      camera.position.z = 1000;
+
+      scene =new THREE.THREE.Scene();
+
+      particles = new Array();
+
+      var PI2 = Math.PI * 2;
+	  
+      var material =new THREE.THREE.ParticleCanvasMaterial({
+        color: 0xe1e1e1,
+        program: function(context) {
+          context.beginPath();
+          context.arc(0, 0, 0.6, 0, PI2, true);
+          context.fill();
+        }
+      });
+		this.met=material;
+      var i = 0;
+
+      for (var ix = 0; ix < AMOUNTX; ix++) {
+        for (var iy = 0; iy < AMOUNTY; iy++) {
+          particle = particles[i++] = new THREE.THREE.Particle(material);
+          particle.position.x = ix * SEPARATION - AMOUNTX * SEPARATION / 2;
+          particle.position.z = iy * SEPARATION - AMOUNTY * SEPARATION / 2;
+          scene.add(particle);
+        }
+      }
+
+      renderer =new THREE.THREE.CanvasRenderer();
+      renderer.setSize(window.innerWidth, window.innerHeight);
+	  this.rend=renderer;
+      container.appendChild(renderer.domElement);
+
+      document.addEventListener("mousemove", this.onDocumentMouseMove, false);
+      document.addEventListener("touchstart", this.onDocumentTouchStart, false);
+      document.addEventListener("touchmove",this. onDocumentTouchMove, false);
+
+      //
+
+      window.addEventListener("resize", this.onWindowResize, false);
+    },
+    onWindowResize() {
+      windowHalfX = window.innerWidth / 2;
+      windowHalfY = window.innerHeight / 2;
+
+      camera.aspect = window.innerWidth / window.innerHeight;
+      camera.updateProjectionMatrix();
+
+      renderer.setSize(window.innerWidth, window.innerHeight);
+    },
+    onDocumentMouseMove(event) {
+      mouseX = event.clientX - windowHalfX;
+      mouseY = event.clientY - windowHalfY;
+    },
+    onDocumentTouchStart(event) {
+      if (event.touches.length === 1) {
+        event.preventDefault();
+
+        mouseX = event.touches[0].pageX - windowHalfX;
+        mouseY = event.touches[0].pageY - windowHalfY;
+      }
+    },
+    onDocumentTouchMove(event) {
+      if (event.touches.length === 1) {
+        event.preventDefault();
+
+        mouseX = event.touches[0].pageX - windowHalfX;
+        mouseY = event.touches[0].pageY - windowHalfY;
+      }
+    },
+    animate() {
+      requestAnimationFrame(this.animate);
+
+      this.render();
+    },
+    render() {
+      camera.position.x += (mouseX - camera.position.x) * 0.05;
+	    camera.position.y = 364;
+      camera.position.y += (-mouseY - camera.position.y) * 0.05;
+      camera.lookAt(scene.position);
+
+      var i = 0;
+
+      for (var ix = 0; ix < AMOUNTX; ix++) {
+        for (var iy = 0; iy < AMOUNTY; iy++) {
+          particle = particles[i++];
+          particle.position.y =
+            Math.sin((ix + count) * 0.3) * 50 +
+            Math.sin((iy + count) * 0.5) * 50;
+          particle.scale.x = particle.scale.y =
+            (Math.sin((ix + count) * 0.3) + 1) * 2 +
+            (Math.sin((iy + count) * 0.5) + 1) * 2;
+        }
+      }
+
+      renderer.render(scene, camera);
+
+      count += 0.1;
+    }
+		},
+		mounted() {
+    // this.getImgCode();
+    this.init()
+    this.animate()
+  },
+
+		created() {
+			this.timer = setInterval(this.getTime, 1000)
+		}
+	}
+	
+</script>
+
+<style lang="less" scoped>
+.el-container{
+	overflow: hidden;
+}
+	.el-header {
+		height: 114px;
+		color: black;
+		font-size: 1;
+		line-height: 10px;
+	}
+
+	.header-left {
+		// float: left;
+		margin-top: 160px;
+		color: #ffffff;
+		font-size: 70px;
+		text-align: center;
+	}
+
+	.img {
+		height: 300px;
+		width: 1700px;
+		/* margin: 0 auto; */
+		margin-left: 100px;
+	}
+	.form{
+		z-index: 100000;
+	}
+
+	.header-right {
+		float: right;
+	}
+	.btn:hover {
+    background: -webkit-linear-gradient(left,#5bd4fd,#2f98fb);
+}
+.btn {
+    background: #43cc99;
+    color: #fff;
+    transition: all .5s;
+    cursor: pointer;
+	width: 300px;
+	height: 56px;
+	border: none;
+	border-radius: 50px;
+}
+
+	.header_time {
+		text-align: center;
+		line-height: 44px;
+		height: 44px;
+		background-color: #468b37;
+		color: white;
+		font-size: 16px;
+		width: 290px;
+		border-bottom-left-radius: 15px;
+		border-bottom-right-radius: 15px;
+	}
+
+	.el-form {
+		// padding: 40px 20px 20px 0px;
+		// background-color: rgba(234, 234, 234, 0.7);
+		margin: 0 auto;
+		width: 400px;
+		height: 250px;
+		margin-top: 200px;
+		color: #333;
+		text-align: center;
+		// line-height: 180px;
+		// border-radius: 10px;
+		// box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
+
+		>div {
+			margin: 28px 0;
+		}
+	}
+	.login_input{
+		border-radius: 100px;
+	}
+
+	#login {
+		height: 100%;
+		// background: url(../assets/img/bg01.jpg) bottom center no-repeat;
+		background-size: 100% 100%;
+		background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
+	}
+
+	.footer {
+		// background-color: rgb(40,119,22);
+		// background-color: rgba(40, 119, 22, 0.6);
+		// display: flex;
+		// flex-direction: row;
+		position: absolute;
+		bottom: 0px;
+		color: #ffffff;
+		width: 100%;
+		text-align: center;
+		font-size: 14px;
+		height: 70px;
+		// padding-top: 5px;
+		// opacity: 0.6;
+		font-weight: 550;
+		// font: 24px bold #0055ff;
+	}
+</style>

src/components/login.vue

@@ -5,14 +5,15 @@
 			<span>浏览次数：{{data}}</span>
 		</el-header>
 		<el-form class="form" ref="loginForm" :model="loginForm" label-position="top" :rules="rulesLoginForm" label-width="70px" @keyup.enter="submitForm">
-				<el-radio v-model="loginForm.user_flag" label="1">监管机构</el-radio>
-				<el-radio v-model="loginForm.user_flag" label="2">检测机构</el-radio>
+				
 			<el-form-item  prop="login_name">
 				<el-input prefix-icon="el-icon-user-solid" class="login_input"  placeholder="用户名称" v-model="loginForm.login_name" clearable />
 			</el-form-item>
 			<el-form-item  prop="pwd">
 				<el-input prefix-icon="el-icon-c-scale-to-original" placeholder="密码" v-model="loginForm.pwd" show-password clearable />
 			</el-form-item>
+			<el-radio v-model="loginForm.user_flag" label="1">监管机构</el-radio>
+			<el-radio v-model="loginForm.user_flag" label="2">检测机构</el-radio>
 			<input type="button" name="" value="登录" class="btn" @click="submitForm">
 		</el-form>
 		<div class="footer">
@@ -236,7 +237,7 @@ let windowHalfY = window.innerHeight / 2;
 		float: right;
 	}
 	.btn:hover {
-    background: -webkit-linear-gradient(left,#5bd4fd,#2f98fb);
+     background: -webkit-linear-gradient(left,#5bd4fd,#2f98fb);
 }
 .btn {
     background: #43cc99;
@@ -302,4 +303,7 @@ let windowHalfY = window.innerHeight / 2;
 	.liuLan{
 		padding: 20px;
 	}
+	.btn{
+		margin-top: 25px;
+	}
 </style>

src/main.js

@@ -9,6 +9,9 @@ import './assets/css/global.css'
 
 // 导入axios数据交互请求
 import axios from 'axios'
+//导入echart
+import * as echarts from 'echarts';
+Vue.prototype.$echarts = echarts
 
 
 // 使用axios

src/router/index.js

@@ -26,11 +26,6 @@ const routes = [{
 		path: '/login',
 		component: () => import('../components/login')
 	},
-	{
-		path: '/homePage',
-		name:'homePage',
-		component: () => import('../components/homePage')
-	},
 	{
 		path: '/admin',
 		component: () => import('../components/admin'),
@@ -141,10 +136,18 @@ const routes = [{
 				path: '/admin/conSole',
 				name:'conSole',
 				component: () => import('../components/admin/conSole')
+			},{
+				path: '/admin/conSoleChild',
+				name:'conSoleChild',
+				component: () => import('../components/admin/conSoleChild')
 			},{
 				path: '/admin/systemIntro',
 				name:'systemIntro',
 				component: () => import('../components/admin/systemIntro')
+			},{
+				path: '/admin/dataEchart',
+				name:'dataEchart',
+				component: () => import('../components/admin/dataEchart')
 			},
 			
 		]