# 2019

const Foo = {
  template: `...`,
  beforeRouterEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
   // 可以访问组件实例 `this` 
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

 // 离开当前组件
beforeRouteLeave(to, from, next) {
  if (this.formType !== "本地数据" || this.localIndicators.length === 0) {
    next();
    return;
  }
  this.$Modal.confirm({
    title: "离开页面",
    content: "本地数据将会被清空，确定离开此页面？",
    onOk: () => {
      next();
    },
    onCancel: () => {
      next(false);
    }
});

mounted() {
  window.addEventListener("beforeunload", this.handleBeforeunload);
},
beforeDestroy() {    
  window.removeEventListener("beforeunload", this.handleBeforeunload);
},
methods: {
 // 浏览器刷新
  handleBeforeunload(event) {
    if (this.formType !== "本地数据" || this.localIndicators.length === 0) {
      return;
    }
    event.preventDefault();
    event.returnValue = "本地数据将会被清空，确定刷新此页面？";
    return "本地数据将会被清空，确定刷新此页面？";
  },
}

beforeRouteEnter(...args) {
  return toolBarControllBeforeEnter(...args);
},
beforeRouteLeave(...args) {
  return toolBarControllBeforeLeave(...args);
}
methods: {
  // 思路：先拿到静态文件数据
  // 遍历静态数据，用产品名称去匹配，得到该产品需要过滤掉用具
  // 不在静态数据key类工具下的产品，说明不需要key类的工具
  async function toolBarControllBeforeEnter(to, from, next) {
    const controlToolbarInfo = await getControlMapToolbarInfo(); // 先拿到静态文件数据
    const { productName } = localStorage.get(PRODUCTROUTERPARAMS);
    const noNeedToolbarArr = [];

    Object.keys(controlToolbarInfo).forEach(key => {
      const productToolbar = controlToolbarInfo[key];
      if (!productToolbar[productName]) {
        // 需要过滤掉的工具类（比如：Swipe）
        noNeedToolbarArr.push(key);
      }
    });

    if (noNeedToolbarArr.length > 0) {
      const { components } = to.meta;
      // 拿到对应的工具栏组件
      const toolBar = components.find(v => v.name === "ToolBar");
      if (
        toolBar &&
        Array.isArray(toolBar.children) &&
        toolBar.children.length > 0
      ) {
        toolBarInfoCache = toolBar.children.slice();
        toolBar.children = toolBar.children.filter(
          v => !noNeedToolbarArr.includes(v.name) // 过滤掉不需要的工具
        );
      }
    }

    next();
  }
}

if (剩余高度小于container 的内容高度) 则（containerHeight = 剩余高度remainHeight），从而出现滚动条来查看。满足要求。

async userLogin({ commit }, { loginname, loginpwd }) {
  const key = await getRsaKey();
  // rsa加密
  const encrypt = new JSEncrypt();
  encrypt.setPublicKey(key);
  const rsapwd = encrypt.encrypt(loginpwd);
  const data = await loginRsa({
    loginName: loginname,
    loginPwd: rsapwd
  });
  const { userCode, ownRegion } = data;
  commit(SET_USER_INFO, data);
  commit(SET_LOGIN_STATUS, true);
  commit(SET_USER_SESSION, userCode); // todo
  setSession(userCode); // todo
  setUserRegionCode(ownRegion);
  setUserMapExtent(ownRegion);
  return data;
},

var image = new Image();
image.onload = function() {
  var canvas = document.createElement('canvas');
  canvas.width = image.width;
  canvas.height = image.height;

  var context = canvas.getContext('2d');
  context.drawImage(image, 0, 0);

  var imageData = context.getImageData(0, 0, canvas.width, canvas.height);

  // Now you can access pixel data from imageData.data.
  // It's a one-dimensional array of RGBA values.
  // Here's an example of how to get a pixel's color at (x,y)
  var index = (y * imageData.width + x) * 4;
  var red = imageData.data[index];
  var green = imageData.data[index + 1];
  var blue = imageData.data[index + 2];
  var alpha = imageData.data[index + 3];
};

if (process.env.VUE_APP_PERMISSION === 'true') {
}

/**
 *  判断是否为开发环境
 *  @returns Boolean
 */
export const isDev = () => process.env.NODE_ENV === 'development';
/**
 * @description: 判断是否开启运维
 * @returns {Boolean}
 */
export function isPermission() {
  // 开发环境根据 process.env 变量去判断
  if (isDev()) {
    return process.env.VUE_APP_PERMISSION === 'true' ? true : false;
  } else {
    // 非开发环境才去根据 window.__USEPERMISSION__ 去判断是否开发
    return window.__USEPERMISSION__;
  }
}

// 第一种：使用 CancelToken
const { CancelToken, isCanCel } = axios;
const source = CancelToken.source();

axios
  .get('/user/12345', {
    cancelToken: source.token
  })
  .catch(thrown => {
    if (isCancel(thrown)) {
      // 获取 取消请求 的相关信息
      console.log('Request canceled', thrown.message);
    } else {
      // 处理其他异常
    }
  });

axios.post(
  '/user/12345',
  {
    name: 'new name'
  },
  {
    cancelToken: source.token
  }
);

// 取消请求。参数是可选的，参数传递一个取消请求的相关信息，在 catch 钩子函数里能获取到
source.cancel('Operation canceled by the user.');

// 第二种：给构造函数 CancelToken 传递一个 executor 函数作为参数。这种方法的好处是，可以用同一个 cancel token 来取消多个请求
const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // 参数 c 也是个函数
    cancel = c;
  })
});

