菜单优化

src/main/resources/templates/MapperXmlSqlServerTemplate.vm

@@ -12,9 +12,7 @@
         #end
     </resultMap>
     <sql id="Base_Column_List">
-        #foreach($field in $model.fields)
-            ${field.name}#if($foreach.count!=$model.fields.size()),#end
-        #end
+        #foreach($field in $model.fields)#if(${foreach.index}!=0), #end${field.name}#end
     </sql>
     <select id="selectByPrimaryKey" resultMap="BaseResultMap" parameterType="java.lang.Integer">
         select

src/main/resources/templates/MapperXmlTemplate.vm

@@ -12,12 +12,7 @@
 #end
     </resultMap>
     <sql id="Base_Column_List" >
-        <trim  suffixOverrides="," >
-    #foreach($field in $model.fields)
-        ${field.name},
-
-    #end
-        </trim>
+        #foreach($field in $model.fields)#if(${foreach.index}!=0), #end${field.name}#end
     </sql>
     <select id="selectByPrimaryKey" resultMap="BaseResultMap" parameterType="java.lang.Integer" >
         select

src/main/vue/package.json

@@ -10,6 +10,8 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "@antv/data-set": "^0.9.6",
+    "@antv/g2": "^3.2.8",
     "@fortawesome/fontawesome": "^1.1.8",
     "@fortawesome/fontawesome-free-solid": "^5.0.13",
     "@fortawesome/vue-fontawesome": "0.0.22",

src/main/vue/src/components/SubMenu.vue

@@ -1,7 +1,9 @@
 <template>
-    <menu-item v-if="isLeaf" :menu="menu" ref="title" @selected="onSubMenuSelected" :depth="depth" :collapse="collapse" :width="width" :colors="colors" :activeId="activeId"></menu-item>
+    <menu-item v-if="isLeaf" :menu="menu" ref="title" @selected="onSubMenuSelected" :depth="depth" :collapse="collapse"
+               :width="width" :colors="colors" :activeId="activeId"></menu-item>
     <li v-else @mouseenter="enterBody" @mouseleave="leaveBody">
-        <div class="sub-menu-title" :style="titelStyle" ref="title" @click.stop="isOpen=!isOpen" @mouseenter="hover = true" @mouseleave="hover = false">
+        <div class="sub-menu-title" :style="titleStyle" ref="title" @click.stop="isOpen=!isOpen"
+             @mouseenter="hover = true" @mouseleave="hover = false">
             <i class="icon fa-fw" :class="menu.icon" v-if="menu.icon"></i>
             <transition name="el-fade-in">
                 <span v-if="!collapse || depth > 0">{{menu.name}}</span>
@@ -14,248 +16,258 @@
             <div class="sub-menu-wrapper" :style="menuStyle" v-show="isOpen">
                 <ul class="sub-menu" :style="subMenuStyle" ref="child">
                     <!-- <slot :isOpen="isOpen" @onSelected="onSubMenuSelected"></slot> -->
-                    <sub-menu v-for="item in menu.children" :key="item.id" :menu="item" :depth="depth+1" :width="width" :collapse="collapse" :colors="colors" :activeId="activeId" @selected="onSubMenuSelected" @opened="onSubMenuOpened"></sub-menu>
+                    <sub-menu v-for="item in menu.children" :key="item.id" :menu="item" :depth="depth+1" :width="width"
+                              :collapse="collapse" :colors="colors" :activeId="activeId" @selected="onSubMenuSelected"
+                              @opened="onSubMenuOpened"></sub-menu>
                 </ul>
             </div>
         </transition>
     </li>
 </template>
 <script>
