Fork me on GitHub

CSS 2.1

本章内容来自于《css的世界》-张鑫旭，类似于读书笔记吧。主要介绍css2.1的语法。本书主要用于进阶学习，不适用于初学者，书中也默认忽略一些基础的知识.

CSS2.1中的CSS属性的设计初衷是展示图文

css 的世界

已操作系统划分世界，不同的操作系统就是平行世界。每种浏览器就是一个王国。

在CSS世界中，HTML是魔法石，选择器就是选择法器，CSS属性就是魔法师，CSS各种属性值就是魔法师的魔法技能，浏览器就是他们所在的“王国”，“王国”会不断更新法律法规（版本升级），决定是否允许使用新的魔法石（HTML5新标签新属性），是否允许新的魔法师入“国籍”（CSS3新属性），或者允许魔法师使用某些新技能（CSS新的属性值），以及是否舍弃某些魔法技能（如display:run-in）；操作系统就是他们所在的世界，不同的操作系统代表不同的平行世界，所以，CSS世界有这么几个比较大的平行世界，即Windows世界、OS X世界以及移动端的iOS世界和Android世界。不同世界的浏览器王国的命运不一样，例如，在OS X世界中，IE王国是不存在的，而Safari王国却异常强大，但在Windows世界中，Safari王国却异常落寞。以上这一切就构成了完整的CSS世界的“世界观”。

专业术语

  1. 属性

  2. 值

  3. 关键字

  4. 变量

  5. 长度单位

    时间单位（如s、ms），还有角度单位（如deg、rad等）

    相对长度单位：如em,rem(相对字体),vh,vw,vmin,vmax(相对视区)

    绝对长度单位：px

  6. 功能符

    值以函数的形式指定（就是被括号括起来的那种），主要用来表示颜色（rgba和hsla）、背景图片地址（url）、元素属性值、计算（calc）和过渡效果等，如rgba(0,0,0, .5)、url(‘css-world.png’)、attr(‘href’)和scale(-1)。

  7. 属性值

  8. 声明

    属性名加上属性值就是声明

  9. 声明块

    就是选择器 {} 区域

  10. 规则或规则集

    选择器后面的声明块就是一个规则集

    1
    2
    3
    div {
        ... 规则集
    }

  11. 选择器

  12. 关系选择器

    常见的符号有空格、>、～，还有+等，这些都是非常常用的选择器。

  13. @规则

    @规则指的是以@字符开始的一些规则，像@media、@font-face、@page或者@support，诸如此类

more >>

展开全文 >>

微软商店提示无法加载该页面

参考

1、代理服务器的设置问题

设置 Internet选项 -连接-局域网设置-取消勾选代理服务器

2、TLS 版本过低

Internet选项-高级-勾选 tls 1.2,1.3

展开全文 >>

插件合集

1、VueUse

​ VueUse 是 Anthony Fu 大佬的一个开源项目，它为Vue的开发者提供了大量用于 Vue2 和Vue3 的基本 Composition API 实用工具函数。

它有几十个用于常见开发人员用例的解决方案，如跟踪ref更改，检测元素可见性，简化常见Vue模式，键盘/鼠标输入等。 这是真正节省开发时间的好方法，因为我们不必自己亲手添加所有这些标准功能，拿来主义，用就对了(再次感谢大佬的付出)。

more >>

展开全文 >>

react 插件

react.PureComponent 与 React.Component 区别

唯一的区别在于 Rect.Component 没有实现 shouldComponentUpdate() *一个不太常用的生命周期方法*, 而 React.PureComponent 中以浅层对比 prop 和 state 的方式来实现了该函数。

注意

React.PureComponent 中的 shouldComponentUpdate() 仅作对象的浅层比较。如果对象中包含复杂的数据结构，则可能无法检查到深层的差别，产生错误的对比结果。所以只在props 和 state 比较简单时使用这个，或者在深层数据结构发生变化时调用forceUpdate()来确保组件被正确地更新。也可以使用immutable 对象加速嵌套数据的比较。

此外，React中 的 shouldComponentUpdate() 将跳过所有子组件树的 prop 更新。因此，确保所有子组件也是“纯的”组件。

more >>

展开全文 >>

vue 实践与优化

在使用 element UI 的 el-image 时，首次加载图片出现白色闪现效果

这是应为 组件内 在加载前和加载中是一个类名为el-image__placeholder的div标签，在加载后和加载出错后的处理分别是一个div和img标签。

解决方法：在加载前和加载后的样式上做更改，可以重写覆盖类名el-image__placeholder和el-image__error来自定义自己想要的效果了

1
2
3
4
5
6
7
// 将默认的白色背景去除

::v-deep .el-image__placeholder,
::v-deep .el-image__error
{
    background: none !important;
}