// 取消请求，参数用法同上
cancel();

import axios from 'axios';
import store from '@/store';
import { getToken } from '@/utils/auth';

// 创建一个 axios 实例，并改变默认配置
const service = axios.create({
  baseURL: process.env.BASE_API, // api 的 base_url
  timeout: 5000 // request timeout
});

// 请求拦截
service.interceptors.request.use(
  config => {
    // Do something before request is sent
    if (store.getters.token) {
      // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
      config.headers['X-Token'] = getToken();
    }
    return config;
  },
  error => {
    // Do something with request error
    console.log(error); // for debug
    Promise.reject(error);
  }
);

// 响应拦截
service.interceptors.response.use(
  response => response,
  error => {
    alert(error);
    return Promise.reject(error);
  }
);

export default service;

// api.js
import request from 'request'
export function getUsers(page, options) {
  return request({
    url: 'api/users',
    params: {
      page
    },
    ...options
  })
}


// User.vue
import { CancelToken, isCancel } from 'axios'
import { getUsers } from 'api'

...

cancel: null

...

toCancel() {
  this.cancel('取消请求')
}

getUsers(1,
  {
    cancelToken:  new CancelToken(c => (this.cancel = c))
  }
)
.then(...)
.catch(err => {
  if (isCancel) {
    console.log(err.message)
  } else {
    ...
  }
})

// creates a history entry
window.location.href =
  window.location.pathname + window.location.search + window.location.hash;

// does not create a history entry
window.location.replace(
  window.location.pathname + window.location.search + window.location.hash
);

// 从服务器加载所有的内容
window.location.reload(true);

cloc --help

/**
 * @vuese
 * 接收dataeye的消息
 * @arg res event
 */
onmessage(res) {
  if (this.dataeyeUrl.includes(res.origin)) { // 注意本地开发时的 origin
    this.validateMessage(res.data);
  }
},

document.getElementId('iframeId').contentWindow.location.reload(true);

// 无缓存刷新页面（但页面引用的资源还是可能使用缓存，
// 大多数浏览器可以通过设置在打开开发者工具时禁用缓存实现无缓存需求）
window.location.reload(true);

