首頁 探索 說明
註冊 登入
linan
/
huimv.cloud.client
1
0
複刻 0
檔案 問題管理 0 合併請求 0 Wiki
瀏覽代碼

增加了首页的静态页面 和 Echarts

linan 5 年之前
父節點
c890a445bc
當前提交
1cc7bef3cb
共有 13 個文件被更改，包括 352 次插入 和 12 次删除
統一視圖 顯示文件統計
  1. 1 0
      package.json
  2. 二進制
      public/favicon.ico
  3. 二進制
      public/favicon副.ico
  4. 1 1
      public/index.html
  5. 12 0
      src/main.js
  6. 6 0
      src/router/routes.js
  7. 4 2
      src/views/Home/Home.vue
  8. 13 8
      src/views/Home/mencCofig.js
  9. 0 1
      src/views/deviceManagement/CameraManagement.vue
  10. 39 0
      src/views/index/Index.vue
  11. 45 0
      src/views/index/charts/chart.vue
  12. 116 0
      src/views/index/charts/chart1.vue
  13. 115 0
      src/views/index/charts/chart2.vue

+ 1 - 0
package.json
查看文件 

@@ -10,6 +10,7 @@
 
   "dependencies": {
 
   "dependencies": {
 
     "cnpm": "^6.1.1",
 
     "cnpm": "^6.1.1",
 
     "core-js": "^3.3.2",
 
     "core-js": "^3.3.2",
 
+    "echarts": "^4.8.0",
 
     "element-ui": "^2.13.2",
 
     "element-ui": "^2.13.2",
 
     "vue": "^2.6.10",
 
     "vue": "^2.6.10",
 
     "vue-module-loader": "^1.0.3",
 
     "vue-module-loader": "^1.0.3",

二進制
public/favicon.ico
查看文件


二進制
public/favicon副.ico
查看文件


+ 1 - 1
public/index.html
查看文件 

@@ -4,7 +4,7 @@
 
     <meta charset="utf-8">
 
     <meta charset="utf-8">
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 
+    <!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico"> -->
 
     <title>慧牧科技——云服务平台</title>
 
     <title>慧牧科技——云服务平台</title>
 
   </head>
 
   </head>
 
   <body>
 
   <body>

+ 12 - 0
src/main.js
查看文件 

@@ -9,6 +9,18 @@ import store from './store'
 
 import vueModuleLoader from 'vue-module-loader'
 
 import vueModuleLoader from 'vue-module-loader'
 
 import localModule from './module'
 
 import localModule from './module'
 
 
 
+/* 按需导入Echarts */
 
+import echarts from 'echarts/lib/echarts'
 
+ // 引入折线图/柱状图等组件
 
+import 'echarts/lib/chart/line'
 
+import 'echarts/lib/chart/bar'
 
+import 'echarts/lib/component/title'
 
+import 'echarts/lib/component/toolbox'
 
+import 'echarts/lib/component/markPoint' // 最值
 
+import 'echarts/lib/component/markLine' // 平均值
 
+import 'echarts/lib/component/legendScroll'
 
+Vue.prototype.$echarts = echarts
 
+
 
 
 
 Vue.use(vueModuleLoader, { store }).use(ElementUI);
 
 Vue.use(vueModuleLoader, { store }).use(ElementUI);
 
 /* 
 /*

+ 6 - 0
src/router/routes.js
查看文件 

@@ -1,4 +1,5 @@
 
 import Home from '../views/Home/Home.vue'
 
 import Home from '../views/Home/Home.vue'
 
+import Index from '../views/index/Index.vue'
 
 /* 设备管理 */
 
 /* 设备管理 */
 
 import DeviceType from '../views/deviceManagement/DeviceType.vue'
 
 import DeviceType from '../views/deviceManagement/DeviceType.vue'
 
 import DeviceInfo from '../views/deviceManagement/DeviceInfo.vue'
 
 import DeviceInfo from '../views/deviceManagement/DeviceInfo.vue'
 
@@ -37,6 +38,11 @@ export default [
 
 		path: '/home',
 
 		path: '/home',
 
 		component: Home,
 
 		component: Home,
 
 		children: [
 
 		children: [
 
+			{
 
+				path: '/index',
 
+				name: 'index',
 
+				component: Index
 
+			},
 
 			// 设备管理
 
 			// 设备管理
 
 			{
 
 			{
 
 				path: '/deviceType',
 
 				path: '/deviceType',

+ 4 - 2
src/views/Home/Home.vue
查看文件 

@@ -56,7 +56,7 @@
 
                             >
 
                             >
 
                                 <template slot="title">
 
                                 <template slot="title">
 
                                     <i :class="item.iconClassName"></i>
 
                                     <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> -->
 
                                     <!-- <span slot="title">{{ item.oneMenuName }}</span> -->
 
                                 </template>
 
                                 </template>
 
                                 <el-menu-item
 
                                 <el-menu-item
 
@@ -75,7 +75,7 @@
 
                                 @click="onClickMenu(item)"
 
                                 @click="onClickMenu(item)"
 
                             >
 
                             >
 
                                 <i :class="item.iconClassName"></i>
 
                                 <i :class="item.iconClassName"></i>
 
-                                <span slot="title">{{ !menuCollapse? item.oneMenuName : '' }}</span>
 
+                                <span slot="title">{{ !menuCollapse? item.optionName : '' }}</span>
 
                             </el-menu-item>
 
                             </el-menu-item>
 
                         </div>
 
                         </div>
 
                     </el-menu>
 
                     </el-menu>
 
@@ -141,6 +141,7 @@ export default {
 
         },
 
         },
 
         // 点击菜单项
 
         // 点击菜单项
 
         onClickMenu(item) {
 
         onClickMenu(item) {
 
+            console.log(item)
 
             let _this = this;
 
             let _this = this;
 
             // 如果要跳转的路由和当前路由一致就 return
 
             // 如果要跳转的路由和当前路由一致就 return
 
             if (this.$router.history.current.name == item.routerName) return;
 
             if (this.$router.history.current.name == item.routerName) return;
 
@@ -254,6 +255,7 @@ export default {
 
             .col1 {
 
             .col1 {
 
                 margin-right: 5px;
 
                 margin-right: 5px;
 
                 border-radius: 5px;
 
                 border-radius: 5px;
 
+                background-color: #fff;
 
             }
 
             }
 
             .col2 {
 
             .col2 {
 
                 flex: 1;
 
                 flex: 1;

+ 13 - 8
src/views/Home/mencCofig.js
查看文件 

@@ -1,8 +1,13 @@
 
-
 
 export const menuData = [
 
 export const menuData = [
 
-    // 有子菜单 字菜单不分组的
 
     {
 
     {
 
-        oneMenuName: "系统配置",
 
+        optionName: "首页",
 
+        iconClassName: "el-icon-document",
 
+        routerName: "index",
 
+        index: '-1',
 
+        disabled: false
 
+    },
 
+    {
 
+        optionName: "系统配置",
 
         iconClassName: "el-icon-setting",
 
         iconClassName: "el-icon-setting",
 
         index: '0',
 
         index: '0',
 
         disabled: false, // 是否禁用
 
         disabled: false, // 是否禁用
 
@@ -15,7 +20,7 @@ export const menuData = [
 
         ]
 
         ]
 
     },
 
     },
 
     {
 
     {
 
-        oneMenuName: "设备管理",
 
+        optionName: "设备管理",
 
         iconClassName: "el-icon-monitor",
 
         iconClassName: "el-icon-monitor",
 
         index: '1',
 
         index: '1',
 
         disabled: false, // 是否禁用
 
         disabled: false, // 是否禁用
 
@@ -38,7 +43,7 @@ export const menuData = [
 
         ]
 
         ]
 
     },
 
     },
 
     {
 
     {
 
-        oneMenuName: "区域管理",
 
+        optionName: "区域管理",
 
         iconClassName: "el-icon-s-flag",
 
         iconClassName: "el-icon-s-flag",
 
         index: '2',
 
         index: '2',
 
         disabled: false,
 
         disabled: false,
 
@@ -52,7 +57,7 @@ export const menuData = [
 
     },
 
     },
 
     // 无子菜单的
 
     // 无子菜单的
 
     {
 
     {
 
-        oneMenuName: "消息管理",
 
+        optionName: "消息管理",
 
         iconClassName: "el-icon-message",
 
         iconClassName: "el-icon-message",
 
         index: '3',
 
         index: '3',
 
         disabled: false,
 
         disabled: false,
 
@@ -81,7 +86,7 @@ export const menuData = [
 
         ]
 
         ]
 
     },
 
     },
 
     {
 
     {
 
-        oneMenuName: "树目录结构",
 
+        optionName: "树目录结构",
 
         iconClassName: "el-icon-coordinate",
 
         iconClassName: "el-icon-coordinate",
 
         index: '4',
 
         index: '4',
 
         disabled: false,
 
         disabled: false,
 
@@ -94,7 +99,7 @@ export const menuData = [
 
         ]
 
         ]
 
     },
 
     },
 
     {
 
     {
 
-        oneMenuName: "开发用模板",
 
+        optionName: "开发用模板",
 
         iconClassName: "el-icon-menu",
 
         iconClassName: "el-icon-menu",
 
         index: '100',
 
         index: '100',
 
         disabled: false, // 是否禁用
 
         disabled: false, // 是否禁用

+ 0 - 1
src/views/deviceManagement/CameraManagement.vue
查看文件 

@@ -202,7 +202,6 @@ export default {
 
                 method: "POST",
 
                 method: "POST",
 
                 data: { code },
 
                 data: { code },
 
                 success: res => {
 
                 success: res => {
 
-                    debugger;
 
                     this.id = res.id;
 
                     this.id = res.id;
 
                     let categoryId = res.id;
 
                     let categoryId = res.id;
 
                     let data = {
 
                     let data = {

+ 39 - 0
src/views/index/Index.vue
查看文件 

@@ -0,0 +1,39 @@
 
+<template>
 
+    <div class="Index">
 
+        <chart-b></chart-b>
 
+    </div>
 
+</template>
 
+
 
+<script>
 
+import { mapActions } from "vuex";
 
+import chart_b from "./charts/chart2";
 
+
 
+export default {
 
+    name: "Index",
 
+    components: {
 
+        "chart-b": chart_b
 
+    },
 
+    data() {
 
+        return {};
 
+    },
 
+    created() {},
 
+    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>

+ 45 - 0
src/views/index/charts/chart.vue
查看文件 

@@ -0,0 +1,45 @@
 
+<template>
 
+    <div class="hello">
 
+        <chart ref="chart1" :options="orgOptions" :auto-resize="true" class="chart"></chart>
 
+    </div>
 
+</template>
 
+
 
+<script>
 
+export default {
 
+    name: "HelloWorld",
 
+    data() {
 
+        return {
 
+            orgOptions: {}
 
+        };
 
+    },
 
+    mounted() {
 
+        this.orgOptions = {
 
+            xAxis: {
 
+                type: "category",
 
+                data: ["七分钟前", "六分钟前", "五分钟前", "四分钟前", "三分钟前", "两分钟前", "单前"]
 
+            },
 
+            yAxis: {
 
+                type: "value",
 
+                axisLabel: {
 
+                    formatter: "{value} °C"
 
+                },
 
+                scale: true
 
+            },
 
+            series: [
 
+                {
 
+                    data: [32.5,32.6,32.4,32.5,32.4,32.6,32.4],
 
+                    type: "line"
 
+                }
 
+            ]
 
+        };
 
+    }
 
+};
 
+</script>
 
+
 
+<style lang="scss" scoped>
 
+.hello{
 
+    .chart{
 
+        width: 100%;
 
+    }
 
+}
 
+</style>

+ 116 - 0
src/views/index/charts/chart1.vue
查看文件 

@@ -0,0 +1,116 @@
 
+<template>
 
+    <div class="hello">
 
+        <div id="chart_1" style="width: 100%;height:400px;"></div>
 
+    </div>
 
+</template>
 
+
 
+<script>
 
+export default {
 
+    name: "HelloWorld",
 
+    props: [
 
+        'tagId'
 
+    ],
 
+    data() {
 
+        return {
 
+            orgOptions: {}
 
+        };
 
+    },
 
+    mounted() {
 
+        this.drawChart();
 
+    },
 
+    methods: {
 
+        drawChart() {
 
+            // 基于准备好的dom，初始化echarts实例
 
+            let myChart = this.$echarts.init(
 
+                document.getElementById("chart_1")
 
+            );
 
+            // 指定图表的配置项和数据
 
+            let option = {
 
+                title: {
 
+                    text: "耳根温度  36.4℃",
 
+                    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>
 
+.hello {
 
+    .chart {
 
+        width: 100%;
 
+    }
 
+}
 
+</style>

+ 115 - 0
src/views/index/charts/chart2.vue
查看文件 

@@ -0,0 +1,115 @@
 
+<template>
 
+    <div class="chart2">
 
+        <div id="chart2" style="width: 100%;height:400px;"></div>
 
+    </div>
 
+</template>
 
+
 
+<script>
 
+export default {
 
+    name: "chart2",
 
+    props: {
 
+    },
 
+    data() {
 
+        return {
 
+            orgOptions: {}
 
+        };
 
+    },
 
+    created() {
 
+        
+    },
 
+    mounted() {
 
+        
+        this.drawChart();
 
+    },
 
+    methods: {
 
+        drawChart() {
 
+            // 基于准备好的dom，初始化echarts实例
 
+            let myChart = this.$echarts.init(
 
+                document.getElementById('chart2')
 
+            );
 
+            // 指定图表的配置项和数据
 
+            let option = {
 
+                title: {
 
+                    text: "温度  36.4℃",
 
+                    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>