weixin_43312391的博客

实现目标：采用for循环取数组中的数据，结合flex布局生成多个盒子，减少代码冗余。实现效果：实现方法：1.template中：这里涉及到图片的添加，直接采用img标签，以及背景图片的添加，是采用:style="`background: url(${item.img})`"的形式。<div class="box"> <div class="box-content" v-for="(item, index) in statistic" :key="index" :

实现目标：点击显示按钮，调用后端传递来的接口接收wkt数据，在vscode中将wkt数据转化为geoJSON格式，并渲染至地球上。点击关闭按钮，渲染效果移除。实现方法：一.调用后端接口1.后端Swagger中：2.api的js文件中：export function getAllData() { return request({ url: '/xxxx/xxxx/all', method: 'get', });}3.vue文件中：

实现目标：1.新增文件：点击新增按钮，出现弹窗，点击上传文件，选择文件后，点击确定按钮，实现文件的上传，且限制文件格式只能为word和pdf格式。2.编辑文件：点击重新上传按钮，出现弹窗，点击上传文件，选择文件后，点击确定按钮，实现文件的上传，且限制文件格式只能为word和pdf格式。实现效果：1.新增文件：2.编辑文件：实现方法：1.后端的swagger中：2.api的js文件中：上传文件：（新增接口必须与该接口结合使用）exp...

实现目标：点击下载按钮，浏览器下方出现下载的文件，word文件将下载为word文件格式，不会进行pdf的转换。实现效果：实现方法：1.后端swagger中：2.api的js文件中：export function planDownloadById(param) { return request({ url: '/xxxx/xxxx/download', method: 'post', data: param, .

实现目标：点击预览按钮，浏览器出现新的窗口，展示为附件的pdf的格式呈现，此功能与后端进行接口对接。实现效果：实现方法：（与后端对接口实现，后端将word格式转化为pdf格式）1.后端的swagger中2.api的js文件中export function previewFileById(param) { return request({ url: '/xxxx/xxxx/preview', method: 'post', .

实现目标：点击新增和编辑按钮时出现同一个弹窗，但展示信息不同，分别对接新增和编辑接口。直观效果：前端页面中的新增和编辑按钮点击新增按钮出现的弹框：点击编辑出现的弹框：新增和编辑均是通过确定按钮来对接接口。后端swagger：api下的js文件：// 新增export function insertMaterial(param) { return request({ url: '/xxxx/xxxxx/insert', .

实现目标：两个vue页面没有任何关联，其中vue1页面要调用vue2中的方法。实现代码：中间存储实体：在utils下新建dataCenterBus.js文件import Vue from 'vue';export default new Vue();vue1页面：（调用vue2页面中的方法）首先引入中间实体文件import dataCenterBus from '@/utils/dataCenterBus';在需要调用所需方法处采用$emit引用引号中为两个vue文

实现效果：实现光照效果的代码：全局定义inter，便于后续的使用。let inter = null此时的光照效果为当前时间的光照效果。viewer.scene.globe.enableLighting = true viewer.shadows = true viewer.terrainShadows = Cesium.ShadowMode.RECEIVE_ONLY //viewer.shadowMap.softShadows = true vi..

设置Cookie进行统一拦截，使全局都携带Cookie，便于系统中权限的控制展示。在系统的main.js文件中设置：其中this.setRequestHeader的Authorization为cookie中存储的token。在cookie中存储token的具体方法详见：/*全局设置ajax请求拦截*/hookAJAX()function hookAJAX () { XMLHttpRequest.prototype.nativeOpen = XMLHttpRequest.prototy

在系统登录后将用户登录的token、用户名信息分别存储至Cookie和localStorage中，便于系统后续不同用户权限的控制。一、存储在Cookie中的文件封装在src的utils中新增auth.js文件，文件代码为：import Cookies from 'js-cookie';const TokenKey = 'Authorization';export function getToken () { return Cookies.get(TokenKey);}expor

实现效果：点击按钮出现盒子提示‘盒子出现’，再次点击盒子消失提示‘盒子消失’。按钮的样式：<el-button type="text" @click="btnShow">点击这个按钮</el-button> <div v-show="open">这是盒子内容</div>data中的默认值：open：false点击方法：btnShow() { this.open = !this.open },这样就实现了点击按钮展

实现目标：在生成el-tree时，默认勾选其中某几个选项；或在进行某个选项的选中时，同时勾选上另一个选项。实现效果：在生成树结构时，默认勾选其中的两个选项。在勾选其中一个选项时，另一个选项也被同时勾选。实现方法：<el-tree :data="data" show-checkbox default-expand-all node-key="id" ref="tree" highlight-current :props="defaultProps"&

实现目标：与后端对接接口，后端对返回的el-tree数据的叶子节点进行了标识，即leaf为true时代表为叶子结点，leaf为false时为非叶子节点。现要实现将所有的叶子节点前加icon图标。实现效果：实现方法：vue文件中： <el-tree :data="dataTree" node-key="id" default-expand-all > <span slot-scope="{ node, data }"> <

实现目标：获取监控树，其中监控树只有叶子节点才有多选框，点击多选框在地球上添加多个图标，左击不同的图标出现对应的实时监控画面。监控树的数据以及实时监控的画面都是通过与后端对接接口获取的。添加一个图标上图并点击出现弹窗可参考：Cesium添加图标后点击该图标出现弹窗的具体实现方法_刚刚好ā的博客-CSDN博客_cesium同时添加多个图标的重点是：获取到数组后，将数组传递给cesium添加图标的方法，并对其进行处理，获取对应的经纬度，进而上图。vue文件的template中：监控树：&l

实现效果：template中：引用element的el-tree，其中show-checkbox为显示勾选框，选择true，默认所有节点均有勾选框。<el-tree class="tree" :check-strictly="true" :data="datatree" :render-content="eventRender" :show-checkbox="true" /.

1.利用elementUI组件里的Tooltip 文字提示实现原始页面：实现效果：当鼠标悬浮在上左按钮时，出现提示信息实现代码：<el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start"> <el-button>上左</el-button></el-tooltip>参数说明：参数 说明 类

实现效果：初始状态：模糊搜索效果：实现方法：template中：<el-input placeholder="输入关键字" v-model="filterText"></el-input><el-tree class="filter-tree" :data="data" :props="defaultProps" default-expand-all :filter-node-method="filterNod..

实现目标：在输入框中输入与名称有关的内容，出现与所输入内容有关的表信息。实现效果：实现方式：template中：<div class="search-box"> <el-input placeholder="请输入名称" v-model="inputVal" clearable size="small" ></el-inp

实现目标：在输入框中输入相关字符，列表会模糊查询与其有关的信息。实现效果：后端的swagger中：api的js文件中：// 根据名称模糊查询export function selectByName(param) { return request({ url: "/xxxx/selectByName", method: "get", params: { name: param } .

实现目标：在已完成添加到右端的接口的前提下，若将数据添加至右边，再次点击该弹框时，已添加到右边的数据显示。若没有添加至右边的数据，默认全都显示在左侧。实现效果：后端swagger：实现方法：在vue文件点击弹窗的按钮处调用接口：async filesBatchAuth() { this.authDialogTitle = "授权"; this.isBatchAuth = true; let cameraId = []; thi