20230710----重返学习-物模型增删改查-欢迎页图表展示-图表展示

day-109-one-hundred-and-nine-20230710-物模型增删改查-欢迎页图表展示-图表展示

物模型增删改查

修改一个表单列表项的方式

1. 如果是一个弹框，在同一个组件中，可以给弹框中存储一个公共状态对象，之后通过那个对象中的数据来修改。

2. 如果是另一个路由页面，那么将使用如问号传参或params传参或路径传参这类路由传参将当前项的id传递到另一个路由地址中，而另一个路由地址再通过id查询到当前表单的信息。

绑定表单列表项数据

form表单的初始数据

• Form表单
  1. Form第一次渲染的时候，表单中的数据是啥，Form认为这就是初始数据
  2. 基于 resetFields 重置数据的时候，会重置为Form认为的初始数据
  • 但是这个初始值，是不一定准确的;

新增修改数据

新增修改数据一条数据

删除多条数据

表格下载

表格下载的步骤

1. 先问chatGTP或网上找，如’主流的前端excel表格下载插件是？’

欢迎页图表展示

扒接口

百度地图

设备统计-骨架屏及数据绑定

新闻页-弹窗提示信息

图表展示

• Echarts的核心是canvas。
• canvas：
  1. 准备一个盒子，把这个盒子作为我么的画布 「需要盒子有固定的宽高」
  2. 准备画笔，去绘制图形
  3. 保存
  4. …
  • 绘制出来的是一张图片！

Echat的安装

Echat的配置修改

Echat的封装

绘制的处理

修改后代码

• fang/f20230708/ManageSystem/src/views/iot/Template.vue

• fang/f20230708/ManageSystem/src/components/DrawPieImage.vue

• fang/f20230708/ManageSystem/src/api/index.js

import http from "./http";

import iot from "./iot";

// 获取验证码
const queryCaptchaImage = () => http.get("/captchaImage");

// 用户登录校验
const checkUserLogin = (body) => http.post("/login", body);

// 获取登录者信息「含权限信息」
const queryUserProfile = () => http.get("/getInfo");

// 获取地图标注数据
const queryDeviceAll = () => http.get("/iot/device/all");

// 获取新闻列表的数据
/* /system/notice/list?pageNum=1&pageSize=6 
新闻列表 */
const queryNoticeList = (pageNum = 1, pageSize = 6) => {
  return http.get(`/system/notice/list`, {
    params: {
      pageNum,
      pageSize,
    },
  });
};

// 获取设备统计的数据
/* iot/device/statistic
设备统计
 */
const queryDeviceStatistic = () => http.get(`/iot/device/statistic`);

// 获取饼状图需要的数据
/* 
/monitor/server
饼状图需要的数据 */
const queryMonitorServer = () => http.get(`/monitor/server`);

// 获取Mqtt的状态数据
/* 
/bashBoard/stats
Mqtt的状态数据*/
const queryBashBoardStats = () => http.get(`/bashBoard/stats`);

/* 暴露API */
const API = {
  iot, //this.$API.ito.xxxx来调用。
  queryCaptchaImage,
  checkUserLogin,
  queryUserProfile,

  queryDeviceAll,
  queryNoticeList,
  queryDeviceStatistic,
  queryMonitorServer,
  queryBashBoardStats,
};
export default API;

• fang/f20230708/ManageSystem/src/views/index/Welcome.vue

• fang/f20230708/ManageSystem/src/global.js

import Vue from "vue"
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import API from "@/api"
import ButtonAgain from '@/components/ButtonAgain.vue'
import DrawPieImage from '@/components/DrawPieImage'

Vue.use(ElementUI)
Vue.config.productionTip = false
Vue.prototype.$API = API

/* 全局混入的方法 */
Vue.mixin({
    methods: {
        mixinPrefixAdd(url, prefix = 'https://iot.fastbee.cn/prod-api') {
            let reg = /^http(s)?:\/\//
            return reg.test(url) ? url : prefix + url
        }
    }
})

/* 注册全局组件 */
Vue.component(ButtonAgain.name, ButtonAgain)
Vue.component(DrawPieImage.name, DrawPieImage)

• fang/f20230708/ManageSystem/src/views/index/particle/Map.vue

• fang/f20230708/ManageSystem/src/views/index/particle/Device.vue

• fang/f20230708/ManageSystem/src/views/index/particle/News.vue

进阶参考