全部静态页面写好

src/api/groupManagment.js

@@ -0,0 +1,5 @@
+import { ajax } from "../sdk/ajax";
+// groupManagment
+
+/* 个体数据 */
+export const reqReportList = (data) => ajax("post", "/analyse/eartag/reportList", data)

src/api/login.js

@@ -8,4 +8,4 @@ export const reqLogin = (data) => ajax("post", "/core/auth/login", data)
 export const reqOrgChoose = () => ajax("get", "/core/employ-relation/under-list")
 
 
-export const reqOrganizationId = (data) => ajax("POST", "/core/auth/choose-org",data)
+export const reqOrganizationId = (data) => ajax("POST", "/core/auth/choose-org",data)

src/assets/css/reset.scss

@@ -1,4 +1,4 @@
 /* 公用scss */
-
-$--color-primary: teal;
+div,h1,h2,h3,h4,h5,h3,body,html{margin: 0;padding: 0;}
+a{text-decoration: none;}
 /*css初始化完成*/

src/main.js

@@ -8,6 +8,7 @@ import router from './router'
 import store from './store'
 import vueModuleLoader from 'vue-module-loader'
 import localModule from './module'
+import './assets/css/reset.scss'
 
 // import echarts from "echarts";
 // Vue.prototype.$echarts = echarts;

src/views/Home/Home.vue

@@ -48,7 +48,7 @@
                         :unique-opened="true"
                         :default-openeds="defaultUnfoldedMenu"
                         select="1-1"
-                        background-color="#545c64"
+                        background-color="rgba(46,38,87,0)"
                         text-color="#fff"
                         active-text-color="#ffd04b"
                     >
@@ -59,7 +59,7 @@
                             >
                                 <template slot="title">
                                     <i :class="item.iconClassName"></i>
-                                    <span slot="title">{{ !menuCollapse? item.oneMenuName : '' }}</span>
+                                    <span slot="title">{{ !menuCollapse? item.optionName : '' }}</span>
                                     <!-- <span slot="title">{{ item.oneMenuName }}</span> -->
                                 </template>
                                 <el-menu-item
@@ -78,7 +78,7 @@
                                 @click="onClickMenu(item)"
                             >
                                 <i :class="item.iconClassName"></i>
-                                <span slot="title">{{ !menuCollapse? item.oneMenuName : '' }}</span>
+                                <span slot="title">{{ !menuCollapse? item.optionName : '' }}</span>
                             </el-menu-item>
                         </div>
                     </el-menu>
@@ -122,9 +122,7 @@ export default {
             localStorage.getItem("defaultUnfoldedMenu")
         ];
         this.menuCollapse = JSON.parse(localStorage.getItem("menuCollapse"));