vue 路由 tab切换时，动态判断左右切换过渡动画

预置三种动画

  1. opacity-scale
  2. switch-right
  3. switch-left
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
/**
    transition-动画 [透明缩放]
    name: "opacity-scale"
 */
.opacity-scale-enter-active {
    transition: all 0.65s ease;
}
.opacity-scale-leave-active {
    transition: all 0.65s ease;
}
.opacity-scale-enter {
    opacity: 0;
    transform: scale(0.9);
}
.opacity-scale-enter-to {
    opacity: 1;
    transform: scale(1);
}
.opacity-scale-leave {
    opacity: 1;
    transform: scale(1);
}
.opacity-scale-leave-to {
    opacity: 0;
    transform: scale(0.9);
}

/**
    transition-动画 [透明]
    name: "opacity-scale"
 */
 .opacity-enter-active {
    transition: all 0.65s ease;
}
.opacity-leave-active {
    transition: all 0.65s ease;
}
.opacity-enter {
    opacity: 0;
}
.opacity-enter-to {
    opacity: 1;
}
.opacity-leave {
    opacity: 1;
}
.opacity-leave-to {
    opacity: 0;
}

/**
    transition-动画 [幻灯片（从左向右）]
    name: "switch-left"
 */
.switch-left-enter-active {
    transition: all 0.85s ease;
}
.switch-left-leave-active {
    transition: all 0.85s ease;
}
.switch-left-enter {
    transform: translateX(-100%);
    opacity: .85;
}
.switch-left-enter-to {
    transform: translateX(0);
    opacity: 1;
}
.switch-left-leave {
    transform: translateX(0);
    opacity: 1;
}
.switch-left-leave-to {
    transform: translateX(100%);
    opacity: .85;
}

/**
    transition-动画 [幻灯片（从右向左）]
    name: "switch-right"
 */
.switch-right-enter-active {
    transition: all 0.85s ease;
}
.switch-right-leave-active {
    transition: all 0.85s ease;
}
.switch-right-enter {
    transform: translateX(100%);
    opacity: .85;
}
.switch-right-enter-to {
    transform: translateX(0);
    opacity: 1;
}
.switch-right-leave {
    transform: translateX(0);
    opacity: 1;
}
.switch-right-leave-to {
    transform: translateX(-100%);
    opacity: .85;
}

/**
    菜单下拉动画
 */
.menu-upbit-anim {
    animation-duration: .3s;
    animation-fill-mode: both;
    animation-name: menu-top-to-bottom;
}

@keyframes menu-top-to-bottom{
    from{
        opacity:.3;
        margin-top: -30px;
    }
    to{
        opacity:1;
        margin-top: 0;
    }
}

设置路由

通过设置路由属性 meta.sort 来记录路由位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
const routers = [
	 {
    path: "/defectControl",
    name: "defectControl",
    meta: {
      keepAlive: false,
      sort: "c-1",
    },
    component: () =>
      import(
        /* webpackChunkName: "defectControl-index" */ "@/views/defectControl/index.vue"
      ),
    children: [
      {
        // 首页
        path: "frontPage",
        name: "defectControl-frontPage",
        meta: {
          keepAlive: false,
          sort: "c-2",
        },
        component: () =>
          import(
            /* webpackChunkName: "defectControl-frontPage" */ "@/views/defectControl/frontPage.vue"
          ),
      },
      {
        path: "defectPool",
        name: "defectControl-defectPool",
        meta: {
          keepAlive: false,
          sort: "c-3",
        },
        component: () =>
          import(
            /* webpackChunkName: "defectControl-defectPool" */ "@/views/defectControl/defectPool.vue"
          ),
      },
      {
        path: "defectCondition",
        name: "defectControl-defectCondition",
        meta: {
          keepAlive: false,
          sort: "c-4",
        },
        component: () =>
          import(
            /* webpackChunkName: "defectControl-defectCondition" */ "@/views/defectControl/defectCondition.vue"
          ),
      },
      {
        path: "defectFocal",
        name: "defectControl-defectFocal",
        meta: {
          keepAlive: false,
          sort: "c-5",
        },
        component: () =>
          import(
            /* webpackChunkName: "defectControl-defectFocal" */ "@/views/defectControl/defectFocal.vue"
          ),
      },
      {
        path: "defect",
        name: "defectControlConfiguration-defectConfig",
        meta: {
          keepAlive: false,
          sort: "c-6",
        },
        component: () =>
          import(
            /* webpackChunkName: "defectControlConfiguration-defectConfig" */ "@/views/defectControl/defectControlConfiguration/defectView.vue"
          ),
      },
    ],
  },
]