-import tinyColor from 'tinycolor2'
-import MenuItem from './MenuItem'
-export default {
-    name: 'SubMenu',
-    props: {
-        menu: {
-            type: Object,
-            required: true
-        },
-        depth: {
-            type: Number,
-            default: 0
-        },
-        parentIsOpen: {
-            type: Boolean,
-            default: false
-        },
-        collapse: {
-            type: Boolean,
-            default: false
-        },
-        width: {
-            type: Number
-        },
-        colors: {
-            type: Object
-        },
-        activeId: {}
-    },
-    data() {
-        return {
-            x: 0,
-            y: 0,
-            w: 0,
-            h: 0,
-            c: 0,
-            isOpen: false,
-            active: false,
-            collapsing: false,
-            hover: false
-        }
-    },
-    mounted() {
-        this.reCale()
-    },
-    computed: {
-        isLeaf() {
-            return !(this.menu.children instanceof Array)
+    import MenuItem from './MenuItem'
+
+    export default {
+        name: 'SubMenu',
+        props: {
+            menu: {
+                type: Object,
+                required: true
+            },
+            depth: {
+                type: Number,
+                default: 0
+            },
+            parentIsOpen: {
+                type: Boolean,
+                default: false
+            },
+            collapse: {
+                type: Boolean,
+                default: false
+            },
+            width: {
+                type: Number
+            },
+            colors: {
+                type: Object
+            },
+            activeId: {}
         },
-        titelStyle() {
-            let style = {
-                paddingLeft: this.depth === 1 && !this.collapse ? '45px ' : '',
-                color: this.colors.textColor
-            }
-            if (this.active && (this.collapse || (this.depth > 0))) {
-                style.backgroundColor = this.colors.activeBackgroundColor
-                style.borderLeft = `2px solid ${this.colors.textColor}`
-            } else if (this.hover) {
-                style.backgroundColor = this.colors.hoverBackgroundColor
-            } else {
-                style.backgroundColor = this.colors.backgroundColor
+        data() {
+            return {
+                x: 0,
+                y: 0,
+                w: 0,
+                h: 0,
+                c: 0,
+                isOpen: false,
+                active: false,
+                collapsing: false,
+                hover: false
             }
-            return style
         },
-        menuStyle() {
-            if ((this.collapse || (this.depth > 0)) && !this.collapsing) {
+        mounted() {
+            this.reCale()
+        },
+        computed: {
+            isLeaf() {
+                return !(this.menu.children instanceof Array)
+            },
+            titleStyle() {
                 let style = {
-                    position: 'absolute',
-                    left: this.x + this.w + 'px',
-                    height: 56 * this.c + 10 + 'px',
-                    paddingLeft: '5px',
-                    zIndex: 3
+                    paddingLeft: this.depth === 1 && !this.collapse ? '45px ' : '',
+                    color: this.colors.textColor
                 }
-                if (this.y + 56 * this.c + 10 > window.innerHeight) {
-                    style.top = window.innerHeight - 56 * this.c - 15 + 'px'
+                if (this.active && (this.collapse || (this.depth > 0))) {
+                    style.backgroundColor = this.colors.activeBackgroundColor
+                    style.borderLeft = `2px solid ${this.colors.textColor}`
+                } else if (this.hover) {
+                    style.backgroundColor = this.colors.hoverBackgroundColor
                 } else {
-                    style.top = this.y + 'px'
+                    style.backgroundColor = this.colors.backgroundColor
                 }
                 return style
-            }
-            return {
-                height: 56 * this.c + 'px'
-            }
-        },
-        subMenuStyle() {
-            let style = {
-                backgroundColor: this.colors.backgroundColor
-            }
-            if ((this.depth > 0 || this.collapse) && !this.collapsing) {
-                style = {
-                    ...style,
-                    width: this.width + 'px',
-                    boxSizing: 'border-box',
-                    padding: '5px 0',
-                    borderRadius: '2px',
-                    boxShadow: '0 2px 12px 0 rgba(0, 0, 0, 0.1)'
+            },
+            menuStyle() {
+                if ((this.collapse || (this.depth > 0)) && !this.collapsing) {
+                    let style = {
+                        position: 'absolute',
+                        left: this.x + this.w + 'px',
+                        height: 56 * this.c + 10 + 'px',
+                        paddingLeft: '5px',
+                        zIndex: 3
+                    }
+                    if (this.$refs.title && (this.$refs.title.getBoundingClientRect().y + 56 * this.c + 15) > window.innerHeight) {
+                        let offset = this.$refs.title.getBoundingClientRect().y + 56 * this.c + 15 - window.innerHeight
+                        style.top = this.y - offset + 'px'
+                    } else {
+                        style.top = this.y + 'px'
+                    }
+                    // if (this.y + 56 * this.c + 10 > window.innerHeight) {
+                    //     style.top = window.innerHeight - 56 * this.c - 15 + 'px'
+                    // } else {
+                    //     style.top = this.y + 'px'
+                    // }
+                    return style
                 }
-            }
-            return style
-        },
-        transitionName() {
-            if (this.collapsing) {
-                return 'menu-collapse'
-            }
-            return this.collapse || (this.depth > 0) ? 'menu-zoom' : 'menu-collapse'
-        }
-    },
-    methods: {
-        activeChange(activeId) {
-            if (activeId instanceof Array && activeId.indexOf(this.menu.id) === -1) {
-                this.active = false
-            }
-            this.$children.forEach(child => {
-                child.activeChange(activeId)
-            })
-        },
-        openedChange(openedId) {
-            if (openedId.indexOf(this.menu.id) === -1) {
-                this.isOpen = false
-            }
-            this.$children.forEach(child => {
-                child.openedChange(openedId)
-            })
-        },
-        reCale() {
-            this.x = this.$refs.title.offsetLeft
-            this.y = this.$refs.title.offsetTop
-            this.w = this.$refs.title.offsetWidth
-            this.h = this.$refs.title.offsetHeight
-            if (!this.isLeaf) {
-                this.c = this.$refs.child.childElementCount
-            }
-        },
-        enterBody(e) {
-            if (this.collapse || (this.depth > 0)) {
-                this.isOpen = true
-            }
-        },
-        leaveBody(e) {
-            if (this.collapse || (this.depth > 0)) {
-                this.isOpen = false
+                return {
+                    height: 56 * this.c + 'px'
+                }
+            },
+            subMenuStyle() {
+                let style = {
+                    backgroundColor: this.colors.backgroundColor
+                }
+                if ((this.depth > 0 || this.collapse) && !this.collapsing) {
+                    style = {
+                        ...style,
+                        width: this.width + 'px',
+                        boxSizing: 'border-box',
+                        padding: '5px 0',
+                        borderRadius: '2px',
+                        boxShadow: '0 2px 12px 0 rgba(0, 0, 0, 0.1)'
+                    }
+                }
+                return style
+            },
+            transitionName() {
+                if (this.collapsing) {
+                    return 'menu-collapse'
+                }
+                return this.collapse || (this.depth > 0) ? 'menu-zoom' : 'menu-collapse'
             }
         },
-        onSubMenuSelected(e) {
-            this.active = true
-            if (this.depth === 0 && !this.collapse) {
-                this.isOpen = true
-            }
-            let selected = [this.menu.id, ...e]
-            if (this.isLeaf) {
-                this.$emit('selected', e)
-            } else {
-                this.$emit('selected', selected)
+        methods: {
+            activeChange(activeId) {
+                if (activeId instanceof Array && activeId.indexOf(this.menu.id) === -1) {
+                    this.active = false
+                }
+                this.$children.forEach(child => {
+                    child.activeChange(activeId)
+                })
+            },
+            openedChange(openedId) {
+                if (openedId.indexOf(this.menu.id) === -1) {
+                    this.isOpen = false
+                }
+                this.$children.forEach(child => {
+                    child.openedChange(openedId)
+                })
+            },
+            reCale() {
+                this.x = this.$refs.title.offsetLeft
+                this.y = this.$refs.title.offsetTop
+                this.w = this.$refs.title.offsetWidth
+                this.h = this.$refs.title.offsetHeight
+                if (!this.isLeaf) {
+                    this.c = this.$refs.child.childElementCount
+                }
+            },
+            enterBody(e) {
+                if (this.collapse || (this.depth > 0)) {
+                    this.isOpen = true
+                }
+            },
+            leaveBody(e) {
+                if (this.collapse || (this.depth > 0)) {
+                    //this.isOpen = false
+                }
+            },
+            onSubMenuSelected(e) {
+                this.active = true
+                if (this.depth === 0 && !this.collapse) {
+                    this.isOpen = true
+                }
+                let selected = [this.menu.id, ...e]
+                if (this.isLeaf) {
+                    this.$emit('selected', e)
+                } else {
+                    this.$emit('selected', selected)
+                }
+            },
+            onSubMenuOpened(e) {
+                this.$emit('opened', [this.menu.id, ...e])
             }
         },
-        onSubMenuOpened(e) {
-            this.$emit('opened', [this.menu.id, ...e])
-        }
-    },
-    watch: {
-        parentIsOpen(val) {
-            if (!val) this.isOpen = false
-        },
-        isOpen(val) {
-            this.reCale()
-            if (val) {
-                this.$emit('opened', [this.menu.id])
+        watch: {
+            parentIsOpen(val) {
+                if (!val) this.isOpen = false
+            },
+            isOpen(val) {
+                this.reCale()
+                if (val) {
+                    this.$emit('opened', [this.menu.id])
+                }
+            },
+            collapse(val) {
+                if (val) {
+                    this.collapsing = true
+                    setTimeout(() => {
+                        this.collapsing = false
+                    }, 300);
+                    this.isOpen = false
+                } else {
+                    this.isOpen = this.active && this.depth === 0 ? true : false
+                }
             }
         },
-        collapse(val) {
-            if (val) {
-                this.collapsing = true
-                setTimeout(() => {
-                    this.collapsing = false
-                }, 300);
-                this.isOpen = false
-            } else {
-                this.isOpen = this.active && this.depth === 0 ? true : false
-            }
+        components: {
+            MenuItem
         }
-    },
-    components: {
-        MenuItem
     }
-}
 </script>
 <style lang="less" scoped>
-.sub-menu-title {
-    height: 56px;
-    line-height: 56px;
-    font-size: 14px;
-    padding: 0 20px;
-    box-sizing: border-box;
-    transition: background-color 0.2s, color 0.2s;
-    position: relative;
-    .icon {
-        margin-right: 6px;
-    }
-    .el-icon-arrow-left {
-        position: absolute;
-        right: 20px;
-        top: 50%;
-        margin-top: -7px;
-        font-size: 12px;
-        transition: all 0.3s;
-        &.open {
-            transform: rotate(-90deg);
+    .sub-menu-title {
+        height: 56px;
+        line-height: 56px;
+        font-size: 14px;
+        padding: 0 20px;
+        box-sizing: border-box;
+        transition: background-color 0.2s, color 0.2s;
+        position: relative;
+        .icon {
+            margin-right: 6px;
+        }
+        .el-icon-arrow-left {
+            position: absolute;
+            right: 20px;
+            top: 50%;
+            margin-top: -7px;
+            font-size: 12px;
+            transition: all 0.3s;
+            &.open {
+                transform: rotate(-90deg);
+            }
+        }
+        * {
+            vertical-align: middle;
         }
     }
-    * {
-        vertical-align: middle;
+
+    .menu-collapse-enter,
+    .menu-collapse-leave-active {
+        height: 0 !important;
     }
-}
 
-.menu-collapse-enter,
-.menu-collapse-leave-active {
-    height: 0 !important;
-}
-.menu-collapse-enter-active,
-.menu-collapse-leave-active {
-    transition: height 0.3s ease;
-    transform: translate3d(0, 0, 0);
-    overflow: hidden;
-}
+    .menu-collapse-enter-active,
+    .menu-collapse-leave-active {
+        transition: height 0.3s ease;
+        transform: translate3d(0, 0, 0);
+        overflow: hidden;
+    }
 
-.menu-zoom-enter,
-.menu-zoom-leave-active {
-    transform: scale3d(0.2, 0.2, 1);
-    opacity: 0;
-}
-.menu-zoom-enter-active,
-.menu-zoom-leave-active {
-    transform-origin: 0 0;
-    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
+    .menu-zoom-enter,
+    .menu-zoom-leave-active {
+        transform: scale3d(0.2, 0.2, 1);
+        opacity: 0;
+    }
+
+    .menu-zoom-enter-active,
+    .menu-zoom-leave-active {
+        transform-origin: 0 0;
+        transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
         opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-    overflow: hidden;
-}
+        overflow: hidden;
+    }
 </style>

src/main/vue/src/entries/admin.js

@@ -29,6 +29,7 @@ Vue.component('single-upload', SingleUpload);
 Vue.component('rich-text', RichText);
 const baseUrl = process.env.NODE_ENV === 'production' ? '../' : `http://${location.hostname}:8080`;
 Vue.prototype.$baseUrl = baseUrl;
+Vue.prototype.$widgetBaseUrl = 'http://116.62.160.108:8180/';
 axios.defaults.withCredentials = true;
 axios.defaults.baseURL = baseUrl;
 Vue.prototype.$http = {
@@ -55,8 +56,8 @@ Vue.prototype.$http = {
             // }
             store.commit('updateFetchingData', true);
             axios.get(params.url, {
-                params: params.data
-            }, {withCredentials: true}).then(res => {
+                params: params.data,
+            }).then(res => {
                 store.commit('updateFetchingData', false);
                 if (res.status === 200) {
                     resolve(res.data);
@@ -123,7 +124,7 @@ Vue.prototype.$http = {
         }
         return new Promise((resolve, reject) => {
             store.commit('updateFetchingData', true);
-            axios.post(params.url, data, {withCredentials: true}).then(res => {
+            axios.post(params.url, data).then(res => {
                 store.commit('updateFetchingData', false);
                 if (res.status === 200) {
                     resolve(res.data);

src/main/vue/src/pages/Dashboard.vue

@@ -29,11 +29,6 @@
 
 <script>
     import {GridLayout, GridItem} from 'vue-grid-layout'
-    import WeatherWidget from '../widgets/WeatherWidget'
-    import UserWidget from '../widgets/UserWidget'
-    import LineChartWidget from '../widgets/LineChartWidget'
-    import BarChartWidget from '../widgets/BarChartWidget'
-    import PieChartWidget from '../widgets/PieChartWidget'
 
     export default {
         created() {
@@ -42,29 +37,69 @@
         data() {
             return {
                 layout: [
-                    {x: 0, y: 0, w: 6, h: 4, i: "0", name: 'WeatherWidget'},
-                    {x: 6, y: 0, w: 6, h: 4, i: "1", name: 'UserWidget'},
-                    {x: 0, y: 4, w: 6, h: 6, i: "2", name: 'BarChartWidget'},
-                    {x: 0, y: 10, w: 6, h: 6, i: "3", name: 'LineChartWidget'},
-                    {x: 6, y: 4, w: 6, h: 12, i: "4", name: 'PieChartWidget'},
+                    {
+                        "x": 0,
+                        "y": 2,
+                        "w": 6,
+                        "h": 10,
+                        "i": "4",
+                        "name": "CowStructure",
+                        "moved": false
+                    },
+                    {
+                        "x": 0,
+                        "y": 0,
+                        "w": 2,
+                        "h": 2,
+                        "i": "5",
+                        "name": "FarmNum",
+                        "moved": false
+                    },
+                    {
+                        "x": 0,
+                        "y": 12,
+                        "w": 12,
+                        "h": 7,
+                        "i": "6",
+                        "name": "AverageLactation",
+                        "moved": false
+                    },
+                    {
+                        "x": 6,
+                        "y": 2,
+                        "w": 6,
+                        "h": 10,
+                        "i": "7",
+                        "name": "AreaLivestock",
+                        "moved": false
+                    },
+                    {
+                        "x": 2,
+                        "y": 0,
+                        "w": 10,
+                        "h": 2,
+                        "i": "8",
+                        "name": "CowNum",
+                        "moved": false
+                    }
                 ],
                 editable: false
             }
         },
         methods: {
             save() {
-                console.log(JSON.stringify(this.layout));
+                console.log(JSON.stringify(this.layout, null, 4));
                 this.editable = false
             }
         },
         components: {
             GridLayout,
             GridItem,
-            WeatherWidget,
-            UserWidget,
-            LineChartWidget,
-            BarChartWidget,
-            PieChartWidget
+            CowStructure: () => import('../widgets/CowStructure'),
+            FarmNum: () => import('../widgets/FarmNum'),
+            AverageLactation: () => import('../widgets/AverageLactation'),
+            AreaLivestock: () => import('../widgets/AreaLivestock'),
+            CowNum: () => import('../widgets/CowNum')
         }
     }
 </script>

src/main/vue/src/pages/TestMenu.vue

@@ -1,85 +0,0 @@
-<template>
-    <div>
-        <theme-picker></theme-picker>
-        <el-button type="primary" @click="activeId=13">test</el-button>
-        <el-button type="primary" plain @click="activeId=37">test</el-button>
-        <el-button @click="collapse=!collapse">test</el-button>
-        <!-- <nav-menu style="width:200px">
-            <sub-menu icon="fas fa-bars" title="菜单1" id="1" :depth="0">
-                <template slot-scope="{isOpen}">
-                    <menu-item id="1-1">菜单1-1</menu-item>
-                    <menu-item id="1-2">菜单1-2</menu-item>
-                    <menu-item id="1-3">菜单1-3</menu-item>
-                    <sub-menu icon="fas fa-bars" title="菜单1-4" id="1-4" :depth="1" :parentIsOpen="isOpen">
-                        <template slot-scope="{isOpen}">
-                            <menu-item id="1-4-1">菜单1-4-1</menu-item>
-                            <menu-item id="1-4-2">菜单1-4-2</menu-item>
-                            <menu-item id="1-4-3">菜单1-4-3</menu-item>
-                            <sub-menu icon="fas fa-bars" title="菜单1-4-4" id="1-4-4" :depth="1" :parentIsOpen="isOpen">
-                                <menu-item id="1-4-4-1">菜单1-4-4-1</menu-item>
-                                <menu-item id="1-4-4-2">菜单1-4-4-2</menu-item>
-                                <menu-item id="1-4-4-3">菜单1-4-4-3</menu-item>
-                            </sub-menu>
-                        </template>
-                    </sub-menu>
-                </template>
-            </sub-menu>
-            <sub-menu icon="fas fa-bars" title="菜单2" id="2" :depth="0">
-                <menu-item id="2-1">菜单2-1</menu-item>
-                <menu-item id="2-2">菜单2-2</menu-item>
-                <menu-item id="2-3">菜单2-3</menu-item>
-            </sub-menu>
-        </nav-menu> -->
-
-        <nav-menu :activeId="activeId" :menus="menus" :collapse="collapse" :width="220" theme="#6a90b8">
-        </nav-menu>
-    </div>
-</template>
-<script>
-import ThemePicker from '../components/ThemePicker'
-import NavMenu from '../components/NavMenu'
-import SubMenu from '../components/SubMenu'
-import MenuItem from '../components/MenuItem'
-import MenuComponent from '../components/MenuComponent'
-import tinyColor from 'tinycolor2'
-export default {
-    created() {
-        this.$http.get({
-            url: '/sysMenu/userMenuTree',
-            data: {
-                userId: 84664
-            }
-        }).then(res => {
-            if (res.success) {
-                this.menus = res.data;
-            }
-        })
-    },
-    data() {
-        return {
-            menus: [],
-            collapse: true,
-            activeId: ''
-        }
-    },
-    computed: {
-        style() {
-            return {
-                width: '150px',
-                height: '56px',
-                backgroundColor: this.colors[0]
-            }
-        }
-    },
-    components: {
-        ThemePicker,
-        NavMenu,
-        SubMenu,
-        MenuItem,
-        MenuComponent
-    }
-}
-</script>
-
-<style lang="less" scoped>
-</style>

src/main/vue/src/router/index.js

@@ -270,11 +270,6 @@ const router = new Router({
                     name: 'TestCaidans',
                     component: () => import('../pages/TestCaidans')
                 },
-                {
-                    path: '/testMenu',
-                    name: 'TestMenu',
-                    component: () => import('../pages/TestMenu')
-                },
                 {
                     path: '/tableNiuseRongliang',
                     name: 'TableNiuseRongliang',
@@ -337,4 +332,4 @@ router.afterEach((to, from) => {
     window.onresize();
 });
 
-export default router;
+export default router;

src/main/vue/src/vuex/index.js

@@ -7,7 +7,8 @@ export default new Vuex.Store({
     state: {
         tableHeight: 0,
         fetchingData: false,
-        userInfo: null
+        userInfo: null,
+        farmName: '金山'
     },
     mutations: {
         updateTableHeight(state, height) {
@@ -21,5 +22,4 @@ export default new Vuex.Store({
         }
     },
     actions: {}
-})
-;
+});

src/main/vue/src/widgets/AreaLivestock.vue

@@ -0,0 +1,97 @@
+<template>
+    <widget-card :bodyStyle="bodyStyle" ref="container" class="chart-container">
+        <div slot="header">区域存栏数</div>
+        <div id="chart-area-livestock"></div>
+    </widget-card>
+</template>
+<script>
+    import WidgetCard from './WidgetCard'
+    import {mapState} from 'vuex'
+    import axios from 'axios'
+
+    export default {
+        mounted() {
+            require.ensure(['@antv/g2', '@antv/data-set'], require => {
+                const G2 = require('@antv/g2');
+                const DataSet = require('@antv/data-set');
+                axios.get(this.$widgetBaseUrl + 'api/Values/GetCowsAvgMrDays', {
+                    withCredentials: false
+                }).then(res => {
+                    if (res.data.rtnCode > 0) {
+                        this.chartData = res.data.rtnList;
+                        this.drawChart(G2, DataSet);
+                    }
+                })
+            });
+        },
+        data() {
+            return {
+                myChart: null,
+                bodyStyle: {
+                    display: 'flex',
+                    alignItems: 'center'
+                },
+                chartData: []
+            }
+        },
+        computed: {
+            ...mapState(['farmName'])
+        },
+        methods: {
+            drawChart(G2, DataSet) {
+                var data = [{
+                    name: 'London',
+                    'Jan.': 18.9,
+                    'Feb.': 28.8,
+                    'Mar.': 39.3,
+                    'Apr.': 81.4,
+                    'May': 47,
+                    'Jun.': 20.3,
+                    'Jul.': 24,
+                    'Aug.': 35.6
+                }, {
+                    name: 'Berlin',
+                    'Jan.': 12.4,
+                    'Feb.': 23.2,
+                    'Mar.': 34.5,
+                    'Apr.': 99.7,
+                    'May': 52.6,
+                    'Jun.': 35.5,
+                    'Jul.': 37.4,
+                    'Aug.': 42.4
+                }];
+                var ds = new DataSet();
+                var dv = ds.createView().source(data);
+                dv.transform({
+                    type: 'fold',
+                    fields: ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May', 'Jun.', 'Jul.', 'Aug.'], // 展开字段集
+                    key: '月份', // key字段
+                    value: '月均降雨量' // value字段
+                });
+
+                var chart = new G2.Chart({
+                    container: 'chart-area-livestock',
+                    forceFit: true,
+                    height: this.$refs.container.$el.offsetHeight - 75,
+                    padding: 'auto',
+                    options: {
+                        legends: {
+                            position: 'right',
+                        }
+                    }
+                });
+                chart.source(dv);
+                chart.intervalStack().position('月份*月均降雨量').color('name');
+                chart.render();
+            }
+        },
+        components: {
+            WidgetCard
+        }
+    }
+</script>
+<style lang="less" scoped>
+    #chart-area-livestock {
+        width: 100%;
+    }
+</style>

src/main/vue/src/widgets/AverageLactation.vue

@@ -0,0 +1,69 @@
+<template>
+    <widget-card :bodyStyle="bodyStyle" ref="container">
+        <div slot="header">平均泌乳天数</div>
+        <div ref="chart" class="chart"></div>
+    </widget-card>
+</template>
+<script>
+    import WidgetCard from './WidgetCard'
+    import {mapState} from 'vuex'
+    import axios from 'axios'
+
+    export default {
+        mounted() {
+            require.ensure(['@antv/g2'], require => {
+                const G2 = require('@antv/g2');
+                axios.get(this.$widgetBaseUrl + 'api/Values/GetCowsAvgMrDays', {
+                    withCredentials: false
+                }).then(res => {
+                    if (res.data.rtnCode > 0) {
+                        this.chartData = res.data.rtnList.map(i => {
+                            return {
+                                name: i['当前牧场'],
+                                value: i['泌乳天数']
+                            }
+                        });
+                        this.drawChart(G2);
+                    }
+                })
+            });
+        },
+        data() {
+            return {
+                myChart: null,
+                bodyStyle: {
+                    display: 'flex',
+                    alignItems: 'center'
+                },
+                chartData: []
+            }
+        },
+        computed: {
+            ...mapState(['farmName'])
+        },
+        methods: {
+            drawChart(G2) {
+                var chart = new G2.Chart({
+                    container: this.$refs.chart,
+                    forceFit: true,
+                    height: this.$refs.container.$el.offsetHeight - 75,
+                    padding: 'auto',
+                });
+                chart.source(this.chartData);
+                chart.scale('sales', {
+                    tickInterval: 20
+                });
+                chart.interval().position('name*value');
+                chart.render();
+            }
+        },
+        components: {
+            WidgetCard
+        }
+    }
+</script>
+<style lang="less" scoped>
+    .chart {
+        width: 100%;
+    }
+</style>

src/main/vue/src/widgets/CowNum.vue

@@ -0,0 +1,100 @@
+<template>
+    <el-row :gutter="10" type="flex" justify="space-between">
+        <el-col>
+            <widget-card :bodyStyle="bodyStyle" style="height:100%">
+                <i class="fa-fw fas fa-chart-bar fa-3x" style="color: #40c9c6;"></i>
+                <div class="info">
+                    <div class="text">总牛头数</div>
+                    <div class="num">{{realTimeData['总牛头数']}}</div>
+                </div>
+            </widget-card>
+        </el-col>
+        <el-col>
+            <widget-card :bodyStyle="bodyStyle" style="height:100%">
+                <i class="fa-fw fas fa-chart-bar fa-3x" style="color: #40c9c6;"></i>
+                <div class="info">
+                    <div class="text">泌乳牛头数</div>
+                    <div class="num">{{realTimeData['泌乳牛头数']}}</div>
+                </div>
+            </widget-card>
+        </el-col>
+        <el-col>
+            <widget-card :bodyStyle="bodyStyle" style="height:100%">
+                <i class="fa-fw fas fa-chart-bar fa-3x" style="color: #40c9c6;"></i>
+                <div class="info">
+                    <div class="text">病牛头数</div>
+                    <div class="num">{{realTimeData['病牛头数']}}</div>
+                </div>
+            </widget-card>
+        </el-col>
+        <el-col>
+            <widget-card :bodyStyle="bodyStyle" style="height:100%">
+                <i class="fa-fw fas fa-chart-bar fa-3x" style="color: #40c9c6;"></i>
+                <div class="info">
+                    <div class="text">总牛头数</div>
+                    <div class="num">{{realTimeData['后备牛头数']}}</div>
+                </div>
+            </widget-card>
+        </el-col>
+        <el-col>
+            <widget-card :bodyStyle="bodyStyle" style="height:100%">
+                <i class="fa-fw fas fa-chart-bar fa-3x" style="color: #40c9c6;"></i>
+                <div class="info">
+                    <div class="text">犊牛头数</div>
+                    <div class="num">{{realTimeData['犊牛头数']}}</div>
+                </div>
+            </widget-card>
+        </el-col>
+    </el-row>
+</template>
+<script>
+    import WidgetCard from './WidgetCard'
+    import axios from 'axios'
+    import {mapState} from 'vuex'
+
+    export default {
+        created() {
+            axios.get(this.$widgetBaseUrl + 'api/Values/GetCowsCount', {
+                params: {
+                    FrameName: this.farmName
+                },
+                withCredentials: false
+            }).then(res => {
+                if (res.data.rtnCode > 0) {
+                    this.realTimeData = res.data.rtnList[0]
+                }
+            })
+        },
+        data() {
+            return {
+                bodyStyle: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    height: '100%'
+                },
+                realTimeData: {}
+            }
+        },
+        computed: {
+            ...mapState(['farmName'])
+        },
+        components: {
+            WidgetCard
+        }
+    }
+</script>
+<style lang="less" scoped>
+    .info {
+        flex-grow: 1;
+        text-align: right;
+        .text {
+            color: #999;
+            font-size: 16px;
+            margin-bottom: 6px;
+        }
+        .num {
+            font-size: 20px;
+            color: #333;
+        }
+    }
+</style>

src/main/vue/src/widgets/CowStructure.vue

@@ -0,0 +1,94 @@
+<template>
+    <widget-card :bodyStyle="bodyStyle" class="widget" ref="container">
+        <div slot="header">牛群结构</div>
+        <div ref="chart" class="chart"></div>
+    </widget-card>
+</template>
+<script>
+    import {mapState} from 'vuex'
+    import WidgetCard from './WidgetCard'
+    import axios from 'axios'
+
+    export default {
+        mounted() {
+            require.ensure(['@antv/g2'], require => {
+                const G2 = require('@antv/g2');
+                axios.get(this.$widgetBaseUrl + 'api/Values/GetCowsFramework', {
+                    params: {
+                        FrameName: this.farmName
+                    },
+                    withCredentials: false
+                }).then(res => {
+                    if (res.data.rtnCode > 0) {
+                        let sum = res.data.rtnList.map(i => i['牛只数目']).reduce((total, num) => total + num);
+                        this.chartData = res.data.rtnList.map(i => {
+                            return {count: i['牛只数目'], item: i['当前状态'], percent: Number((i['牛只数目'] / sum).toFixed(2))}
+                        });
+                        this.drawChart(G2);
+                    }
+                })
+            });
+        },
+        data() {
+            return {
+                bodyStyle: {
+                    display: 'flex',
+                    alignItems: 'center'
+                },
+                chartData: []
+            }
+        },
+        computed: {
+            ...mapState(['farmName'])
+        },
+        methods: {
+            drawChart(G2) {
+                var chart = new G2.Chart({
+                    container: this.$refs.chart,
+                    forceFit: true,
+                    height: this.$refs.container.$el.offsetHeight - 75,
+                    padding: 'auto',
+                    options: {}
+                });
+                chart.source(this.chartData, {
+                    percent: {
+                        formatter: function formatter(val) {
+                            val = val * 100 + '%';
+                            return val;
+                        }
+                    }
+                });
+                chart.coord('theta', {
+                    radius: 0.7
+                });
+                chart.tooltip({
+                    showTitle: false,
+                    itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
+                });
+                chart.intervalStack().position('percent').color('item').label('percent', {
+                    formatter: function formatter(val, item) {
+                        return item.point.item + ': ' + val;
+                    }
+                }).tooltip('item*percent', function (item, percent) {
+                    percent = percent * 100 + '%';
+                    return {
+                        name: item,
+                        value: percent
+                    };
+                }).style({
+                    lineWidth: 1,
+                    stroke: '#fff'
+                });
+                chart.render();
+            }
+        },
+        components: {
+            WidgetCard
+        }
+    }
+</script>
+<style lang="less" scoped>
+    .chart {
+        width: 100%;
+    }
+</style>

src/main/vue/src/widgets/FarmNum.vue

@@ -0,0 +1,53 @@
+<template>
+    <widget-card :bodyStyle="bodyStyle">
+        <i class="fa-fw fas fa-chart-bar fa-3x" style="color: #40c9c6;"></i>
+        <div class="info">
+            <div class="text">牧场</div>
+            <div class="num">{{num}}</div>
+        </div>
+    </widget-card>
+</template>
+<script>
+    import WidgetCard from './WidgetCard'
+    import axios from 'axios'
+
+    export default {
+        created() {
+            axios.get(this.$widgetBaseUrl + 'api/Values/GetFrameCount', {
+                params: {
+                    FrameName: this.farmName
+                },
+                withCredentials: false
+            }).then(res => {
+                this.num = res.data.rtnCode
+            })
+        },
+        data() {
+            return {
+                bodyStyle: {
+                    display: 'flex',
+                    alignItems: 'center'
+                },
+                num: 0
+            }
+        },
+        components: {
+            WidgetCard
+        }
+    }
+</script>
+<style lang="less" scoped>
+    .info {
+        flex-grow: 1;
+        text-align: right;
+        .text {
+            color: #999;
+            font-size: 16px;
+            margin-bottom: 6px;
+        }
+        .num {
+            font-size: 20px;
+            color: #333;
+        }
+    }
+</style>

src/main/webapp/WEB-INF/html/admin.html

@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>管理后台</title><link rel=icon href=/static/favicon.ico><script src=/static/polyfill.min.js></script><script src=/static/fontawesome-v5.2.0.js></script><link href=/static/css/admin.8202c32b2d3b5e968a6baf131a90329a.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/static/js/manifest.dec47022e0c1e296c880.js></script><script type=text/javascript src=/static/js/vendor.976c0ffa3464c7b2676f.js></script><script type=text/javascript src=/static/js/admin.bde52caff204e02dba30.js></script></body></html>
+<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>管理后台</title><link rel=icon href=/static/favicon.ico><script src=/static/polyfill.min.js></script><script src=/static/fontawesome-v5.2.0.js></script><link href=/static/css/admin.2d4c802a4751c2f0bde6a42cf43a390d.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/static/js/manifest.b41429e29962885c75e6.js></script><script type=text/javascript src=/static/js/vendor.976c0ffa3464c7b2676f.js></script><script type=text/javascript src=/static/js/admin.f47d0062b4c2ab66e1cb.js></script></body></html>

src/main/webapp/static/js/34.307793ad62de865eb1c0.js

@@ -1 +0,0 @@
-webpackJsonp([34],{"du+0":function(t,e){},izdZ:function(t,e,r){"use strict";Object.defineProperty(e,"__esModule",{value:!0});r("NYxO");var i={created:function(){this.getIframeSrc()},data:function(){return{iframeSrc:"/404"}},computed:{height:function(){return window.innerHeight-104+"px"}},methods:{getIframeSrc:function(){this.iframeSrc=this.$route.query.code}},watch:{$route:function(){this.getIframeSrc()}}},n={render:function(){var t=this.$createElement;return(this._self._c||t)("iframe",{staticClass:"iframe",attrs:{src:this.iframeSrc,height:this.height,width:"100%"}})},staticRenderFns:[]};var c=r("VU/8")(i,n,!1,function(t){r("du+0")},"data-v-7fa6d168",null);e.default=c.exports}});

src/main/webapp/static/js/46.38efccf4294986aeae43.js

@@ -0,0 +1 @@
+webpackJsonp([46],{izdZ:function(t,e,r){"use strict";Object.defineProperty(e,"__esModule",{value:!0});r("NYxO");var i={created:function(){this.getIframeSrc()},data:function(){return{iframeSrc:"/404"}},computed:{height:function(){return window.innerHeight-104+"px"}},methods:{getIframeSrc:function(){this.iframeSrc=this.$route.query.code}},watch:{$route:function(){this.getIframeSrc()}}},n={render:function(){var t=this.$createElement;return(this._self._c||t)("iframe",{staticClass:"iframe",attrs:{src:this.iframeSrc,height:this.height,width:"100%"}})},staticRenderFns:[]};var c=r("VU/8")(i,n,!1,function(t){r("k3pO")},"data-v-44466808",null);e.default=c.exports},k3pO:function(t,e){}});

src/main/webapp/static/js/45.951464cd35a5199a4910.js → src/main/webapp/static/js/47.fd51b30d2c43de0c6b31.js

@@ -1 +1 @@
-webpackJsonp([45],{NRkp:function(e,t){},Wh3M:function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r={render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-form",{ref:"form",staticStyle:{"max-width":"500px"},attrs:{model:e.formData,rules:e.rules,"label-width":"80px","label-position":"right",size:"small"}},[a("el-form-item",{attrs:{prop:"dataruleName",label:"权限名称"}},[a("el-input",{model:{value:e.formData.dataruleName,callback:function(t){e.$set(e.formData,"dataruleName",t)},expression:"formData.dataruleName"}})],1),e._v(" "),a("el-form-item",{attrs:{prop:"permission",label:"权限标识"}},[a("el-input",{model:{value:e.formData.permission,callback:function(t){e.$set(e.formData,"permission",t)},expression:"formData.permission"}})],1),e._v(" "),a("el-form-item",[a("el-button",{attrs:{loading:e.$store.state.fetchingData,type:"primary"},on:{click:e.onSave}},[e._v("保存")]),e._v(" "),a("el-button",{on:{click:function(t){e.$router.go(-1)}}},[e._v("取消")])],1)],1)],1)},staticRenderFns:[]};var s=a("VU/8")({created:function(){var e=this;this.$route.query.id&&this.$http.get({url:"/sysDatarule/getOne",data:{id:this.$route.query.id}}).then(function(t){t.success&&(e.formData=t.data)})},data:function(){return{saving:!1,formData:{},rules:{dataruleName:[{required:!0,message:"请填写权限名称",trigger:"blur"}],permission:[{required:!0,message:"请填写权限标识",trigger:"blur"}]},menus:[]}},methods:{onSave:function(){var e=this;this.$refs.form.validate(function(t){if(!t)return!1;e.submit()})},submit:function(){var e=this;this.$http.post({url:this.formData.id?"/sysDatarule/update":"/sysDatarule/save",data:this.formData}).then(function(t){t.success?(e.$message.success("成功"),e.$router.go(-1)):e.$message.warning("失败")})}}},r,!1,function(e){a("NRkp")},"data-v-3d1f3150",null);t.default=s.exports}});
+webpackJsonp([47],{NRkp:function(e,t){},Wh3M:function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r={render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("el-form",{ref:"form",staticStyle:{"max-width":"500px"},attrs:{model:e.formData,rules:e.rules,"label-width":"80px","label-position":"right",size:"small"}},[a("el-form-item",{attrs:{prop:"dataruleName",label:"权限名称"}},[a("el-input",{model:{value:e.formData.dataruleName,callback:function(t){e.$set(e.formData,"dataruleName",t)},expression:"formData.dataruleName"}})],1),e._v(" "),a("el-form-item",{attrs:{prop:"permission",label:"权限标识"}},[a("el-input",{model:{value:e.formData.permission,callback:function(t){e.$set(e.formData,"permission",t)},expression:"formData.permission"}})],1),e._v(" "),a("el-form-item",[a("el-button",{attrs:{loading:e.$store.state.fetchingData,type:"primary"},on:{click:e.onSave}},[e._v("保存")]),e._v(" "),a("el-button",{on:{click:function(t){e.$router.go(-1)}}},[e._v("取消")])],1)],1)],1)},staticRenderFns:[]};var s=a("VU/8")({created:function(){var e=this;this.$route.query.id&&this.$http.get({url:"/sysDatarule/getOne",data:{id:this.$route.query.id}}).then(function(t){t.success&&(e.formData=t.data)})},data:function(){return{saving:!1,formData:{},rules:{dataruleName:[{required:!0,message:"请填写权限名称",trigger:"blur"}],permission:[{required:!0,message:"请填写权限标识",trigger:"blur"}]},menus:[]}},methods:{onSave:function(){var e=this;this.$refs.form.validate(function(t){if(!t)return!1;e.submit()})},submit:function(){var e=this;this.$http.post({url:this.formData.id?"/sysDatarule/update":"/sysDatarule/save",data:this.formData}).then(function(t){t.success?(e.$message.success("成功"),e.$router.go(-1)):e.$message.warning("失败")})}}},r,!1,function(e){a("NRkp")},"data-v-3d1f3150",null);t.default=s.exports}});

src/main/webapp/static/js/62.8238864dbcc76d8e253f.js

@@ -0,0 +1 @@
+webpackJsonp([62],{"/Lbq":function(t,e,a){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var s=a("8uFQ"),i=a("mtWM"),n=a.n(i),r={created:function(){var t=this;n.a.get(this.$widgetBaseUrl+"api/Values/GetFrameCount",{params:{FrameName:this.farmName},withCredentials:!1}).then(function(e){t.num=e.data.rtnCode})},data:function(){return{bodyStyle:{display:"flex",alignItems:"center"},num:0}},components:{WidgetCard:s.a}},d={render:function(){var t=this.$createElement,e=this._self._c||t;return e("widget-card",{attrs:{bodyStyle:this.bodyStyle}},[e("i",{staticClass:"fa-fw fas fa-chart-bar fa-3x",staticStyle:{color:"#40c9c6"}}),this._v(" "),e("div",{staticClass:"info"},[e("div",{staticClass:"text"},[this._v("牧场")]),this._v(" "),e("div",{staticClass:"num"},[this._v(this._s(this.num))])])])},staticRenderFns:[]};var c=a("VU/8")(r,d,!1,function(t){a("sdzW")},"data-v-4c80640b",null);e.default=c.exports},"8uFQ":function(t,e,a){"use strict";var s={render:function(){var t=this.$createElement,e=this._self._c||t;return e("el-card",{staticClass:"dashboard-widget-card",attrs:{shadow:"hover","body-style":[this.mBodyStyle,this.bodyStyle]}},[e("template",{slot:"header"},[this._t("header")],2),this._v(" "),[this._t("default")]],2)},staticRenderFns:[]};var i=a("VU/8")({props:["bodyStyle"],data:function(){return{mBodyStyle:{flexGrow:1}}}},s,!1,function(t){a("RgDB")},"data-v-17fa1e92",null);e.a=i.exports},RgDB:function(t,e){},sdzW:function(t,e){}});

src/main/webapp/static/js/63.7d4b0677a5309cb0f939.js

@@ -0,0 +1 @@
+webpackJsonp([63],{"2hbB":function(t,e){},"8uFQ":function(t,e,a){"use strict";var r={render:function(){var t=this.$createElement,e=this._self._c||t;return e("el-card",{staticClass:"dashboard-widget-card",attrs:{shadow:"hover","body-style":[this.mBodyStyle,this.bodyStyle]}},[e("template",{slot:"header"},[this._t("header")],2),this._v(" "),[this._t("default")]],2)},staticRenderFns:[]};var n=a("VU/8")({props:["bodyStyle"],data:function(){return{mBodyStyle:{flexGrow:1}}}},r,!1,function(t){a("RgDB")},"data-v-17fa1e92",null);e.a=n.exports},RgDB:function(t,e){},xYo2:function(t,e,a){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=a("Dd8w"),n=a.n(r),s=a("8uFQ"),i=a("NYxO"),o=a("mtWM"),d=a.n(o),c={mounted:function(){var t=this;a.e(58).then(function(e){var r=a("b7ct");d.a.get(t.$widgetBaseUrl+"api/Values/GetCowsAvgMrDays",{withCredentials:!1}).then(function(e){e.data.rtnCode>0&&(t.chartData=e.data.rtnList.map(function(t){return{name:t["当前牧场"],value:t["泌乳天数"]}}),t.drawChart(r))})}.bind(null,a)).catch(a.oe)},data:function(){return{myChart:null,bodyStyle:{display:"flex",alignItems:"center"},chartData:[]}},computed:n()({},Object(i.b)(["farmName"])),methods:{drawChart:function(t){var e=new t.Chart({container:this.$refs.chart,forceFit:!0,height:this.$refs.container.$el.offsetHeight-75,padding:"auto"});e.source(this.chartData),e.scale("sales",{tickInterval:20}),e.interval().position("name*value"),e.render()}},components:{WidgetCard:s.a}},l={render:function(){var t=this.$createElement,e=this._self._c||t;return e("widget-card",{ref:"container",attrs:{bodyStyle:this.bodyStyle}},[e("div",{attrs:{slot:"header"},slot:"header"},[this._v("平均泌乳天数")]),this._v(" "),e("div",{ref:"chart",staticClass:"chart"})])},staticRenderFns:[]};var h=a("VU/8")(c,l,!1,function(t){a("2hbB")},"data-v-4a488c61",null);e.default=h.exports}});