welcome

src/main copy.js

@@ -0,0 +1,45 @@
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
+import './plugins/element.js'
+// 导入全局样式表
+import './assets/css/global.css'
+ 
+ 
+
+//方法一：直接请求axios 
+import axios from 'axios'
+//1、配置请求的根目录路径
+   //  axios.defaults.baseURL = 'http://192.168.1.96.8090'
+axios.defaults.baseURL =  process.env.VUE_APP_BASE_API //测试线
+  
+//2、通过axios请求拦截器添加token 
+axios.interceptors.request.use(
+  // config就是请求的对象
+  config => {
+    //为请求头对象，添加token验证
+     config.headers.Authorization = window.sessionStorage.getItem('token')
+ 
+    // 最后必须 return config
+    return config
+  }
+)
+
+
+// axios.defaults.headers['Page'] = 1
+//3、挂载发起Ajax请求
+Vue.prototype.$http = axios
+
+
+
+
+//方法二：封装的看utils文件夹中的request.js文件和api文件夹中的common.js文件
+
+Vue.config.productionTip = false
+
+new Vue({
+  router,
+  store,
+  render: h => h(App)
+}).$mount('#app')

src/utils/request1.js

@@ -0,0 +1,138 @@
+import Vue from 'vue'
+import axios from 'axios'
+ 
+import router from '@/router/index'
+import { MessageBox, Message } from 'element-ui'
+// import store from '@/store'
+// import { getToken } from '@/utils/auth'
+
+
+axios.defaults.baseURL = process.env.VUE_APP_BASE_API
+// create an axios instance
+const service = axios.create({
+  //baseURL: process.env.VUE_APP_BASE_API, // 根目录路径
+  // baseURL: 'http://192.168.1.77:8092',
+  // baseURL: 'http://192.168.1.70:8087',
+  
+  //baseURL: 'http://192.168.1.96.8090',
+  withCredentials: true, // send cookies when cross-domain requests
+  timeout: 60000 // request timeout
+})
+
+// request interceptor
+service.interceptors.request.use(
+  config => {
+    // do something before request is sent
+    // config.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'  //此处是增加的代码，设置请求头的类型
+    // if (process.env.VUE_APP_BASE_API !== '/dev-api') {
+    //   config.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
+    //   config.withCredentials = false
+    // }
+
+    // if (store.getters.token) {
+ 
+    //   if (process.env.VUE_APP_BASE_API === '/dev-api') {
+    //     config.headers['X-Token'] = getToken()
+    //   } else {
+    //     config.headers['token'] = getToken()
+    //   }
+    // }
+    //  console.log(sessionStorage.getItem("g_token"))
+     
+     config.headers['Authorization'] = 'Bearer '+ window.sessionStorage.getItem("g_token")
+    return config
+  },
+  error => {
+    // do something with request error
+    console.log(error) // for debug
+    return Promise.reject(error)
+  }
+)
+
+// response interceptor
+service.interceptors.response.use(
+  /**
+   * If you want to get http information such as headers or status
+   * Please return  response => response
+  */
+
+  /**
+   * Determine the request status by custom code
+   * Here is just an example
+   * You can also judge the status by HTTP Status Code
+   */
+  response => {
+
+   // console.log("response-------------",response)
+     const res = response.data
+ 
+    //console.log(res)
+
+    // if the custom code is not 20000, it is judged as an error.
+    if (res.code !== 200) {
+      Message({
+        // message: res.msg + res.code,
+        message: '请求超时'+  res.msg,
+        type: 'error',
+        duration: 5 * 1000
+      })
+
+      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
+      // if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
+      //   // to re-login
+      //   MessageBox.confirm('你已经注销登陆,你可以取消或重新登陆', '确认注销', {
+      //     confirmButtonText: '重新登陆',
+      //     cancelButtonText: '取消',
+      //     type: 'warning'
+      //   }).then(() => {
+      //     // store.dispatch('user/resetToken').then(() => {
+      //     //   location.reload()
+      //     // })
+      //   })
+      // }
+      // if (res.code === 20002) {
+      //   // store.dispatch('user/resetToken').then(() => {
+      //   //   location.reload()
+      //   // })
+      // }
+      if (res.code === undefined) {
+        return res
+      } else {
+        return Promise.reject(new Error(res.message || 'Error'))
+      }
+    } else {
+      return res
+    }
+  },
+  error => {
+    console.log('error' + error) // for debug
+
+    if (error.response.data.code === 10000) {
+      MessageBox.confirm('你已经注销登陆,你可以取消或重新登陆', '确认注销', {
+        confirmButtonText: '重新登陆',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+         //清空token
+        window.sessionStorage.clear()
+        //跳转登录页
+        router.push('/login')
+        location.reload()
+        
+      })
+    }
+    let config = error.config
+    if (!config) {
+      Message({ message: error.msg, type: 'error', duration: 5 * 1000 })
+      return Promise.reject(error)
+    }
+    Message({
+      message: "操作错误！"+error.response.data.errors[0],
+      type: 'error',
+      duration: 5 * 1000
+    })
+    return Promise.reject(error)
+  }
+)
+
+export default service