监听路由变化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
{
    data() {
        return {
            transitionName: "opacity-scale"
        }
    },
	watch: {
		$route(to, from) {
          // 查看路由元信息中是否设置了动画名
          if (to?.meta?.transitionName) {
            return (this.transitionName = to.meta.transitionName);
          }
          // 如果是主模块，不是子模块不需要动画
          if (from.path === "/defectControl") {
            return (this.transitionName = "none");
          }
          const toSort = to?.meta?.sort;
          const fromSort = from?.meta?.sort;
          // 未设置路由元信息位置，默认透明缩放效果
          if (!isString(toSort) || !isString(fromSort)) {
            return (this.transitionName = "opacity-scale");
          }
          // 比较路由位置判断左右切换的动画名称
          this.transitionName =
            toSort.localeCompare(fromSort) > 0 ? "switch-right" : "switch-left";
        },
	}
}

退出登录再登录提示路由重复问题

本质上就是路由重复注册导致的提示，我们可以在每次登出时，清除注册路由

在 router 文件中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import Vue from 'vue'
import VueRouter from 'vue-router'

import BaseLayout from "@/layouts/BaseLayout.vue"
Vue.use(VueRouter)

export const constantRoutes = [
  {
    path: '/',
    redirect: '/login', // 重定向到 /home 路径
    component: BaseLayout,
    children: [
      {
        name: 'home',
        path: '/home', 
        component: () => import(/* webpackChunkName: "Home" */ '@/views/home/Home.vue')
      },
 
    ], 
  },
  {
    path: '/login',
    name: 'login',
    component: () => import(/* webpackChunkName: "login" */ '@/views/login/Login.vue')
  },

]

const router = new VueRouter({
  routes: constantRoutes
})

// 解决重复点击导航时，控制台出现报错
const VueRouterPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (to) {
  return VueRouterPush.call(this, to).catch(err => err)
}
// 路由重置，解决退出登录后路由重复提示
const createRouter = () => new VueRouter({
  routes: constantRoutes,// 添加默认路由，找不到路由可能导致报错
})
export function resetRouter() {
  const newRouter = createRouter();
  router.matcher = newRouter.matcher;
}

export default router

退出登录时调用

1
2
3
4
5
6
7
loginOut() {
    this.$store.dispatch('globalModule/FedLogOut').then(()=> {
        resetRouter();
        // 此处确保 login 路由存在
        this.$router.push({name: 'login'});
    })
},

参考链接

用户在指定页面因token过期而导致返回登录页，登陆后回到此页面

需要在 axios 响应拦截时处理

1
2
3
4
5
6
7
8
if(code == 401) {
    Vue.prototype.$message.error("登录状态已过期,请重新登录");
    store.dispatch('globalModule/LogOut').then(() => {
        // 此处路由到login并添加标记
        router.push(`/login?redirect=${store.getters.activeMenu}`)
    })
    return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
}

在全局路由前置守卫合适的地方添加判断

1
2
3
4
5
6
7
let redirect = new URLSearchParams(location.hash.slice(7)).get('redirect');
if(redirect) {
    location.hash = '';
    next({ path: redirect, replace: true })
} else {
    next()
}

vite 动态引入图片

需求：通过变量形式加载img。

1
2
3
const getAssetsFile = (url) => {
  return new URL(`../../assets/images/common/${url}`, import.meta.url).href;
};

此方式引入图片开发环境没问题，但是打包图片404

原因

解决方式1

直接导入再使用

1
2
3
4
5
6
7
8
import icon_1 from '@/assets/icon/1.png'
import icon_2 from '@/assets/icon/2.png'
// more
const images = {
    icon_1,
    icon_2
    // more
}
1
2
3
<div v-for="(item, index) in array">
    <img :src="images[`icon_${index}`]" />
</div>

解决方式2

全部导入，通过路径去匹配

1
2
3
4
5
const getAssetsFile = (name) => {
  const modules = import.meta.glob('../assets/images/common/*', { eager: true })  // 这里可以写 @ (路径别名) 或者 /src (绝对或相对路径)
  const path = `../assets/images/common/${name}` // 这里不可以写路径别名，只可以写绝对或者相对路已经
  return modules[path]?.default
}

参考文章

element-ui/plus 弹窗组件替换背景

之前替换背景样式总是不免一番大改，如果背景图空白较大，还得调整下弹窗的布局。可谓麻烦之极。所以突发奇想，有啥办法可以一劳永逸，至少不会影响弹窗的布局，比如让背景图在弹窗后面出现。这样只需将弹窗背景设置为透明就没有其他问题了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.el-dialog {
    background: transparent!important;
    &::after {
        content: '';
        background: url("@/assets/images/common/bg_dialog1.png") 0 0/100% 100% no-repeat !important;
        position: absolute;
        width: 104%;
        height: 110%;
        top: -5%;
        left: 0%;
        z-index: -1;
        transform: translateX(-2%);
    }
    &.large-dialog {
        &::after {
            content: '';
            background: url("@/assets/images/common/bg_dialog2.png") 0 0/100% 100% no-repeat !important;
            position: absolute;
            width: 104%;
            height: 110%;
            top: -5%;
            left: 0%;
            z-index: -1;
            transform: translateX(-2%);
        }
    }
}