-        this.tags = JSON.parse(localStorage.getItem("tagsNavList")) || [
-            { name: "设备类型", routerName: "deviceInfo", key: "0" }
-        ];
+        this.tags = JSON.parse(localStorage.getItem("tagsNavList")) || [];
     },
     methods: {
         // 收取菜单按钮
@@ -224,7 +222,9 @@ export default {
     display: flex;
     flex-direction: column;
     .header {
-        background-color: #029b62;
+        // background-color: #029b62;
+        // background-color: rgb(46,38,87);
+        background-color: rgb(85, 70, 148);
         height: 40px;
         padding: 10px 20px;
         margin-bottom: 5px;
@@ -255,7 +255,8 @@ export default {
             box-sizing: border-box;
             .col1 {
                 margin-right: 5px;
-                border-radius: 5px;
+                // background-color: rgb(46,38,87);
+                background-image: linear-gradient(to bottom, rgb(85, 70, 148) , rgb(41, 33, 85), rgb(41, 33, 85));
             }
             .col2 {
                 flex: 1;

src/views/Home/mencCofig.js

@@ -2,7 +2,7 @@
 export const menuData = [
     // 有子菜单 字菜单不分组的
     {
-        oneMenuName: "档案管理",
+        optionName: "档案管理",
         iconClassName: "el-icon-setting",
         index: '1',
         disabled: false, // 是否禁用
@@ -32,7 +32,7 @@ export const menuData = [
     },
     
     {
-        oneMenuName: "群体管理",
+        optionName: "群体管理",
         iconClassName: "el-icon-s-flag",
         index: '2',
         disabled: false,
@@ -61,7 +61,7 @@ export const menuData = [
     },
     // 无子菜单的
     {
-        oneMenuName: "个体管理",
+        optionName: "个体管理",
         iconClassName: "el-icon-message",
         index: '3',
         disabled: false,
@@ -81,7 +81,7 @@ export const menuData = [
         ]
     },
     {
-        oneMenuName: "系统配置",
+        optionName: "系统配置",
         iconClassName: "el-icon-coordinate",
         index: '4',
         disabled: false,
@@ -109,7 +109,7 @@ export const menuData = [
         ]
     },
     {
-        oneMenuName: "系统设置",
+        optionName: "系统设置",
         iconClassName: "el-icon-monitor",
         index: '5',
         disabled: false, // 是否禁用
@@ -142,7 +142,7 @@ export const menuData = [
         ]
     },
     {
-        oneMenuName: "开发用模板",
+        optionName: "开发用模板",
         iconClassName: "el-icon-menu",
         index: '100',
         disabled: false, // 是否禁用

src/views/Login/Login.vue

@@ -37,10 +37,9 @@
     </div>
 </template>
 <script>
-import { mapActions } from "vuex";
 import sdk from "../../sdk/index";
 
-import { reqLogin, reqOrgChoose, reqOrganizationId } from "../../api/login";
+import { reqLogin, reqOrgChoose, reqOrganizationId } from "@/api/login";
 
 export default {
     name: "login",
@@ -67,7 +66,6 @@ export default {
         });
     },
     methods: {
-        ...mapActions(["login", "fetch"]),
         /* 登录按钮 */
         onSignIn() {
             console.log(this.form);

src/views/groupManagment/GroupRecord.vue

@@ -47,7 +47,7 @@
                             @current-change="pageChange"
                             background
                             layout="prev, pager, next"
-                            :total="1000"
+                            :page-count="10"
                         ></el-pagination>
                     </el-col>
                 </el-row>

src/views/groupManagment/UnityTrace/UnityTrace.vue

@@ -1,34 +1,180 @@
 <template>
     <div class="UnityTrace">
-        <h1>个体追踪</h1>
-        <!-- <chart></chart> -->
-        <hr />
+        <header class="header">
+            <h5>基本信息</h5>
+            <ul>
+                <el-row type="flex" class="row">
+                    <el-col :span="8" class="col">
+                        <span class="title">猪编号：</span>
+                        <span class="content">1540</span>
+                    </el-col>
+                    <el-col class="col">
+                        <span class="title">出生天数：</span>
+                        <span class="content">51</span>
+                    </el-col>
+                </el-row>
+                <el-row type="flex" class="row">
+                    <el-col :span="8" class="col">
+                        <span class="title">出生日期：</span>
+                        <span class="content">2020-05-01</span>
+                    </el-col>
+                    <el-col class="col">
+                        <span class="title">耳标号：</span>
+                        <span class="content">A3525DF3542</span>
+                    </el-col>
+                </el-row>
+                <el-row type="flex" class="row">
+                    <el-col :span="8" class="col">
+                        <span class="title">批次：</span>
+                        <span class="content">13543</span>
+                    </el-col>
+                    <el-col class="col">
+                        <span class="title">当前位置：</span>
+                        <span class="content">育肥舍四栋</span>
+                    </el-col>
+                </el-row>
+                <el-row type="flex" class="row">
+                    <el-col :span="8" class="col">
+                        <span class="title">品种：</span>
+                        <span class="content">大白</span>
+                    </el-col>
+                    <el-col class="col">
+                        <span class="title">饲养员：</span>
+                        <span class="content">某某某</span>
+                    </el-col>
+                </el-row>
+            </ul>
+        </header>
+
+        <section class="section">
+            <el-date-picker
+                v-model="value2"
+                type="datetimerange"
+                :picker-options="pickerOptions"
+                @change="pickerChange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                align="right"
+                class="date-picker"
+            ></el-date-picker>
+            <article></article>
+        </section>
 
         <chart-a></chart-a>
         <hr />
-        <chart-a></chart-a>
-        <hr />
-        <chart-a></chart-a>
+        <chart-b :options="options"></chart-b>
     </div>
 </template>
 
 <script>
+import { reqReportList } from "@/api/groupManagment";
+
 import chart from "./charts/chart";
 import chart_a from "./charts/chart1";
+import chart_b from "./charts/chart2";
+import ae from "./charts/Ae";
+
+const pickerOptions = {
+    shortcuts: [
+        {
+            text: "最近一周",
+            onClick(picker) {
+                const end = new Date();
+                const start = new Date();
+                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+                picker.$emit("pick", [start, end]);
+            }
+        },
+        {
+            text: "最近一个月",
+            onClick(picker) {
+                const end = new Date();
+                const start = new Date();
+                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+                picker.$emit("pick", [start, end]);
+            }
+        },
+        {
+            text: "最近三个月",
+            onClick(picker) {
+                const end = new Date();
+                const start = new Date();
+                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+                picker.$emit("pick", [start, end]);
+            }
+        }
+    ]
+};
 
 export default {
     name: "UnityTrace",
     components: {
         // chart,
-        "chart-a": chart_a
+        "chart-a": chart_a,
+        "chart-b": chart_b
     },
     data() {
-        return {};
+        return {
+            options: {
+                a: 9,
+                b: 8
+            },
+            pickerOptions,
+            value2: null
+        };
     },
     created() {},
-    mounted() {
-        console.log(document.getElementById("chart_1"))
+    mounted() {},
+    beforeDestroy() {},
+    methods: {
+        // 事件选择器值改变
+        pickerChange(value) {
+            console.log(value);
+        },
+        // 请求个体数据
+        getReportList() {
+            reqReportList()
+                .then(res => {
+                    console.log(res);
+                })
+                .catch(err => {
+                    console.log("登录失败", err);
+                });
+        },
     }
-    
 };
 </script>
+
+<style lang="scss" scoped>
+.UnityTrace {
+    .header {
+        border: 1px solid #eee;
+        padding: 10px;
+        h5 {
+            font-size: 18px;
+        }
+        .row {
+            padding-left: 100px;
+            margin-bottom: 10px;
+            .col {
+                overflow: ellipsis;
+                .title {
+                    font-size: 15px;
+                }
+                .content {
+                    font-size: 14px;
+                    color: #555;
+                }
+            }
+        }
+    }
+    .section {
+        .date-picker {
+            margin-left: 48%;
+            margin-top: 30px;
+            margin-bottom: 20px;
+        }
+    }
+}
+</style>

src/views/groupManagment/UnityTrace/charts/Ae.vue

@@ -0,0 +1,40 @@
+<template>
+    <div class="Ad">
+        <h1>{{title}}</h1>
+    </div>
+</template>
+
+<script>
+import { mapActions } from "vuex";
+
+export default {
+    name: "Ad",
+    props: {
+        title:{default: 'default'}
+    },
+    data() {
+        return {};
+    },
+    created() {
+        console.log(this.title)
+    },
+    methods: {
+        ...mapActions(["fetch"]),
+        get() {
+            this.fetch({
+                api: "aaa",
+                method: "GET",
+                data: {},
+                success: res => {
+                    console.log(res);
+                },
+                fail: err => {
+                    console.log(err);
+                    if (err.errMsg) this.$message.error(err.errMsg);
+                    else this.$message.error("服务器发生异常");
+                }
+            });
+        }
+    }
+};
+</script>

src/views/groupManagment/UnityTrace/charts/chart1.vue

@@ -1,12 +1,15 @@
 <template>
     <div class="hello">
-        <div id="chart_1" style="width: 100%;height:400px;"></div>
+        <div id="chart_1" style="width: 80%;height:400px;"></div>
     </div>
 </template>
 
 <script>
 export default {
     name: "HelloWorld",
+    props: [
+        'tagId'
+    ],
     data() {
         return {
             orgOptions: {}

src/views/groupManagment/UnityTrace/charts/chart2.vue

@@ -0,0 +1,120 @@
+<template>
+    <div class="chart2">
+        
+        <div id="chart2" style="width: 80%;height:400px;">999</div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "chart2",
+   
+    data() {
+        return {
+            orgOptions: {},
+            subtext: "副标题"
+        };
+    },
+    created() {
+        
+    },
+     props: {
+         options:{type: Object}
+     },
+        
+    mounted() {
+        console.log(this.options)
+        this.drawChart();
+    },
+    methods: {
+        drawChart() {
+            // 基于准备好的dom，初始化echarts实例
+            let myChart = this.$echarts.init(
+                document.getElementById('chart2')
+            );
+            // 指定图表的配置项和数据
+            let option = {
+                title: {
+                    text: "耳根温度  36.4℃",
+                    subtext: this.subtext,
+                    left: 100
+                },
+                tooltip: {
+                    trigger: "axis"
+                },
+                toolbox: {
+                    show: true,
+                    feature: {
+                        dataZoom: {
+                            yAxisIndex: "none"
+                        },
+                        dataView: { readOnly: false },
+                        magicType: { type: ["line", "bar"] },
+                        restore: {},
+                        saveAsImage: {}
+                    }
+                },
+                color: {
+                    type: "linear",
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [
+                        {
+                            offset: 0,
+                            color: "red" // 0% 处的颜色
+                        },
+                        {
+                            offset: 1,
+                            color: "blue" // 100% 处的颜色
+                        }
+                    ]
+                },
+                xAxis: {
+                    type: "category",
+                    boundaryGap: false,
+                    data: [
+                        "七分钟前",
+                        "六分钟前",
+                        "五分钟前",
+                        "四分钟前",
+                        "三分钟前",
+                        "两分钟前",
+                        "当前"
+                    ]
+                },
+                yAxis: {
+                    type: "value",
+                    axisLabel: {
+                        formatter: "{value} °C"
+                    },
+                    scale: true
+                },
+                series: [
+                    {
+                        name: "耳温",
+                        type: "line",
+                        data: [32.5, 32.6, 32.4, 32.5, 32.4, 32.6, 32.4],
+                        markPoint: {
+                            data: [
+                                { type: "max", name: "最大值" },
+                                { type: "min", name: "最小值" }
+                            ]
+                        },
+                        markLine: {
+                            data: [{ type: "average", name: "平均值" }]
+                        }
+                    }
+                ]
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>