Simple indoor lighting control simulation system (vue+element+echarts pure front-end implementation)

written in front

This project is a very simple analog lighting control system, using vue+element+echartstwo sets of webpages designed by my classmate and asked me to make (ugly has nothing to do with me [狗头]). This web page is a 纯前端page, even without axios, but the data in the page is not really hard-coded in the code, but is createdspecified in the page 假数据, simulating the assignment of the data sent back by the axios request.
The code is very simple, and the total development time is less than 5 hours. Since I haven't written vue for more than half a year, I made a note for myself.

Screenshot of the first set of interface

source address

https://gitee.com/wang-yongyan188/lcms.git pay attention to masterthe branch

second set

source address

https://gitee.com/wang-yongyan188/lcms.git pay attention to demo2the branch

notes

Project environment construction

1. Create a vue projectvue create 项目名称

   • It is better to choose the custom method when creating.
     
     If it has been selected, if you want to close it, you can add the following piece of code under the project vue.config.jsfile

     module.exports = {
             
             
       lintOnSave: false
     }
     

   • Delete useless components和viewpages and App.vueuseless components and routing configurations

     • Routing configuration index.js

       import Vue from 'vue'
       import VueRouter from 'vue-router'
       
       Vue.use(VueRouter)
       
       const routes = [
        
       ]
       const router = new VueRouter({
         mode: 'history',
         base: process.env.BASE_URL,
         routes
       })
       
       export default router
       

       • app.vue

       	<template>
       		 <div id="app">
       		   <router-view/>
       		 </div>
       	</template>
       

   • The imported page contains inner margins by default. It is inconvenient to specify the global size in the later stage. Introduce the style in App.vue to remove it

       ```java
       *{
           margin: 0;
           padding: 0;
           box-sizing: border-box;
       }
       ```
     

   2. 组件库 Element-ui Local installation:npm i element-ui -S

      • Introduce the following code in main.js

        import ElementUI from 'element-ui';
        import 'element-ui/lib/theme-chalk/index.css';
        Vue.use(ElementUI, {
                  
                   size: "small" }); //指定全局el组件大小
        Vue.use(ElementUI) // 也可不指定
        

      • Use a label test on the page at will, such as in App.vue <el-button>按钮</el-button>, and then access the test through a browser to succeed

   3. 图表库 echarts Local installation:npm install echarts -S

      • <script>Referenced in the pages that need to be usedimport * as echarts from 'echarts'
      • Then create a box on the page, set the id to specify the position of the chart display, note: the box must specify the size! , otherwise it will not be displayed
      • Visit the official examples and pick one to display https://echarts.apache.org/examples/zh/index.html
      • mountedTo render charts in vue . Note mountedthat createdit is better to encapsulate the rendered chart into a function, and mountedcall the function
        in Example:

   	mounted(){
         
         
         let option = {
         
         
               xAxis: {
         
         
                   type: 'category',
                   boundaryGap: false,
                   data: []
               },
                tooltip: {
         
         
                trigger: 'axis'
               },
               legend: {
         
         
                   data: [ '预定值']
               },
               yAxis: {
         
         
                   type: 'value',
                   scale : true,
                   max : 1600,
                   min : 700,
                   splitNumber : 10,
               },
               series: [
                   {
         
         
                   name: '实际值',
                   data: [],
                   type: 'line',
                   areaStyle: {
         
         }},
                   {
         
         
                   name: '预定值',
                   type: 'line',
                   stack: 'Total',
                   data: []
                   },
               ]
           };
           let chartDom = document.getElementById('chart');
           let myChart = echarts.init(chartDom);
           option.xAxis.data=this.x;
           option.series[0].data=this.y;
           option.series[1].data=this.standard;
           myChart.setOption(option);
     },
   

   icon

Page Layout

App.vueIt is the location displayed for all vue pages, and App.vue is mounted in index.htmlit, and main.js is equivalent to index.js

the comparison between vue pages and react

Functional skeleton

That is:

create a vue page dedicated to the skeleton, the entire page is displayed as a first-level route, and then the second-level route page is played in the skeleton page.
Compared with Antd, Element is much simpler in layout

log in page

The most complicated part of login is the css style, such as the center of the login box, the center of the title, the center of the button, the center of the input box, the login background, etc.
**The login page must be full screen** so the big box mustheight: 100vh;width:100wh;

• background
  • Use a gradient background background-image: linear-gradient(to bottom right, #FC466B, #3F5EFB);overflow: hidden;
  • use image backgroundbackground-image: url('../assets/backImg.jpg') ; overflow: hidden;
• login box
  • Centering: Adopted 子绝父相positioning, join in the big box and position: relative;join in the login box position: absolute;and then move to make it centeredleft: 50%;top: 50%; transform: translate(-50%, -70%);
  • Beautification: set the transparency to make the effect straight upwidth:500px; height: 300px; opacity:0.9;

dynamic chart

Dynamic charts are similar to directly changing the chart by clicking a button. The overall idea is to encapsulate the code for rendering the chart, and then mountedcall it for the first time. Because the change of the chart must be due to the change of a certain value, this value is watchmonitored by vue, that is, after the data changes, the function of rendering the chart can be called after the monitoring.

deploy

After the front-end project is developed, how to make it a mobile runtime package? Idea: After packaging the project, use the operating environment to wrap it. The code + operating environment can be moved between any computers as a whole package, even if some do not have a front-end environment, because the packaging box is the environment

• Use a package npm run buildpackaged as a single page dist, then download a nginx as a web server

• Find the nginx configuration file /conf/nginx.conf, modify its port number and project storage location
  

• Then enter the command line in the root directory of nginx start nginx.exe, and you can access it by accessing the configuration port in nginx.
  Why can nginx change the original project port of the project? Because the project itself is a code, it cannot run independently. In the development environment, Node is used as the server, and the port of Node is used. Move the code out and put it into nginx, which uses nginx as the server, so it should also be used port

other

• Force it to use element's grid layout in one row

<el-row :gutter="24"> 
	<el-col :span="12"><div></div></el-col>
	 <el-col :span="12"><div></div></el-col>
</el-row>

• function to get the current time

 getCurrentTime() {
    
    
        let yy = new Date().getFullYear();
        let mm = new Date().getMonth()+1;
        let dd = new Date().getDate();
        let hh = new Date().getHours();
        let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
        let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
        let nowTime= yy+'/'+mm+'/'+dd+' '+hh+':'+mf+':'+ss;
        return nowTime;
        },

• Some properties of the Element tag need to use :bindings, for example:disabled='true'
• Routing configuration example:

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const routes = [
  {
    
    
    path: '/login',
    name: 'myLogin',
    component: () => import('../views/myLogin.vue')
  },{
    
    
    path: '/',
    name: 'myHome',
    component: () => import('../views/home/home.vue'),
    children: [
      {
    
    
        path: '/homePage',
        name: 'homePage',
        component: () => import('../views/home/homePage.vue')
      },
      {
    
    
        path: '/light',
        name: 'lightController',
        component: () => import('../views/home/lightController.vue')
      }
    ]
  }
]

const router = new VueRouter({
    
    
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

Routing can be specified childrento specify a second-level route, childrenand can also be specified childrento form a third-level route...