利用伪类将弹窗等大扩展一下将原来的弹窗包裹进去，这样就可以简单的实现替换弹窗风格了

通过伪类添加图标

伪类支持url, 但是这样会有个问题，缩放时图片的尺寸不受控。如果做了 px2rem 不起作用

1
2
3
4
5
6
7
8
.box {
  &::after {
    content: url("/vite.svg");
    display: inline-block;
    width: 16px;
    height: 16px;
  }
}

修改如下

1
2
3
4
5
6
7
8
9
10
.box {
  &::after {
    content: "";
    background-image: url("/vite.svg");
    background-size: contain;
    display: inline-block;
    width: 16px;
    height: 16px;
  }
}

为element-表格 滚动条设置步进

目的是滚轮滚动一下就实现翻页效果，不分页的表格数据展示中

1
2
3
4
5
6
7
<el-table 
	:data="tableList"
	height="calc(100% - 50px)"
	ref="testTable"
>
...
</el-table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
let testTable = ref(null);
function testScroll (e) {
    e.preventDefault();
    let step = 320;
    if (e.wheelDeltaY > 0) {
        this.scrollTop -= step;
    } else {
        this.scrollTop += step;
    }
    console.log(this.scrollTop, this);
}

onMounted(()=> {
    // 获取 el-table 的滚动 DOM 容器元素
    const tableWrapper = testTable.value.$el.querySelector('.el-table__body-wrapper .el-scrollbar .el-scrollbar__wrap');  
    // 监听滚动事件  
    tableWrapper.addEventListener('wheel', testScroll);
})

通用图标解决方案

  1. iconfont

    iconfont只有 fontawesome 的css文件，没有其他用法，但是图标比 fontawesome 多，全免费，但是风格不都统一需要筛选

  2. fontawesome

    图标较少（6.7 free版本有2060个图标，包括实体，常规，网站图标三种类别），pro版本不是免费，相比较于 iconfont 这里得图标尺寸风格统一不需要调整

    1
    2
    3
    4
    5
    6
    7
    8
    |-/css/       # 用于web开发时候使用，一般情况下只需引用这里的all.min.css即可正常使用fontawesome字体图标了）
    |-/js/        # 用于一些高级用法比如配合svg使用，以及图标/动画/旋转/蒙版/等等）
    |-/less/      # 字体图标 Less 样式文件
    |-/metadata/  # 图标集 Meta 数据文件
    |-/scss/      # 字体图标 Scss 样式文件
    |-/sprites/   # 字体图标 SVG合集文件
    |-/svgs/      # 这里有全部的单独的svg图标，可以用于PPT/Axure/等原型软件
    |-/webfonts/  # 核心字体文件

    vue组件版本

  3. 万金油解决方案xicons

    它整合了多个图标库得资源可以同时引入，并且保准风格一致，兼容vue/react和普通页面svg方式引入使用

    包含 vicons（vue3），ricons（react），sicons（svg）和 v2icons(vue2)。

    整合自 fluentui-system-icons、ionicons、ant-design-icons、material-design-icons、Font-Awesome tabler-icons 和 carbon 的 SVG Vue/React 组件。

    同时 xicons 提供了一些图标工具组件来自定义图标的颜色和尺寸。

vue3 路由传参，参数隐藏不在地址栏显示（history）

跳转

1
2
3
4
5
6
7
8
const SkipPage = (row) => {
    let obj = JSON.stringify(row)
    router.push({
        path: '/supplyDesc',
        state: { obj }
    })
}

接收

1
2
3
onMounted(()=>{
  console.log(JSON.parse(history.state.obj))
})

此方式传参页面刷新有效，且不能清空。除非修改history

1
2
3
4
5
// 清空当前页面的 history.state
history.pushState(null, null, location.href);
 
// 或者使用 replaceState 方法
history.replaceState(null, null, location.href);

主题相关函数

在全局状态中使用 theme 变量存储主题，这样就不用一个个得去修改相关得 element ui 组件了

theme.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
// 处理主题样式

export function handleThemeStyle(theme) {

  document.documentElement.style.setProperty('--el-color-primary', theme)

  for (let i = 1; i <= 9; i++) {

​    document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, `${getLightColor(theme, i / 10)}`)

  }

  for (let i = 1; i <= 9; i++) {

​    document.documentElement.style.setProperty(`--el-color-primary-dark-${i}`, `${getDarkColor(theme, i / 10)}`)

  }

}