src/views/Welcome3.vue

@@ -7,7 +7,182 @@
         <img  class="tit-img"  src="@/assets/tit-img.png" ></img>
       </el-row>
 
-     
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <div class="card-bx">
+             <div class="card-title">
+                <span><i class="el-icon-d-arrow-right icon-title"></i></span>
+                <span>犊牛数量</span>
+             </div>
+             <div class="card-cont">
+                <div id="chartPie1"  style="width: 100%;height:180px;"></div>
+             </div>
+             
+          </div>
+
+          <div class="card-bx">
+             <div class="card-title">
+                <span><i class="el-icon-d-arrow-right icon-title"></i></span>
+                <span>犊牛体重</span>
+             </div>
+             <div class="card-cont">
+               
+                <el-row :gutter="10" style ="margin-top: 20px;padding:0px 20px">
+                  <el-col :span="24" style ="margin-bottom: 10px;">出生时犊牛平均体重（KG）</el-col>
+                  <el-col :span="24">
+                    <el-progress :text-inside="true" :stroke-width="20" color = "#0a88f3" :percentage="chartProgress_data.num1" :format="formatpro"></el-progress>
+                  </el-col>
+                </el-row>
+
+                <el-row :gutter="10" style ="margin-top: 20px;padding:0px 20px">
+                  <el-col :span="24" style ="margin-bottom: 10px;">断奶时犊牛平均体重（KG）</el-col>
+                  <el-col :span="24">
+                    <el-progress :text-inside="true" :stroke-width="20" color = "#fd6c46" :percentage="chartProgress_data.num2"  :format="formatpro"></el-progress>
+                  </el-col>
+                </el-row>
+ 
+             </div>
+             
+          </div>
+
+          
+          <div class="card-bx" style=" ">
+             <div class="card-title">
+                <span><i class="el-icon-d-arrow-right icon-title"></i></span>
+                <span>饲喂成本占比</span>
+             </div>
+             <div class="card-cont">
+                <div class = "siwei-bx-t">
+                   <div class = "siwei-item">
+                      <div  class = "siwei-span siwei-color1">
+                         <div class = "siwei-span-m">
+                           <div class = "siwei-span-s">
+                              <span class = "siwei-num">31%</span>
+                              <span class = "siwei-tit">奶</span>
+                           </div>
+                         </div>
+                      </div>
+                   </div>
+                   <!-- <div class = "siwei-item">
+                      <div  class = "siwei-span siwei-color2">
+                         <div class = "siwei-span-m">
+                           <div class = "siwei-span-s">
+                              <span class = "siwei-num">46%</span>
+                              <span class = "siwei-tit">水</span>
+                           </div>
+                         </div>
+                      </div>
+                   </div> -->
+                   <div class = "siwei-item">
+                      <div  class = "siwei-span siwei-color3">
+                         <div class = "siwei-span-m">
+                           <div class = "siwei-span-s">
+                              <span class = "siwei-num">23%</span>
+                              <span class = "siwei-tit">乳粉</span>
+                           </div>
+                         </div>
+                      </div>
+                   </div>
+                </div>
+
+                <div class = "siwei-bx-b">
+                  <div>
+                    <span class = "siwei-squre squre1"></span>
+                    <span class = "siwei-b-tt">日均用奶：</span>
+                    <span class = "siwei-b-num">895L</span>
+                  </div>
+                  <!-- <div>
+                    <span class = "siwei-squre squre2"></span>
+                    <span class = "siwei-b-tt">日均用水：</span>
+                    <span class = "siwei-b-num">332L</span>
+                  </div> -->
+                  <div>
+                    <span class = "siwei-squre squre3"></span>
+                    <span class = "siwei-b-tt">日均代乳粉：</span>
+                    <span class = "siwei-b-num">613KG</span>
+                  </div>
+                </div>
+                
+             </div>
+          </div> 
+
+        </el-col>
+
+        <el-col :span="12">
+
+            <div class = "color-bx">
+              <div  class="color-bx-item color-block1">
+                <span class = "color-circle1 circle-c1"></span>
+                <span class = "color-num">0.84</span>
+                <span class = "color-tt">日均增重(KG)</span>
+              </div>
+              <div  class=" color-bx-item color-block2">
+                <span class = "color-circle1 circle-c2"></span>
+                <span class = "color-num">2357.23</span>
+                <span class = "color-tt">日均饲喂成本(元)</span>
+              </div>
+              <div  class="color-bx-item color-block3">
+                <span class = "color-circle1 circle-c3"></span>
+                <span class = "color-num">93.43</span>
+                <span class = "color-tt">增重达标率(%)</span>
+              </div>
+              <div  class="color-bx-item color-block4">
+                <span class = "color-circle1 circle-c4"></span>
+                <span class = "color-num">99.6</span>
+                <span class = "color-tt">饲喂准确率(%)</span>
+              </div>
+              <div  class="color-bx-item color-block5">
+                <span class = "color-circle1 circle-c5"></span>
+                <span class = "color-num">93.02</span>
+                <span class = "color-tt">疾病治愈率(%)</span>
+              </div>
+            </div> 
+
+            
+
+            
+        </el-col> 
+
+        <el-col :span="6">
+          <div class="card-bx">
+            <div class="card-title">
+                <span><i class="el-icon-d-arrow-right icon-title"></i></span>
+                <span>栏舍概况</span>
+            </div>
+            <div class="card-cont" style="padding:10px 20px">
+                <div class="lan-item lan1">
+                  <span class="lan-tit">栏舍概况</span><span class="lan-num lann1">2000</span>
+                </div>
+                <div class="lan-item lan2">
+                  <span class="lan-tit">正常</span><span class="lan-num lann2">1753</span>
+                </div>
+                <div class="lan-item lan3">
+                  <span class="lan-tit">发病</span><span class="lan-num lann3">28</span>
+                </div>
+                <div class="lan-item lan4">
+                  <span class="lan-tit">治疗中</span><span class="lan-num lann4">9</span>
+                </div>
+                <div class="lan-item lan5">
+                  <span class="lan-tit">断奶提醒</span><span class="lan-num lann5">161</span>
+                </div>
+                <div class="lan-item lan6">
+                  <span class="lan-tit">空栏</span><span class="lan-num lann6">247</span>
+                </div>
+
+            </div>
+          </div>
+
+          <div class="card-bx">
+            <div class="card-title">
+                <span><i class="el-icon-d-arrow-right icon-title"></i></span>
+                <span>近半年建档断奶牛只</span>
+            </div>
+            <div class="card-cont">
+                <div id="chartLine5"  style="width: 100%;height:320px;"></div>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
      
     </div>
       