watch: {
  id: {
    handler(val) {
      val ? (this.pageId = val) : (this.pageId = this.$route.params.pageId);
    },
    deep: true,
    immediate: true
  },
  pageId: {
    handler() {
      this.$nextTick(() => this.setPageSize())
    },
    immediate: true
  }
},

this.dataeyeShow = false; // 先关闭
this.$nextTick(() => {
  this.enterdataeyeUrl = `${this.$store.getters.config.DATAEYE}releasePage/${pageId}`;
  this.dataeyeShow = true; // 后开启，重新渲染
});

export default {
  inserted(el, binding) {
    if (binding.value && binding.value.disabled) {
      el.classList.add('system-model-disabled');
    }
  },
  // 所在组件  vnode 更新时调用
  update(el, binding) {
    if (binding.value && binding.value.disabled) {
      el.classList.add('system-model-disabled');
    } else if (el.classList.contains('system-model-disabled')) {
      el.classList.remove('system-model-disabled');
    }
  }
};

 handleClickItem(data) {
    const { id } = data;
    this.selectedItem = this.onSelectedChange(id);
    // this.$emit("update:condition", this.topicList);
    this.$emit("on-selected-change", this.selectedItem);
  },
  onSelectedChange(id) {
    // 找到对应的项目
    const node = this.topicList.find(val => {
      return val.id === id;
    });
    if (node) {
      this.$set(node, "selected", !node.selected);
    }
    // 取得补集，均设置为 false
    const elseNodes = this.topicList.filter(val => {
      return val.id !== id;
    });
    if (elseNodes && elseNodes.length > 0) {
      elseNodes.forEach(val => {
        this.$set(val, "selected", false);
      });
    }

    // 取得选中的项目
    const selectedItem = this.topicList.find(val => {
      return val.selected;
    });
    if (!selectedItem) return {};
    return selectedItem;
  },

if (!data.hasData) {
  // 设置禁用
  this.$set(data, 'disabled', true);
}

.hide {
  opacity: 0;
}

this.indicatorNames = indicatorNames.filter(item => {
  return !/增长率|增长比|增减量/.test(item);
});

// .vuepress/config.js
module.esxports = {
  plugins: [
    'vuepress-plugin-zooming',
    {
      // 支持点击缩放的图片元素的选择器
      selector: 'img',
      // 进入一个页面后，经过一定延迟后使页面中的图片支持缩放
      delay: 1000,

      // medium-zoom 的 options
      // 默认值: {}
      options: {
        bgColor: 'black',
        zIndex: 10000
      }
    }
  ]
};

Selector containing string (case-sensitive)

// jQuery
$("selector:contains('text')");

// Native
function contains(selector, text) {
  var elements = document.querySelectorAll(selector);
  return Array.from(elements).filter(function(element) {
    return RegExp(text).test(element.textContent);
  });
}

yarn lint widgets/**/Widget.js

 handleFormModAdd() {
      const { modules, module } = this;
      let newModule = JSON.parse(JSON.stringify(module)); // 通过深拷贝 copy 来避免相同 key 名称 的关联
      // modules.push(module);  key 相同会导致选择问题
      modules.push(newModule);
    },

// 获取的信息
const a = [
  {
    id: 1,
    title: '耕地面积',
    dims: []
  },
  {
    id: 2,
    title: '常住人口',
    dims: []
  }
];
// 配置文件
const b = [
  {
    title: '分类一',
    value: [{ id: 1, title: '耕地面积' }]
  },
  {
    title: '分类二',
    value: [{ id: 2, title: '常住人口' }]
  }
];
// 目标输出
const target = [
  {
    title: '分类一',
    children: [{ id: 1, title: '耕地面积' }]
  },
  {
    title: '分类二',
    children: [{ id: 2, title: '常住人口' }]
  }
];

let intersection = a.filter(v => b.includes(v));

intersectionBy([{ x: 1 }], [{ x: 2 }, { x: 1 }], 'x');