// hex颜色转rgb颜色

export function hexToRgb(str) {

  str = str.replace('#', '')

  let hexs = str.match(/../g)

  for (let i = 0; i < 3; i++) {

​    hexs[i] = parseInt(hexs[i], 16)

  }

  return hexs

}



// rgb颜色转Hex颜色

export function rgbToHex(r, g, b) {

  let hexs = [r.toString(16), g.toString(16), b.toString(16)]

  for (let i = 0; i < 3; i++) {

​    if (hexs[i].length == 1) {

​      hexs[i] = `0${hexs[i]}`

​    }

  }

  return `#${hexs.join('')}`

}



// 变浅颜色值

export function getLightColor(color, level) {

  let rgb = hexToRgb(color)

  for (let i = 0; i < 3; i++) {

​    rgb[i] = Math.floor((255 - rgb[i]) * level + rgb[i])

  }

  return rgbToHex(rgb[0], rgb[1], rgb[2])

}



// 变深颜色值

export function getDarkColor(color, level) {

  let rgb = hexToRgb(color)

  for (let i = 0; i < 3; i++) {

​    rgb[i] = Math.floor(rgb[i] * (1 - level))

  }

  return rgbToHex(rgb[0], rgb[1], rgb[2])

}

初始化时加载主题, 如果还有配置页面也可以加上这个动作

1
2
3
4
5
6
7
8
9
import useSettingsStore from '@/store/modules/settings'
import { handleThemeStyle } from '@/utils/theme'

onMounted(() => {
  nextTick(() => {
    // 初始化主题样式
    handleThemeStyle(useSettingsStore().theme)
  })
})

echarts实现全国地图下钻到县级

思路，先有一个全国范围到县级（3级）的地图名称编码映射下载地址，然后去下载每个省份的地图（市级），及县级地图数据，每个省两个json数据【之前有想下载一个全国的地图作为省级，但是全国地图省级没有市级的范围，其实是可行的🧓🏽】,然后默认显示对应省份地图，每次点击后动态组装下级地图（例如：点击合肥市，就将合肥市下边所有县区级地图组装，县级就直接渲染），然后渲染出来

参考项目

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<!--
 * @Description: 
 * @Author:  
 * @Date: 2025-03-31 10:23:05
 * @LastEditTime: 2025-04-03 10:39:50
 * @LastEditors:  
-->
<template>
  <div class="chart-map-box">
    <div id="map-stack">
        
        <!-- 显示地图现在层级关系 -->
        <span  style="color: #fff;">{{ mapStack.join(' \/ ') }}</span>
    </div>
    <div id="btn-back">
        <el-button type="primary" icon="Back" size="small"  v-if="mapStack.length > 1" @click="back">上一级</el-button>
    </div>
    <div id="map" ref="mapRef"></div>
  </div>
