2022.9.14
①、facility\ReceivingStation\Components\Map.vue文件夹，解决22条爆红（t is not a function）错误
②、解决资源方结构的饼图的title错误，原由是因为看了老版本ui设计稿
③、资源方结构饼图展开需求会，更换饼图样式
④、解决1x.antdv中日历用户不能选择今日之前的日期
主要代码：
disabledDate(current) {
return current && current < moment().subtract(1, 'days').endOf('day');
},
⑤、周期修改接口无法成功：日期格式参数不对（2022-9-15 8:00:00=>2022-09-15 08:00:00）
2022.9.15
①、深入理解路由的思路：路由其实就是引入router插件之后，我们只需要根据插件的内部方法导入相对应的vue文件就可以实现，路由切换了，就会跳转到相对应的vue文件当中，vue本身就支持router.js插件，所以我们无需做过多的操作，就只需要重点掌握以下几点：
1、安装router.js --->npm i "vue-router": "3.5.2",
2、main.js文件当中引入并挂载router文件
import router from './router';
new Vue({router,store,render: h => h(App),}).$mount('#app');
3、创建路由文件：router
import Vue from 'vue';
import VueRouter from 'vue-router';
import MainContainer from '@/components/layout/MainContainer.vue';
import sandTable from './sand-table';
import marketWisdom from './market-wisdom';
Vue.use(VueRouter);
const routes = [
{
path: '*',
redirect: { name: 'sandTableCtlIndex' },
},
{
path: '/',
children: [
{
path: '/iframe',
name: 'iframe',
meta: {
title: '运营中心',
},
component: () => import(/* webpackChunkName: 'common' */ '@/views/common/iframe'),引入相对应的vue文件
},
...sandTable,
...marketWisdom,
],
component: MainContainer,
},
];
const router = new VueRouter({
base: process.env.BASE_URL,
routes,
});
export default router;
4、如果我们有时候会碰到一种情况就是多个脚手架合成的这么一种项目，那么可能存在一种情况就是虽然当前页面含有多个路由，但是当前自己启动的本地项目却只有相关的路由，当我们点击页面侧边导航栏时，点击相对应的菜单就可以跳转到相对应的路由页面当中如果是当前项目没有相对应的路由是，就会跳转到主系统指定的公共页面，当然那绝大多数情况下就是登录页面。如何实现这种效果呢？？？ 就是通过后端在后台系统配置，这种模式就是前端需要创建新的路由菜单时，就是需要在后台系统当中新增一个相对应的路由名称。必须统一，因为我们点击菜单时跳转的路由名称是从后台获取到的，所以我们就需要同步，此处会涉及到两个跳转方式：
②： this.$router.push({
name: 'iframe',
query: { src: window.encodeURIComponent(item.permisCode) },
});
②： window.open(permisCode)
②、电子沙盘移动端所有的可左右滑动的图表都改成相对应的滚动条去进行时间滚动
③、移动沙盘解决uibug问题，项目上线。
2022.9.22
1、echarts图表中的tooltip遇到<加上字母，就转换成0了
①：错误代码处
②解决方案
③：查看现象：
2022.9.27
1、扩展运算符：
①：?. （链判断运算符 ）
直接在链式调用的时候判断，左侧的对象是否为null或undefined。如果是的，就不再往下运算，而是返回undefined。(解决message.body.user.firstName等链式读取数据报错问题)
②：?? (Null 判断运算符)
默认值只有在左侧属性值为null或undefined时，才会生效。(const data=response.settings.animationDuration??true =>为了默认值而准备如果左侧的值为null或者undefined就会去默认值true)
2022.9.29
1、echarts图表中柱状图当用户点击某一个柱子时发现柱子中间的虚线不居中，解决方案是手动偏移，利用属性barGap(为正时向右移为负时向左移)****
①：效果
②：相对应属性
2、vuex存储数据的流程详解
①：在组件当中使用命令
facilicty/queryStationList指的是store文件夹中facilicty.js文件，
this.$store.dispatch(‘facilicty/queryStationList’,data)
this.$store.dispatch('facility/queryStationList', data);
②：facilicty.js文件当中的actions当中就会有queryStationList方法，我们则可以在actions中queryStationList方法当中通过commit（‘QUERY_STATION_LIST’,val）方法
const actions = {
async queryStationList({ commit }, val) {
commit('QUERY_STATION_LIST', val);
},
};
③：去改变mutations对应模块的内容
const mutations = {
QUERY_STATION_LIST: (state, val) => {
state.stationList = JSON.parse(JSON.stringify(val));
},
};
此时的state模块中的stationList数组的数据加发生改变了
const state = {
stationList: [], // 接收站列表数据
};
④：整体流程：
⑤：页面当中使用数据：
const stationList = this.$store.state.facility.stationList;
3、防抖和节流最通俗易懂的描述
· 节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效
· 防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时
一个经典的比喻:
想象每天上班大厦底下的电梯。把电梯完成一次运送，类比为一次函数的执行和响应
假设电梯有两种运行策略 debounce 和 throttle，超时设定为15秒，不考虑容量限制
电梯第一个人进来后，15秒后准时运送一次，这是节流
电梯第一个人进来后，等待15秒。如果过程中又有人进来，15秒等待重新计时，直到15秒后开始运送，这是防抖
2022.10.10
1、用户反复暴力切换tabs导航栏时，造成请求冗余，反复请求。导致响应过慢，页面出现白屏现象解决方案：
①：在axios文件夹中的请求拦截将cancle存入store内
// 存入axios请求，此处目的，是为了防止用户暴力切换tabs页面时造成多次重复请求的问题
config.cancelToken = new axios.CancelToken(cancel => {
store.commit('addCancelToken', cancel);
});
②：在store中存储cancel
state: {
activeCode: '', // 当前选中菜单的code
isSetting: false, // 是否设置过菜单
menuList: [], // 菜单
permissions: {}, // 权限对象集合
permissionMenuIds: [], // 菜单权限id集合
permissionLeafsIds: [], // 模块权限id集合
cancelTokenArr: [],
},
mutations: {
// 增加所有正在
if (!state.cancelTokenArr) {
state.cancelTokenArr = [];
}
if (cancel) {
state.cancelTokenArr.push(cancel);
}
},
// 取消所有请求
clearCancelToken(state) {
state.cancelTokenArr.forEach(c => {
if (c) {
c();
}
});
state.cancelTokenArr = [];
},
[MENU_CHANGE](state, menu) {
Object.assign(state, menu);
},
},
③：在router.js文件当中设置路由前置守卫，用于销毁之前所有的请求
router.beforeEach((to, from, next) => {
// 切换路由时先取消所有请求
store.commit('clearCancelToken');
next();
});
2、vue全局公共样式
①：在scss文件夹当中的mixins.scss文件写入样式
@mixin common-content {
width: 100%;
padding: 24px;
margin-bottom: 24px;
border-radius: 16px;
background-color: #fff;
box-shadow: 0 3px 13px 0 rgba(5, 37, 84, 0.08);
overflow: hidden;
}
②：在scss文件夹当中的common.scss文件中引入mixins.scss文件的样式，相当于注册
.common-content {
@include common-content;
}
③：在main.js文件中全局引入
import '@/assets/scss/common.scss';
④：在组件当中直接使用
<h3 class="common-content-title">
{{ gasType === 'LNG' ? '天然气表观消费量变化趋势' : 'LNG消费量变化趋势' }}
</h3>
⑤：整体流程