const data = [];
const [indexDataCategory, indicators] = await Promise.all([
  this.fetchIndexDataCategory(),
  this.fetchIndicators()
]);
// 取得分类后的指标项
const data = [];
// 取出 value 对象的 title/id 作为 key 对比
indexDataCategory.forEach(item => {
  const obj = {};
  obj.title = item.label;
  obj.children = this.$lodash.intersectionBy(indicators, item.value, 'title');
  data.push(obj);
});

async fetchIndustryApplication() {
  try {
    const res = await this.$http.get(
      "static/mockdata/FZBZ_JSON/ai_analysis_indexData_industryApplication.json"
    );
    const data = res.data;
    this.industryApplications = data.data;
  } catch (err) {
    console.log(err);
  }
}

axios
  .get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function(response) {
    console.log(response);
  })
  .catch(function(error) {
    console.log(error);
  })
  .then(function() {
    // always executed
  });

// xxxx/module.js 模块封装的函数
import { GET } from '@/plugins/axios';
export function getCityByIndicators(params) {
  return GET(
    `rest/pas/v1/naturalRes/indicator/dimension/city`,
    '根据指标获取以行政区排序的城市数据',
    params
  );
}

// xxx.vue
async getCityRegionData() {
    try {
      const params = {
        "ids[]": this.itemData.indicatorIds.join()
      };
      const cityRegionData = await getCityByIndicators(params);
      this.cityRegionData = cityRegionData;
    } catch (err) {
      console.log(err);
    }
  },

interceptors(instance = this.instance) {
  // 请求拦截
  instance.interceptors.request.use(
    config => {
      // 处理 axios 不会对 url 中的功能进行编码
      let url = config.url;
      // 针对 get 参数编码
      if (config.method === 'get' && config.params) {
        url +='?';
        let keys = Object.keys(config.params);
        for (let key of keys) {
          url += `${encodeURIComponent(key)}=${encodeURIComponent(
            config.params[key]
          )}&`
        }
        url = url.substring(0, url.length - 1);
        config.params = {}; // 清空
      }
      config.url = url;
      return config;
    }
  )
}

async created() {
  // 这里执行初始化数据获取
  if (/*xxx*/) {
    this.panelData = this.getData();
   //  ....
  }
  // 默认选中第一项, 默认选中第一项，nextTick 等待 pageData 拿到数据，渲染 dom 后更新完毕
  await this.$nextTick();
  if (this.panelData[0].children.length > 0) {
    this.handleSelectList(this.panelData[0].children[0]);
  }
},
methods: {
  checkIsSelected(data) {
    this.defaultSelectedItems.forEach(v => {
      if (v.name === data.name) {
        this.$set(data,'isSelected', true);
      }
    })
  }
}

async function asyncAwaitTryCatch() {
  try {
    const api = new Api();
    const user = await api.getUser();
    const friends = await api.getFriend();

    await api.throwError();
    console.log('Error was not thrown');

    const photo = await api.getPhoto(user.id);
    console.log('async/await', { user, friends, photo });
  } catch (err) {
    console.log(err);
  }
}

async function getUserInfo() {
  const api = new Api()
  const user = await api.getUser()
  const friends= await api.getFriends(user.id)
  const photo = await api.getPhoto(user.id)
  return {user, friends, photo }
}

function promiseUserInfo() {
  getUserInfo().then({ user, friends, photo }) => {
    console.log('promiseUserInfo', { user, friends, photo })
  }
}

// 或者继续使用 async/await 语法
async function awaitUserInfo () {
  const { user, friends, photo } = await getUserInfo()
  console.log('awaitUserInfo', { user, friends, photo })
}

async function getLotsOfUserData() {
  const users = [];
  while (users.length < 10) {
    users.push(await getUserInfo());
  }
  console.log('getLotsOfUserData', users);
}

async function getLotsOfUserDataFaster() {
  try {
    const userPromises = Array(10).fill(getUserInfo());
    const users = await Promise.all(userPromises);
    console.log('getLotsOfUserDataFaster', users);
  } catch (err) {
    console.log(err);
  }
}