</template>
<script setup>
import * as echarts from 'echarts'
import { onBeforeMount } from 'vue';
import { getMapOption } from '@/utils/chart'
import { listDevice } from "@/api/device/device";
import mapMap from '@/assets/json/map.json'
const { proxy } = getCurrentInstance()
let mapRef = ref(null)
let mapList = {}
let mapStack = ref([])
let points = ref([])
let myChart = null
let defaultProvince = ref('安徽省')
function loadJson (url, type="geo") {
    fetch(url)
    .then(res=>res.json())
    .then(function (geoJson) {
        if(type === 'geo') {
            geoJson.features.forEach(f => {
                mapList[f.properties.name] = f
            });
        }
    }).catch(function (error) {
        
    })
}
function loadMap(name, myChart) {
    let mapjson = {
        type: 'FeatureCollection',
        features: []
    }
    let [shengName = name, shiName,xianName] = mapStack.value
    let sheng = mapMap.find(f=> f.name === shengName)    
    let isZXS = sheng.children[0].name === '市辖区'//是否直辖市
    if(xianName) {
    let xian = mapList[xianName]
    if(xian) {
        mapjson.features.push(xian)
    }
    } else if(shiName) {
        let childrens =  isZXS? sheng.children.map(m=>m.children).flat(1) : sheng.children
        let shi = childrens.find(f=> f.name === shiName)
        if(isZXS) {
            mapjson.features.push(mapList[shi.name])
        } else {
            shi.children.forEach(c => {
                let xian = mapList[c.name]
                if(xian) {
                    mapjson.features.push(xian)
                }
            });
        }
    } else if(sheng) {
        let childrens = isZXS ? sheng.children.map(m=>m.children).flat(1) : sheng.children
        childrens.forEach(c => {
            let city = mapList[c.name]
            if(city) {
                mapjson.features.push(city)
            }
        });
    } else {
        return
    }
    myChart.hideLoading();
    echarts.registerMap('liaoning', mapjson);
    let pointSeries = {
        name: "设备",
        type: "effectScatter",
        coordinateSystem: "geo",
        symbolSize: 15, // 点的大小
        zlevel: 9,
        data: points.value || []
    };
    let options = getMapOption([pointSeries])
    myChart.setOption(options);
}
function back() {
    if(mapStack.value.length > 1) {
        mapStack.value.pop()
        loadMap(mapStack.value[mapStack.value.length - 1], myChart)
    }
}
async function loadDevice() {
    let rs;
    try {
        rs = await listDevice({
            pageSize: Number.MAX_SAFE_INTEGER
        });
    } catch (error) {
        rs = {
            rows: []
        }
    }
    points.value = rs?.rows.map(item=>{
        let { longitude, latitude } = item;
        if(!longitude || !latitude) return false
        return [longitude, latitude, item]
    }).filter(Boolean)

}
onBeforeMount(()=> {
    proxy.getConfigKey('sys.index.provinceMap').then(rs=>{
        if(rs.msg) {
            defaultProvince.value = rs.msg
            let code = mapMap.find(item=>item.name === rs.msg).code
            let fullCode = String(code).padEnd(6, '0')
            loadJson(`/json/${fullCode}_full.json`)
            loadJson(`/json/${fullCode}_full_district.json`)
        } else {
            loadJson('/json/340000_full.json')
            loadJson('/json/340000_full_district.json')
        }
    })
})
onMounted(async () => {
    myChart = echarts.init(mapRef.value);
    myChart.showLoading();
    await loadDevice()
    setTimeout(()=> {
      mapStack.value.push(defaultProvince.value)
      loadMap(defaultProvince.value, myChart)
    }, 500)
    let timeFn;
    //单击切换到省级地图，当mapCode有值,说明可以切换到下级地图
    myChart.on('click', function(params) {
        if(params.componentType !== "geo")return
        clearTimeout(timeFn);
        //由于单击事件和双击事件冲突，故单击的响应事件延迟250毫秒执行
        timeFn = setTimeout(function() {
            var name = params.name; //地区name
            if(defaultProvince.value.includes('市')) {
                if(mapStack.value.length === 2) return
            }
            if(mapStack.value.length === 3) return
            mapStack.value.push(name)
            loadMap(name, myChart);
        }, 250);
    });
  
})
</script>

<style lang="scss" scoped>
.chart-map-box {
  width: 100%;
  height: 100%;
  background: url('@/assets/images/bg_map02.png') 0 0/100% 100% no-repeat;
  position: relative;
  #map {
    width: 100%;
    height: 100%;
  }
  #map-stack {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1000;
    color: #fff;
    border-radius: 4px;
    padding: 5px 10px;
    cursor: pointer;
  }
  #btn-back {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
    color: #fff;
    border-radius: 4px;
    padding: 5px 10px;
    cursor: pointer;
  }
}
</style>

G6实现流程图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<template>
    <span class="iconfont icon-fanhui" style="position: absolute; visibility: hidden"></span>
    <div class="box">
        <div id="draw-box" ref="drawBoxRef"></div>
    </div>
</template>

<script setup>
import { Graph, NodeEvent, EdgeEvent } from '@antv/g6'
let { proxy } = getCurrentInstance()
aph = shallowRef(null)