@@ -15,7 +190,8 @@
 </template> 
 
 <script>
-import {   ajaxDataPost } from '@/api/common'
+import {  ajaxDataGet, ajaxDataPost, ajaxDataPut, ajaxDataDelete, checkButtons} from '@/api/common'
+import { parseTime, json2excel } from '@/utils/index.js'
 import * as echarts from 'echarts';
 
 //  require('echarts/theme/macarons')
@@ -23,6 +199,11 @@ export default {
   data() {
     return {
        //图表请求参数
+       date: parseTime(new Date(), '{y}-{m}-{d}'),
+      
+      
+
+      //图表请求参数
       chart1: {
         getdataListParm: {
           name: 'getChart1ByHomepage',
@@ -47,6 +228,79 @@ export default {
         arr2:[33, 11, 44, 55, 90, 230, 55],
        
       },
+      chartProgress_data: { num1: 40.18, num2: 77.23 },
+
+      chart2: {
+        getdataListParm: {
+          name: 'getChart1ByHomepage',
+          page: 1,
+          offset: 1,
+          pagecount: '',
+          returntype: 'Map',
+          parammaps: {
+            inputDatetime: '',
+            beginDate: '',
+            endDate: '',
+        
+          }
+        }
+      },
+      //图表实例
+      chartPie2: null,
+      //图表数据
+      chartPie2_data: {num1: 11, num2: 11, num3: 11, num4: 11, num5: 11, num6: 11, num7: 11, num8: 11},
+
+      chart3: {
+        getdataListParm: {
+          name: 'getChart1ByHomepage',
+          page: 1,
+          offset: 1,
+          pagecount: '',
+          returntype: 'Map',
+          parammaps: {
+            inputDatetime: '',
+            beginDate: '',
+            endDate: '',
+        
+          }
+        }
+      },
+      //图表实例
+      chartPie3: null,
+      //图表数据
+      chartPie3_data: {num1: 828, num2: 1372, num3: 863, num4: 1286, num5: 65, num6: 86, num7: 11, num8: 11},
+
+      chart4: {
+        getdataListParm: {
+          name: 'cowSumOfFarm',
+          page: 1,offset: 1,pagecount: '',returntype: 'Map',
+          parammaps: {  cityName: 'ALL'  }
+        }
+      },
+      //图表实例
+      chartLine4: null,
+      //图表数据
+      chartLine4_data: {
+        month:  ['2022-1','2022-2','2022-3','2022-4','2022-5','2022-6','2022-7','2022-8','2022-9','2022-10','2022-11','2022-12'],
+        num1: [42, 61, 66, 67, 61, 58, 59, 68, 79, 80, 79.5, 78],
+        num2: [24, 34, 39, 38, 32, 30, 32, 38, 42, 44, 43, 41],
+      },
+
+      chart5: {
+        getdataListParm: {
+          name: 'cowSumOfFarm',
+          page: 1,offset: 1,pagecount: '',returntype: 'Map',
+          parammaps: {  cityName: 'ALL'  }
+        }
+      },
+      //图表实例
+      chartLine5: null,
+      //图表数据
+      chartLine5_data: {
+        month:  ['2022年11月','2022年10月','2022年9月','2022年8月','2022年7月','2022年6月'],
+        num1: [12, 65, 12, 50, 71, 20 ],
+        num2: [23, 41, 62, 53, 36, 38]
+      }
     }
   },
 
@@ -55,7 +309,7 @@ export default {
   },
   mounted() {
     //加载 - 图表假数据，如果是图表需要放mounted里测试假数据
-     // this.roadchartPie1(this.chartPie1_data)
+       this.roadchartPie1(this.chartPie1_data)
 
  
 
@@ -82,25 +336,26 @@ export default {
           {
             type: 'pie',radius: '25%',radius: ['50%', '70%'],
             data: [
-              { name: '犊牛总数', value: 2300 },
+              { name: '犊牛总数', value: 2300},
             ],
             itemStyle: { color: '#fac229'},
-            label: {formatter: '{c}',position: 'center', fontSize: 20 },
+            label: {formatter: '{c}',position: 'center', fontSize: 20, textStyle: {   color: '#fac229'  } },
             left: 0,right: '66.6667%',top: 0, bottom: 0
           },
           {
             type: 'pie', radius: '25%', radius: ['50%', '70%'],
             data: [
-              { name: '公犊牛', value: 928, itemStyle: { color: '#6af7a4'},label: {formatter: '{c}',position: 'center', fontSize: 20 }},
-              { name: '', value: 2700, itemStyle: { color: '#104658'},label: {formatter: ' ',position: 'center', fontSize: 20}},
+              //这里formatter数字太小显示不出来，不能用{c},必须传实际数字
+              { name: '公犊牛', value: 372,  itemStyle: { color: '#6af7a4'},label: {formatter: '372',position: 'center', fontSize: 20  , textStyle: {   color: '#6af7a4'  }}},
+              { name: '', value: 400, itemStyle: { color: '#104658'},label: {formatter: '372',position: 'center', fontSize: 20 , textStyle: {   color: '#6af7a4'  }}},
             ],
             left: '33.3333%',right: '33.3333%', top: 0,bottom: 0
           },
           {
             type: 'pie',radius: '25%',radius: ['50%', '70%'],
             data: [
-              { name: '母犊牛', value: 1372,itemStyle: { color: '#6cd6fc'},label: {formatter: '{c}',position: 'center', fontSize: 20 }},
-              { name: '', value: 400,itemStyle: { color: '#093580'},label: {formatter: ' ',position: 'center', fontSize: 20 } },
+              { name: '母犊牛', value: 1372,itemStyle: { color: '#6cd6fc'},label: {formatter: '{c}',position: 'center', fontSize: 20 , textStyle: {   color: '#6cd6fc'  } }},
+              { name: '', value: 400,itemStyle: { color: '#093580'},label: {formatter: ' ',position: 'center', fontSize: 20, textStyle: {   color: '#6cd6fc'  } } },
             ],    
             left: '66.6667%', right: 0,  top: 0, bottom: 0
           }
@@ -123,6 +378,92 @@ export default {
 
 
 .dashboard{padding: 0px 20px;background-color:#030542;color:#fff}
+
+
+.tit-img{width:1400px}
 .card-bx{width:100%;margin-bottom: 20px;}
+
+.card-title{width:100%;height:30px;text-align:left;padding-top:10px;background-color: #042a88}
+.icon-title{color:#00a7ff;font-size:18px;font-weight: bold ;padding-right: 6px;}
+.card-cont{width:100%;;background-color: #0090ff1c;min-height:200px;height:auto;}
+.card-cont2{width:100%;;background-color: #0090ff1c;min-height:340px;height:auto;border: 1px solid #1a97d7;box-shadow: 0px 0 18px rgb(118 167 255);margin-bottom:20px;padding-top:40px}
+ 
+.color-bx{display:flex;justify-content:space-between;margin-bottom:20px}
+.color-bx-item{display:inline-block;height:80px;min-width:110px;width:16%;border-radius:10px; text-align: center;position: relative;}
+.color-block1{background:repeating-linear-gradient(to right,#0285f3,#00c4fe);}
+.color-block2{background:repeating-linear-gradient(to right,#8805e3,#6152fe);}
+.color-block3{background:repeating-linear-gradient(to right,#fe6a46,#fab32f);}
+.color-block4{background:repeating-linear-gradient(to right,#0eaf3e,#41d585);}
+.color-block5{background:repeating-linear-gradient(to right,#0d38d0,#3395f9);}
+.color-num{display:block;font-size:26px;font-weight:bold;padding-top:10px; }
+.color-tt{display:block; }
+.color-circle1{display:inline-block;width:20px;height:20px;position:absolute;top:0px;left:0px;border-radius:50%}
+.circle-c1{background-color:#29a3f7;}
+.circle-c2{background-color:#8d32ec;}
+.circle-c3{background-color:#fd805b;}
+.circle-c4{background-color:#28be57;}
+.circle-c5{background-color:#2653d8;}
+
+.siwei-bx-t{display:flex;justify-content:space-between;padding-top:40px}
+.siwei-item{display:inline-block;width:33%;text-align: center;margin:0 auto;}
+.siwei-span{width:100px;height:100px;border-radius:50%;position: relative;}
+.siwei-span-m{width:85px;height:85px; border-radius:50%;position: absolute;top:8%;right:7%;}
+.siwei-span-s{width:75px;height:75px; border-radius:50%;position: absolute;top:7%;right:6%;}
+.siwei-num{display: block;font-size:20px;font-weight:bold;color:#fff;margin-top:12px}
+.siwei-tit{display: block;font-size:14px;font-weight:bold;color:#fff}
+.siwei-color1{ background-color:#027ff24f;}
+.siwei-color1 div{ background-color:#027ff294;}
+.siwei-color1 div div{ background-color:#027ff2d9;}
+.siwei-color2{ background-color:#6054ff4f;}
+.siwei-color2 div{ background-color:#6054ff94;}
+.siwei-color2 div div{ background-color:#6054ffd9;}
+.siwei-color3{ background-color:#34d1604f;}
+.siwei-color3 div{ background-color:#34d16094;}
+.siwei-color3 div div{ background-color:#34d160d9;}
+ 
+.siwei-bx-b{margin-top:20px;color:#fff}
+.siwei-bx-b div{padding-bottom:12px}
+.siwei-b-tt{font-size:16px;margin-right:10px;}
+.siwei-b-num{font-size:20px; }
+.siwei-squre{display: inline-block;width:14px;height:14px;margin-right:20px; }
+.squre1{background-color:#027ff2;}
+.squre2{background-color:#6054ff;}
+.squre3{background-color:#34d160;}
+
+
+.lan-item{min-width: 100px;width:100%;height:48px;background-color: #054077;line-height:2;padding-left: 50px;margin-bottom:20px;vertical-align:baseline;border-right : 5px solid #0ce0ef;border-left : 5px solid #0ce0ef}
+.lan-tit{display: inline-block;width:52%;color:#fff;font-size:16px}
+.lan-num{display: inline-block;width:45%;color:#fff;font-size:24px}
+.lan1{background-color: #054077;border-right : 5px solid #0ce0ef;border-left : 5px solid #0ce0ef}
+.lan2{background-color: #17217a;border-right : 5px solid #6054ff;border-left : 5px solid #6054ff}
+.lan3{background-color: #373046;border-right : 5px solid #f19610;border-left : 5px solid #f19610}
+.lan4{background-color: #210f75;border-right : 5px solid #8a00e1;border-left : 5px solid #8a00e1}
+.lan5{background-color: #032b78;border-right : 5px solid #027ff2;border-left : 5px solid #027ff2}
+.lan6{background-color: #0e3d57;border-right : 5px solid #34d160;border-left : 5px solid #34d160}
+.lann1{color:#0ce0ef}
+.lann2{color:#6054ff}
+.lann3{color:#f19610}
+.lann4{color:#8a00e1}
+.lann5{color:#027ff2}
+.lann6{color:#34d160}
+
+
+
+.gmu-bx-b{margin-top:38px;color:#fff;padding-left:20px}
+.gmu-bx-b div{padding-bottom:22px;text-align:left}
+.gmu-b-tt{font-size:20px;margin-right:10px;margin-left:20px; }
+.gmu-squre{display: inline-block;width:18px;height:18px;}
+.gmu1{background-color:#074898;}
+.gmu2{background-color:#027ff2;}
+.gmu3{background-color:#f19610;}
+.gmu4{background-color:#6054ff;}
+.gmu5{background-color:#7e5428;}
+.gmu6{background-color:#59d571;}
+.gmu7{background-color:#8805e2;}
+.gmu8{background-color:#6054ff;}
+
+.gmu-bx-b2{margin-top:38px;color:#fff;padding-right:20px}
+.gmu-bx-b2 div{padding-bottom:22px;text-align:right}
+
  
 </style>