const getChartDatas = async () => {
  return {
    nodes: [
      {
        id: '1',
        title: '新建项目',
        status: idArr.includes(1) ? 1 : 0,
        style: { x: 150, y: 20, iconText: '\ue7d1' }
      },
      {
        id: '2',
        title: '上传文件',
        status: idArr.includes(1) ? 1 : 0,
        style: { x: 150, y: 120, iconText: '\ue614' }
      },
      {
        id: '3',
        title: '人工审核',
        status: idArr.includes(2) || idArr.includes(0),
        style: { x: 150, y: 220, labelPlacement: 'right', labelOffsetY: -10, iconText: '\ue616' }
      },
      {
        id: '4',
        title: '审核是否通过',
        status: idArr.includes(3) || idArr.includes(4) || idArr.includes(5),
        style: { x: 150, y: 320, iconText: '\ue608' }
      },
      {
        id: '5',
        title: '审核通过',
        status: idArr.includes(5) ? 1 : 0,
        style: { x: 150, y: 450, iconText: '\ue622' }
      },
      {
        id: '6',
        title: '上传可研执复核',
        status: idArr.includes(3) ? 1 : 0,
        style: { x: 20, y: 320, labelPlacement: 'bottom', iconText: '\ue762' }
      },
      {
        id: '7',
        title: '预审通过',
        status: idArr.includes(0) ? 1 : 0,
        style: { x: 350, y: 220, labelPlacement: 'bottom', labelOffsetX: 0, iconText: '\ue606' }
      }
    ],
    edges: [
      { id: 'edge-1', source: '1', target: '2' },
      { id: 'edge-2', source: '2', target: '3' },
      { id: 'edge-3', source: '3', target: '4' },
      { id: 'edge-4', source: '4', target: '5', title: '是，通过' },
      { id: 'edge-5', source: '4', target: '6', title: '否，需复核' },
      { id: 'edge-6', source: '6', target: '3' },
      { id: 'edge-7', source: '7', target: '3', title: '预审通过' }
    ]
  }
}
const renderChart = async () => {
  graph.value = new Graph({
    container: proxy.$refs.drawBoxRef, //document.getElementById('draw-box'), // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身
    data: await getChartDatas(),
    // width: 350,
    // height: 800,
    autoFit: 'center',
    animation: false,
    node: {
      type: 'circle',
      style: {
        size: 40,
        radius: 8,
        labelPlacement: (d) => {
          return d.style?.labelPlacement || 'right'
        },
        labelText: (d) => d.title,
        labelOffsetX: (d) => d.style.labelOffsetX ?? 10,
        fill: (d) => (d.status ? '#27a4a8' : '#b2b2b2'),
        labelFill: (d) => (d.status ? '#27a4a8' : '#b2b2b2'),
        labelFontWeight: 'bold',
        labelWordWrap: true,
        labelMaxWidth: 80,
        labelMaxLines: 4,
        iconTextBaseline: 'middle',
        iconFontFamily: 'iconfont'
      }
    },
    edge: {
      type: 'polyline',
      style: {
        endArrow: true,
        lineWidth: 2,
        stroke: '#27a4a8',
        router: {
          type: 'orth'
        },
        labelOffsetY: (d) => d.style.labelOffsetY || 10,
        labelText: (d) => d.title,
        labelFill: '#b2b2b2'
        // labelAutoRotate: '90deg'
      }
    },
    behaviors: ['drag-canvas', 'zoom-canvas']
  })
  graph.value.render() //
  graph.value.on(NodeEvent.CLICK, (e) => {
    console.log('NodeEvent.CLICK', e)
  })
  graph.value.on(EdgeEvent.CLICK, (e) => {
    console.log('EdgeEvent.CLICK', e)
  })
}
onBeforeUnmount(() => {
  if (graph.value) {
    graph.value.destroy()
    graph.value = null
  }
})
watch(isShowModel, (val) => {
  if (val) {
    if (!graph.value) {
      setTimeout(() => {
        renderChart()
      }, 100)
      console.log('第一次')
    } else {
      graph.value.updateData(getChartDatas())
      // console.log('更新数据')
    }
  } else {
    graph.value?.destroy()
    graph.value = null
  }
})
</script>

<style lang="scss" scoped>
.box {
  width: 95%;
  margin: 0 auto;
  height: 480px;
  position: relative;
  z-index: 9999999;
  display: flex;
}
</style>

vue 国际化

vue-i18n 使用简单，很好入手

1
2
3
4
5
6
7
8
// translation.json
{
  "welcome": "欢迎进入",
  "greeting": "你好, | {name}!",
  "button": {
    "switchLang": "切换语言"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// src/i18n.js
import { createI18n } from 'vue-i18n'
// 导入语言资源
import translationEN from '@/assets/locales/en/translation.json';
import translationZH from '@/assets/locales/zh-CN/translation.json';
const vueI18n = createI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages: {
    'en': translationEN,
    'zh-CN': translationZH,
  }
})

export default vueI18n;
1
2
3
4
5
6
7
// main.js
import i18n from '@/components/i18n'; // 导入配置好的 i18n 实例
...
let app = createApp(App)
app.use(i18n)
app.use(router)
app.mount('#app')

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<template>
  <div>
    <div>
        <p>{{ title }}</p>
        <button @click="changeLanguage('en')">English</button>
        <button @click="changeLanguage('zh-CN')">中文</button>
    </div>
    <!-- 基础文本 -->
    <h1>{{ $t('welcome') }}</h1> <!-- 渲染：Welcome -->

    <!-- 嵌套结构（点语法） -->
    <button>{{ $t('button.switchLang') }}</button> <!-- 渲染：Switch Language -->

    <!-- 动态变量（传递参数） -->
    <p>{{ $t('greeting', { name: 'Vue' }) }}</p> <!-- 渲染：Hello, Vue! -->
  </div>
</template>

<script setup>
import { useI18n } from 'vue-i18n';

// 获取翻译函数和 i18n 实例
const { t, locale  } = useI18n();

// 切换语言的方法
const changeLanguage = (lng) => {
  locale.value = lng; 
};

// 在脚本中使用翻译
const title = t('welcome'); // title 的值为当前语言的 "welcome" 文本
</script>

展开全文 >>

linux 常用命令

用命令netstat查侦听端口

netstat 是一个命令行工具，可以提供有关网络连接的信息。

要列出正在侦听的所有TCP或UDP端口，包括使用端口和套接字状态的服务，请使用以下命令：

1
sudo netstat -tunlp

此命令中使用的选项具有以下含义：

  • -t - 显示TCP端口。
  • -u - 显示UDP端口。
  • -n - 显示数字地址而不是解析主机。
  • -l - 仅显示侦听端口。
  • -p - 显示监听器进程的PID和名称。仅当您以root或sudo用户身份运行命令时，才会显示此信息。
more >>

展开全文 >>

项目中遇到的样式问题

scss 文件引入样式不生效

​ vue + sacc 项目, 公用样式 common.scss 样式嵌套写法导入不生效

现象：样式表只有最外层样式生效，嵌套样式不生效（没有解析嵌套语法）

下面这种方式导入，样式不能嵌套写。 必须使用 层级选择器方式

1
@import url('@/style/common.scss');

解决：

1
@import '@/style/common.scss';
more >>

展开全文 >>

页面 rem 适配

rem 自适应方案

宽度 1920 时, 1rem 等于 100px.方便换算

1
2
3
4
5
6
7
8
9
10
11
12
(function(doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
    recalc = function() {
        var width = docEl.clientWidth / 19.20;
        docEl.style.fontSize = width + "px";
        scaleNum = width;
    };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener("DOMContentLoaded", recalc, false);
})(document, window);
more >>

展开全文 >>

patch-package

patch-package 这个库来解决这类问题。一方面，它能记录第三方库代码的改动，另一方面也能将改动同步到团队每个成员。

1
npm install patch-package -D

注意: 要改动的包在 package.json 中必须声明确定的版本，不能有~或者^的前缀。

more >>

展开全文 >>

typescript 语法基础

基本数据类型

number，string，boolean，symbol、bigint、object，null或undefined

基本类型

  • any 类型

    any 类型可以赋值任何类型，同样 any 类型可以赋值给其他类型造成污染

  • unkonwn 为避免any类型污染问题，unknown类型作用与any一致，但是它只能赋值到unknown/any类型的变量上

    要想使用 unknown 类型，必须缩小范围，否则无法使用

    • uknouwn运算有限， 只能进行比较运算（运算符==、===、!=、!==、||、&&、?）、取反运算（运算符!）、typeof运算符和instanceof运算符这几种

      1
      2
      3
      4
      5
      let a:unknown = 1;

      if (typeof a === 'number') {
        let r = a + 10; // 正确
      }
    1
    2
    3
    4
    5
    let a:unknown = 1;

    if (typeof a === 'number') {
      let r = a + 10; // 正确
    }

  • never

    为了保持与集合论的对应关系，以及类型运算的完整性，TypeScript 还引入了“空类型”的概念，即该类型为空，不包含任何值。

    由于不存在任何属于“空类型”的值，所以该类型被称为never，即不可能有这样的值。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    1、函数抛出错误，不可能有返回值
    function f():never {
      throw new Error('Error');
    }
    2、剩余的情况就属于never类型
    function fn(x:string|number) {
      if (typeof x === 'string') {
        // ...
      } else if (typeof x === 'number') {
        // ...
      } else {
        x; // never 类型
      }
    }
    3、变量x的类型是never，就不可能赋给它任何值，否则都会报错。
    let x:never;

  • object 类型

    大写的Object类型代表 JavaScript 语言里面的广义对象。所有可以转成对象的值，都是Object类型，这囊括了几乎所有的值。除了 Null / undefined

    1
    2
    3
    4
    5
    6
    7
    8
    let obj:Object;
     
    obj = true;
    obj = 'hi';
    obj = 1;
    obj = { foo: 123 };
    obj = [1, 2];
    obj = (a:number) => a + 1;

  • undefined/null

    既是值，又是类型。

    作为值，它们有一个特殊的地方：任何其他类型的变量都可以赋值为undefined或null。

1
2
3
4
5
6
7
8
9
const str: string = 'hello there'

const num: number = 123

const bool: boolean = false

let n: null = null

let u: undefined = undefined
more >>

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

侠客行
作者：李白
赵客缦胡缨，吴钩霜雪明。
银鞍照白马，飒沓如流星。
十步杀一人，千里不留行。
事了拂衣去，深藏身与名。
闲过信陵饮，脱剑膝前横。
将炙啖朱亥，持觞劝侯嬴。
三杯吐然诺，五岳倒为轻。
眼花耳热后，意气素霓生。
救赵挥金槌，邯郸先震惊。
千秋二壮士，烜赫大梁城。
纵死侠骨香，不惭世上英。
谁能书阁下，白首太玄经。