Browse Source

下拉框

master
jiangyy 2 years ago
parent
commit
e365052e8b
  1. 1449
      package-lock.json
  2. 1
      package.json
  3. 2
      src/App.vue
  4. 27
      src/components/index.js
  5. 159
      src/components/screen-dropdown-menu/index.vue
  6. 47
      src/components/svg-icon/index.vue
  7. 1
      src/components/svg-icon/svg/bottom-sword.svg
  8. 1
      src/components/svg-icon/svg/caidanzuo.svg
  9. 1
      src/components/svg-icon/svg/down-sword.svg
  10. 1
      src/components/svg-icon/svg/jiaose.svg
  11. 1
      src/components/svg-icon/svg/jigou.svg
  12. 1
      src/components/svg-icon/svg/paixu.svg
  13. 1
      src/components/svg-icon/svg/quanxian.svg
  14. 1
      src/components/svg-icon/svg/shouye.svg
  15. 1
      src/components/svg-icon/svg/shuangjiantouyou.svg
  16. 1
      src/components/svg-icon/svg/shuangjiantouzuo.svg
  17. 1
      src/components/svg-icon/svg/tip.svg
  18. 1
      src/components/svg-icon/svg/yonghu.svg
  19. 2
      src/main.js
  20. 7
      src/store/index.js
  21. 56
      src/store/modules/standardScreen.js
  22. 236
      src/views/agencySelect copy.vue
  23. 239
      src/views/agencySelect.vue
  24. 16
      src/views/index.vue
  25. 159
      vue.config.js

1449
package-lock.json

File diff suppressed because it is too large

1
package.json

@ -32,6 +32,7 @@
"eslint-plugin-vue": "^8.0.3",
"sass": "^1.32.7",
"sass-loader": "^12.0.0",
"svg-sprite-loader": "^6.0.11",
"vue-template-compiler": "^2.6.14"
},
"eslintConfig": {

2
src/App.vue

@ -14,7 +14,7 @@ body {
#app {
width: 100%;
height: 100vh;
overflow: hidden;
// overflow: hidden;
position: relative;
}
</style>

27
src/components/index.js

@ -0,0 +1,27 @@
import Vue from 'vue'
/**
* 在src/components下的组件会自动注册为全局组件
*
* require.context()方法
* 作用创建当前模块的上下文
* 用法require.context(directory, flag, regExp)
* directory: 要导入的当前模块的文件夹目录
* flag: 是否搜索当前路径的子目录
* regExp: 要匹配的文件
*/
const components = require.context('components/', true, /\.vue$/)
components.keys().forEach((filename) => {
const arr = filename
.replace(/\.\//, '')
.replace(/\.vue$/, '')
.split('/')
const componentName = arr[arr.length - 2]
const componentConfig = components(filename).default
Vue.component(componentName, componentConfig)
})
const requireAll = (requireContext) => requireContext.keys().map(requireContext)
const req = require.context('./svg-icon/svg', false, /\.svg$/)
requireAll(req)

159
src/components/screen-dropdown-menu/index.vue

@ -0,0 +1,159 @@
<template>
<div class="screen-dropdown-menu"
:style="{height: dropdownMenuVisible ? dataList.length > 4 ? '260px' : `${dataList.length * 50 + 10}px` : '0px', opacity: dropdownMenuVisible ? '1' : '0', '--top': top }">
<div class="screen-dropdown-menu-border"
:style="{overflowY: dataList.length > 5 ? 'auto' : 'hidden'}">
<div :class="['screen-dropdown-menu-item', item.select ? 'screen-dropdown-menu-item-active' : '']"
@click.stop="onChooseItem(item)"
v-for="item in dataList"
:key="item.value">{{item.label}}</div>
</div>
<div class="screen-dropdown-menu-arrow"></div>
</div>
</template>
<script>
export default {
name: 'screen-dropdown-menu',
data () {
return {
dataList: [],
dropdownMenuVisible: true
}
},
props: {
menuList: {
type: Array,
required: true,
default: () => []
},
defaultSelected: {
type: String | Number,
default: () => ''
},
visible: {
type: Boolean,
default: () => false
},
top: {
type: String,
default: '60px'
}
},
watch: {
//
menuList: {
immediate: true,
handler: function (value) {
if (value.length > 0) {
value.forEach(item => {
item.select = false
})
this.dataList = value
}
}
},
// item
defaultSelected: {
immediate: true,
handler: function (value) {
this.dataList.forEach(item => {
if (item.value === value) {
item.select = true
}
})
}
},
//
visible: {
immediate: true,
handler: function (value) {
this.dropdownMenuVisible = value
}
}
},
methods: {
onChooseItem (item) {
this.dataList.forEach(data => {
if (data.value === item.value) {
data.select = true
} else {
data.select = false
}
})
this.$emit('onChooseItem', item)
this.dropdownMenuVisible = false
this.$emit('update:visible', false)
}
}
}
</script>
<style lang="scss" scoped>
.screen-dropdown-menu {
width: 100%;
position: absolute;
// box-shadow: 0 2px 12px 0 #5c7bc7;
border: 1px solid #00a4b9;
background: rgba(4, 39, 50, 0.8);
z-index: 100;
left: 0;
top: var(--top);
border-radius: 4px;
max-height: 260px;
transition: height 0.1s linear, opacity 0.1s linear;
&-border {
width: 100%;
height: 100%;
overflow-y: auto;
border-radius: 4px;
box-sizing: border-box;
padding: 10px 0 0;
&::-webkit-scrollbar {
/*滚动条整体样式*/
width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
&::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 10px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #2bccff;
}
&::-webkit-scrollbar-track {
/*滚动条里面轨道*/
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 10px;
background: #061836;
}
}
&-item {
width: 100%;
height: 50px;
line-height: 50px;
text-align: left;
color: #fff;
font-size: 14px;
box-sizing: border-box;
padding: 0 12px;
&:hover {
color: #fff;
background: rgba(0, 205, 236);
}
}
.screen-dropdown-menu-item-active {
color: #fff;
background: rgba(0, 205, 236);
}
&-arrow {
position: absolute;
width: 0px;
height: 0px;
top: -12px;
left: 35px;
border: 6px solid transparent;
border-bottom: 6px solid #061a3b;
}
}
</style>

47
src/components/svg-icon/index.vue

@ -0,0 +1,47 @@
<template>
<svg :class="svgClass"
aria-hidden="true"
:style="{fill:fill}">
<use :xlink:href="iconName"></use>
</svg>
</template>
<script>
export default {
name: 'svg-icon',
props: {
iconClass: {
type: String,
required: true
},
className: {
type: String
},
fill: {
type: String,
default: 'currentColor'
}
},
computed: {
iconName () {
return `#icon-${this.iconClass}`
},
svgClass () {
if (this.className) {
return 'svg-icon ' + this.className
} else {
return 'svg-icon'
}
}
}
}
</script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
overflow: hidden;
}
</style>

1
src/components/svg-icon/svg/bottom-sword.svg

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="64px" height="64.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M460.8 755.2a26.112 26.112 0 0 1-18.944-8.704L97.792 363.008a25.6 25.6 0 1 1 37.888-34.304L460.8 691.2l326.656-363.008a25.6 25.6 0 0 1 37.888 34.304L481.28 747.008a26.112 26.112 0 0 1-20.48 8.192z" /></svg>

After

Width:  |  Height:  |  Size: 472 B

1
src/components/svg-icon/svg/caidanzuo.svg

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="64px" height="64.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#333333" d="M917.333333 789.12a21.333333 21.333333 0 0 1 21.333334 21.333333v42.666667a21.333333 21.333333 0 0 1-21.333334 21.333333h-810.666666a21.333333 21.333333 0 0 1-21.333334-21.333333v-42.666667a21.333333 21.333333 0 0 1 21.333334-21.333333h810.666666zM255.701333 380.16L256 383.786667v256a21.333333 21.333333 0 0 1-33.621333 17.493333l-2.816-2.389333-128-128a21.333333 21.333333 0 0 1-2.432-27.221334l2.432-2.986666 128-128a21.333333 21.333333 0 0 1 36.138666 11.434666zM917.333333 575.786667a21.333333 21.333333 0 0 1 21.333334 21.333333v42.666667a21.333333 21.333333 0 0 1-21.333334 21.333333h-512a21.333333 21.333333 0 0 1-21.333333-21.333333v-42.666667a21.333333 21.333333 0 0 1 21.333333-21.333333h512z m0-213.333334a21.333333 21.333333 0 0 1 21.333334 21.333334v42.666666a21.333333 21.333333 0 0 1-21.333334 21.333334h-512a21.333333 21.333333 0 0 1-21.333333-21.333334v-42.666666a21.333333 21.333333 0 0 1 21.333333-21.333334h512z m0-213.333333a21.333333 21.333333 0 0 1 21.333334 21.333333v42.666667a21.333333 21.333333 0 0 1-21.333334 21.333333h-810.666666a21.333333 21.333333 0 0 1-21.333334-21.333333v-42.666667a21.333333 21.333333 0 0 1 21.333334-21.333333h810.666666z" /></svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

1
src/components/svg-icon/svg/down-sword.svg

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="64px" height="64.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M915.110634 526.94854c-11.698858-11.698858-30.697002-11.698858-42.39586 0L490.852065 908.711259c-11.698858 11.698858-11.698858 30.697002 0 42.395859s30.697002 11.698858 42.39586 0l381.762718-381.762718c11.798848-11.698858 11.798848-30.697002 0.099991-42.39586zM534.247827 908.811249l-381.962699-381.962699c-11.698858-11.698858-30.697002-11.698858-42.395859 0s-11.698858 30.697002 0 42.39586l381.962699 381.962699c11.698858 11.698858 30.697002 11.698858 42.395859 0s11.698858-30.697002 0-42.39586zM915.110634 72.992872c-11.698858-11.698858-30.697002-11.698858-42.39586 0L490.852065 454.75559c-11.698858 11.698858-11.698858 30.697002 0 42.39586s30.697002 11.698858 42.39586 0l381.762718-381.762718c11.798848-11.698858 11.798848-30.697002 0.099991-42.39586zM534.247827 454.855581l-381.962699-381.962699c-11.698858-11.698858-30.697002-11.698858-42.395859 0s-11.698858 30.697002 0 42.395859l381.962699 381.962699c11.698858 11.698858 30.697002 11.698858 42.395859 0s11.698858-30.697002 0-42.395859z" /></svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

1
src/components/svg-icon/svg/jiaose.svg

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="64px" height="64.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M750.231 668.295c-55.296 0-100.286 45.005-100.286 100.3 0 55.307 44.99 100.311 100.286 100.311 55.311 0 100.301-45.004 100.301-100.31 0-55.296-44.99-100.3-100.3-100.3z m0 148.925c-26.81 0-48.614-21.814-48.614-48.624 0-26.8 21.804-48.615 48.614-48.615 26.815 0 48.63 21.815 48.63 48.615 0 26.81-21.815 48.624-48.63 48.624z m265.185-101.027c-3.764-19.862-16.509-32.7-32.873-32.7h-2.27c-31.306 0-56.79-25.47-56.79-56.77 0-8.22 3.595-18.319 4.96-21.484 7.75-17.457 1.786-38.882-15.44-50.81l-66.399-36.765c-5.202-2.246-10.826-3.393-16.716-3.393-12.027 0-23.911 4.9-31.785 13.061-8.274 8.526-30.242 26.122-45.375 26.122-15.272 0-37.379-17.937-45.667-26.592-7.913-8.363-19.906-13.358-32.067-13.358-5.826 0-11.365 1.113-16.34 3.264l-1.242 0.51-67.57 37.111-1.608 1.039c-15.707 10.93-21.706 32.344-14.006 49.648 0.514 1.236 5.03 12.226 5.03 21.647 0 31.3-25.48 56.77-56.8 56.77h-2.646c-15.966 0-28.72 12.838-32.482 32.72-0.574 3.056-5.603 30.518-5.603 52.72 0 22.21 5.03 49.667 5.603 52.753 3.76 19.857 16.505 32.695 32.878 32.695h2.245c31.32 0 56.805 25.475 56.805 56.77 0 8.22-3.596 18.319-4.96 21.489-7.74 17.433-1.796 38.837 15.37 50.805l65.148 36.3c5.193 2.256 10.816 3.423 16.72 3.423 12.246 0 24.259-5.124 32.107-13.684 8.022-8.71 30.806-27.785 46.37-27.785 15.727 0 38.254 19.115 46.676 28.353 7.903 8.71 19.995 13.902 32.339 13.902 5.806 0 11.335-1.112 18.056-4.09l65.87-36.394 1.577-1.044c15.688-10.904 21.672-32.299 13.981-49.623-0.514-1.241-5.03-12.226-5.03-21.652 0-31.295 25.485-56.77 56.79-56.77h2.617c15.999 0 28.758-12.838 32.507-32.645 0.05-0.277 5.618-29.446 5.618-52.804 0-22.2-5.025-49.663-5.598-52.74z m-49.36 87.432c-53.487 6.998-94.238 52.67-94.238 107.526 0 12.666 3.056 24.693 5.746 32.834l-47.531 26.275c-4.273-4.188-11.093-10.464-19.545-16.73-21.009-15.589-41.36-23.521-60.47-23.521-18.95 0-39.138 7.779-60.019 23.08a191.197 191.197 0 0 0-19.42 16.405l-45.435-25.42c2.695-8.155 5.776-20.257 5.776-32.923 0-54.856-40.742-100.528-94.233-107.526-1.37-8.852-3.288-23.284-3.288-34.693 0-11.459 1.909-25.85 3.288-34.678 53.482-7.003 94.233-52.685 94.233-107.531 0-12.631-3.056-24.654-5.742-32.8L674.238 567c4.258 4.006 11.088 10.035 19.48 16.01 20.599 14.682 40.46 22.135 59.01 22.135 18.369 0 38.062-7.31 58.522-21.72 8.323-5.846 15.064-11.692 19.356-15.678l46.978 26.103c-2.69 8.15-5.761 20.207-5.761 32.873 0 54.856 40.736 100.528 94.222 107.53 1.4 9.012 3.304 23.374 3.304 34.689-0.001 11.39-1.9 25.707-3.294 34.683zM70.033 950.483v-56.8c0-193.123 148.93-352.285 338.673-370.222l-0.082-0.04s0.191 0 0.495 0.01c11.632-1.093 23.4-1.706 35.313-1.706 1.793 0 3.56 0.099 5.346 0.119 41.963-3.255 105.46-13.114 138.644-42.735l16.241-12.658c63.442-49.541 99.83-123.556 99.83-203.053 0-142.45-116.68-258.334-260.112-258.334S184.27 120.948 184.27 263.397c0 79.497 36.39 153.512 99.832 203.053l16.237 12.658-19.132 7.596C112.198 553.807 2.99 713.552 2.99 893.684v90.028c0 18.329 15.027 33.24 33.516 33.24h489.767c-15.944-20.42-29.535-42.696-40.52-66.469H70.033z m181.28-687.086c0-105.8 86.606-191.87 193.068-191.87 106.46 0 193.08 86.07 193.08 191.87 0 105.802-86.62 191.868-193.08 191.868-106.462-0.001-193.069-86.066-193.069-191.868z" /></svg>

After

Width:  |  Height:  |  Size: 3.3 KiB

1
src/components/svg-icon/svg/jigou.svg

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="64px" height="64.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M844.8 404.48h-136.704V148.48c0-42.496-34.304-76.8-76.8-76.8h-450.56c-42.496 0-76.8 34.304-76.8 76.8v721.92c0 42.496 34.304 76.8 76.8 76.8h450.56c4.096 0 8.192-0.512 11.776-1.024 4.096 0.512 8.192 1.024 11.776 1.024h189.44c42.496 0 76.8-34.304 76.8-76.8V481.28c0.512-42.496-33.792-76.8-76.288-76.8zM155.136 870.4V148.48c0-14.336 11.264-25.6 25.6-25.6h450.56c14.336 0 25.6 11.264 25.6 25.6v721.92c0 1.536 0 3.072-0.512 4.096-1.536 8.192-7.168 15.872-15.36 18.944-1.536 0.512-2.56 1.024-4.096 1.536-2.048 0.512-4.096 0.512-6.144 0.512h-450.56c-13.312 0.512-25.088-10.752-25.088-25.088z m715.264 0c0 14.336-11.264 25.6-25.6 25.6h-140.8c0.512-1.024 0.512-1.536 1.024-2.56s0.512-2.048 1.024-3.584c0.512-1.024 0.512-2.048 0.512-3.072 0-1.024 0.512-2.048 0.512-3.072 0-1.536 0.512-2.56 0.512-4.096 0-1.024 0-1.536 0.512-2.56 0-2.048 0.512-4.608 0.512-6.656V455.68H844.8c14.336 0 25.6 11.264 25.6 25.6v389.12z" /><path d="M547.84 353.28H266.24c-14.336 0-25.6 11.264-25.6 25.6s11.264 25.6 25.6 25.6h281.6c14.336 0 25.6-11.264 25.6-25.6s-11.264-25.6-25.6-25.6zM547.84 542.72H266.24c-14.336 0-25.6 11.264-25.6 25.6s11.264 25.6 25.6 25.6h281.6c14.336 0 25.6-11.264 25.6-25.6s-11.264-25.6-25.6-25.6z" /></svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

1
src/components/svg-icon/svg/paixu.svg

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="64px" height="64.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M156.392727 656.523636a43.52 43.52 0 0 1 61.207273 7.214546l113.105455 144.058182V90.298182a43.752727 43.752727 0 1 1 87.272727 0v843.403636a43.752727 43.752727 0 0 1-29.323637 41.425455 42.123636 42.123636 0 0 1-14.196363 2.327272 43.287273 43.287273 0 0 1-34.210909-16.756363L148.945455 717.730909a43.52 43.52 0 0 1 7.447272-61.207273zM634.414545 48.872727a43.752727 43.752727 0 0 1 48.64 14.429091l191.069091 242.967273a43.752727 43.752727 0 1 1-69.818181 53.992727l-111.941819-144.058182v717.498182a43.752727 43.752727 0 1 1-87.272727 0V90.298182a44.218182 44.218182 0 0 1 29.323636-41.425455z" /></svg>

After

Width:  |  Height:  |  Size: 872 B

1
src/components/svg-icon/svg/quanxian.svg

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="64px" height="64.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 472.5248c79.3088 0 143.8208-64.6656 143.8208-144.0768C655.8208 248.9856 591.3088 184.32 512 184.32S368.1792 248.9856 368.1792 328.3968c0 79.4624 64.5632 144.128 143.8208 144.128z m0-236.9024c51.0464 0 92.6208 41.6256 92.6208 92.7744S563.0464 421.2224 512 421.2224s-92.6208-41.6256-92.6208-92.8256c0-51.1488 41.5744-92.7744 92.6208-92.7744zM459.9808 788.3776H235.52v-48.4864c0-78.6432 63.8976-142.6432 142.3872-142.6432h204.3392c14.1312 0 25.6-11.4688 25.6-25.6512s-11.4688-25.6512-25.6-25.6512h-204.288c-106.752 0-193.5872 86.9888-193.5872 193.9456V839.68h275.6608c14.1312 0 25.6-11.4688 25.6-25.6512-0.0512-14.1824-11.52-25.6512-25.6512-25.6512zM811.3152 571.5968c-37.7856-37.8368-99.2768-37.8368-137.0624 0-31.5392 31.5904-36.6592 79.616-15.616 116.6848l-107.4176 107.6224c-9.984 10.0352-9.984 26.2656 0 36.2496 5.0176 5.0176 11.5712 7.5264 18.1248 7.5264s13.1072-2.5088 18.1248-7.5264l36.5056-36.5568 8.192 8.192c5.0176 5.0176 11.5712 7.5264 18.1248 7.5264s13.1072-2.5088 18.1248-7.5264c9.984-10.0352 9.984-26.2656 0-36.2496l-8.192-8.192 34.6624-34.7648c14.4384 8.2944 30.8736 12.8 47.9744 12.8 25.9072 0 50.2272-10.0864 68.5568-28.4672 37.6832-37.8368 37.6832-99.4816-0.1024-137.3184z m-36.1984 101.0688c-17.8176 17.8688-46.848 17.8688-64.6656 0-17.8176-17.8688-17.8176-46.9504 0-64.768 8.9088-8.9088 20.6336-13.4144 32.3584-13.4144s23.3984 4.4544 32.3584 13.4144c17.7664 17.8176 17.7664 46.8992-0.0512 64.768z" /></svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

1
src/components/svg-icon/svg/shouye.svg

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="64px" height="58.83px" viewBox="0 0 1114 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M993.886268 442.729412V963.764706a60.235294 60.235294 0 0 1-60.235294 60.235294h-231.755294a60.235294 60.235294 0 0 1-60.235294-60.235294v-241.664h-176.609882V963.764706a60.235294 60.235294 0 0 1-60.235295 60.235294H180.709798a60.235294 60.235294 0 0 1-60.235294-60.235294V445.44l-70.987295 59.512471a30.117647 30.117647 0 1 1-38.731294-46.140236l538.744471-451.764706a30.117647 30.117647 0 0 1 39.183059 0.421647l515.403294 451.764706a30.117647 30.117647 0 0 1-39.695059 45.296942L993.886268 442.729412z m-60.205176-52.766118L568.414268 69.812706 180.709798 394.872471V963.764706h224.105411v-241.664a60.235294 60.235294 0 0 1 60.235295-60.235294h176.609882a60.235294 60.235294 0 0 1 60.235294 60.235294V963.764706H933.650974V391.529412l0.030118-1.566118z" /></svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

1
src/components/svg-icon/svg/shuangjiantouyou.svg

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="64px" height="64.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M790.8 490.8L489 189c-11.7-11.7-30.7-11.7-42.4 0s-11.7 30.7 0 42.4L727.1 512 446.6 792.5c-11.7 11.7-11.7 30.7 0 42.4 5.9 5.9 13.5 8.8 21.2 8.8s15.4-2.9 21.2-8.8l301.7-301.8c11.8-11.6 11.8-30.6 0.1-42.3z m-213.4 0L275.7 189c-11.7-11.7-30.7-11.7-42.4 0s-11.7 30.7 0 42.4L513.8 512 233.3 792.5c-11.7 11.7-11.7 30.7 0 42.4 5.9 5.9 13.5 8.8 21.2 8.8s15.4-2.9 21.2-8.8l301.7-301.8c11.8-11.6 11.8-30.6 0-42.3z" /></svg>

After

Width:  |  Height:  |  Size: 677 B

1
src/components/svg-icon/svg/shuangjiantouzuo.svg

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="64px" height="64.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M296.9 512l280.5-280.5c11.7-11.7 11.7-30.7 0-42.4s-30.7-11.7-42.4 0L233.3 490.8c-11.7 11.7-11.7 30.7 0 42.4L535 835c5.9 5.9 13.5 8.8 21.2 8.8 7.7 0 15.4-2.9 21.2-8.8 11.7-11.7 11.7-30.7 0-42.4L296.9 512z m493.9 280.5L510.2 512l280.5-280.5c11.7-11.7 11.7-30.7 0-42.4s-30.7-11.7-42.4 0L446.6 490.8c-11.7 11.7-11.7 30.7 0 42.4L748.3 835c5.9 5.9 13.5 8.8 21.2 8.8 7.7 0 15.4-2.9 21.2-8.8 11.8-11.8 11.8-30.7 0.1-42.5z" /></svg>

After

Width:  |  Height:  |  Size: 688 B

1
src/components/svg-icon/svg/tip.svg

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="64px" height="64.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 0C229.376 0 0 229.376 0 512s229.376 512 512 512 512-229.376 512-512S794.624 0 512 0z m0 951.296c-242.176 0-439.296-197.12-439.296-439.296S269.824 72.704 512 72.704s439.296 197.12 439.296 439.296-197.12 439.296-439.296 439.296zM512 592.896c-17.408 0-31.744-13.312-33.28-30.72l-19.456-240.64c-1.536-19.456 13.824-35.84 33.28-35.84h38.4c19.456 0 34.816 16.384 33.28 35.84l-19.456 240.64c-1.024 17.408-15.36 30.72-32.768 30.72zM512 683.008m-55.296 0a55.296 55.296 0 1 0 110.592 0 55.296 55.296 0 1 0-110.592 0Z" /></svg>

After

Width:  |  Height:  |  Size: 786 B

1
src/components/svg-icon/svg/yonghu.svg

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="64px" height="64.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 496c-124.8 0-224-99.2-224-224s99.2-224 224-224 224 99.2 224 224-99.2 224-224 224z m0-384c-89.6 0-160 70.4-160 160s70.4 160 160 160 160-70.4 160-160-70.4-160-160-160zM880 976h-736C99.2 976 64 940.8 64 896c0-156.8 150.4-384 384-384h128c233.6 0 384 227.2 384 384 0 44.8-35.2 80-80 80zM448 576C256 576 128 768 128 896c0 9.6 6.4 16 16 16h736c9.6 0 16-6.4 16-16 0-128-128-320-320-320h-128z" /></svg>

After

Width:  |  Height:  |  Size: 663 B

2
src/main.js

@ -4,6 +4,8 @@ import router from './router'
import store from './store'
import App from './App.vue'
import 'components/index' //注册components下的组件
import './style/global.scss'
import './style/font.scss' // 字体文件

7
src/store/index.js

@ -1,10 +1,7 @@
import Vue from 'vue'
import Vuex from 'vuex'
import basic from './modules/basic'
import shibeiScreen from './modules/shibeiScreen'
import standardScreen from './modules/standardScreen'
import getters from './getter'
Vue.use(Vuex)
@ -12,9 +9,7 @@ Vue.use(Vuex)
export default new Vuex.Store({
modules: {
basic,
shibeiScreen,
standardScreen
shibeiScreen
},
getters
})

56
src/store/modules/standardScreen.js

@ -1,56 +0,0 @@
export default {
state: {
standardScale: 1,
standardAId: '1175270520603930625',
// standardAId: '66f3987a8ea0261a6693689689f9e56b',
standardAgencyType: 'district',
standardMapCenter: [120.364165, 36.103091],
// standardMapCenter: [120.312565, 36.021688],
standardProjectBoxVisible: false, // 难点堵点项目详情弹窗
standardProjectId: '' // 难点堵点项目id
},
mutations: {
set_standardScale (state, standardScale) {
state = Object.assign(state, { standardScale })
},
// 组织机构id
set_standardAgencyId (state, agencyId) {
state.standardAId = agencyId
},
// 组织机构类型(街道-district,社区-community, 网格-grid)
set_standardAgencyType (state, standardAgencyType) {
state.standardAgencyType = standardAgencyType
},
set_standardMapCenter (state, standardMapCenter) {
state.standardMapCenter = standardMapCenter
},
// 难点堵点项目详情弹窗visible
set_standardProjectBoxVisible (state, standardProjectBoxVisible) {
state.standardProjectBoxVisible = standardProjectBoxVisible
},
// 难点堵点项目id
set_standardProjectId (state, standardProjectId) {
state.standardProjectId = standardProjectId
}
},
actions: {
SET_STANDARDSCALE ({ commit }, standardScale) {
commit('set_standardScale', standardScale)
},
SET_STANDARDAGENCYID ({ commit }, agencyId) {
commit('set_standardAgencyId', agencyId)
},
SET_STANDARDAGENCYTYPE ({ commit }, agencyType) {
commit('set_standardAgencyType', agencyType)
},
SET_STANDARDMAPCENTER ({ commit }, standardMapCenter) {
commit('set_standardMapCenter', standardMapCenter)
},
SET_STANDARDPROJECTBOXVISIBLE ({ commit }, standardProjectBoxVisible) {
commit('set_standardProjectBoxVisible', standardProjectBoxVisible)
},
SET_STANDARDPROJECTID ({ commit }, standardProjectId) {
commit('set_standardProjectId', standardProjectId)
}
}
}

236
src/views/agencySelect copy.vue

@ -0,0 +1,236 @@
<template>
<div class="agency-select">
<div class="item">{{cityName}}</div>
<div class="item">{{districtName}}</div>
<div class="item"
ref="street"
@click="onChangeStreet">
<div>{{selectStreet.label === '全部党工委' ? '党工委' : selectStreet.label}}</div>
<svg-icon icon-class="bottom-sword"
fill="#fff">
</svg-icon>
<screen-dropdown-menu top="40px"
:menuList="streetList"
:visible.sync="streetDropMenuVisible"
:defaultSelected="selectStreet.value"
@onChooseItem="onChooseStreet">
</screen-dropdown-menu>
</div>
<div class="item"
ref="community"
@click="onChangeCommunity">
<div>{{selectCommunity.label === '全部社区' ? '社区' : selectCommunity.label}}</div>
<svg-icon icon-class="bottom-sword"
fill="#fff">
</svg-icon>
<screen-dropdown-menu top="40px"
:menuList="communityList"
:visible.sync="communityDropMenuVisible"
:defaultSelected="selectCommunity.value"
@onChooseItem="onChooseCommunity">
</screen-dropdown-menu>
</div>
</div>
</template>
<script>
// import { getOrgTree } from 'api/shibeiScreen/screenContentLeft'
import { mapGetters, mapActions } from 'vuex'
export default {
name: 'agency-select',
data () {
return {
streetList: [],
communityList: [{
label: '全部社区',
value: '',
center: []
}],
selectStreet: {
label: '全部党工委',
value: '',
center: []
},
selectCommunity: {
label: '全部社区',
value: '',
center: []
},
streetDropMenuVisible: false,
communityDropMenuVisible: false,
cityName: '青岛市',
districtName: ''
}
},
created () {
// this.getOrgTree()
},
computed: {
...mapGetters(['shibeiAId', 'shibeiAgencyType'])
},
watch: {
shibeiAId (value) {
if (this.shibeiAgencyType === 'district') {
this.communityList = [{ label: '全部社区', value: '', center: [] }]
this.selectStreet = { label: '全部党工委', value: '', center: [] }
this.selectCommunity = { label: '全部社区', value: '', center: [] }
} else if (this.shibeiAgencyType === 'community') {
const item = this.streetList.find(item => item.value === this.shibeiAId)
this.selectStreet = { label: item.label, value: item.value, center: item.centerMark }
this.selectCommunity = { label: '全部社区', value: '', center: [] }
this.communityList = [{
label: '全部社区', value: '', center: []
}]
this.communityList = [...this.communityList, ...item.children]
} else if (this.shibeiAgencyType === 'grid') {
this.recurrenceAgencyId(this.shibeiAId, this.streetList)
}
}
},
mounted () {
window.addEventListener('click', e => {
if (this.$refs.street && !this.$refs.street.contains(e.target)) {
if (this.streetDropMenuVisible) {
this.streetDropMenuVisible = !this.streetDropMenuVisible
}
}
if (this.$refs.community && !this.$refs.community.contains(e.target)) {
if (this.communityDropMenuVisible) {
this.communityDropMenuVisible = !this.communityDropMenuVisible
}
}
})
},
methods: {
...mapActions({
set_shibeiAgencyId: 'SET_SHIBEIAGENCYID',
set_shibeiAgencyType: 'SET_SHIBEIAGENCYTYPE',
set_shibeiMapCenter: 'SET_SHIBEIMAPCENTER'
}),
async getOrgTree () {
try {
const res = await getOrgTree()
console.log(res)
this.streetList = []
this.streetList.push({
label: '全部党工委',
value: '',
center: [],
children: []
})
this.districtName = res.data.label
this.streetList = [...this.streetList, ...res.data.children]
} catch (err) {
console.error(err)
}
},
onChangeStreet () {
this.streetDropMenuVisible = !this.streetDropMenuVisible
},
onChangeCommunity () {
this.communityDropMenuVisible = !this.communityDropMenuVisible
},
onChooseStreet (item) {
this.selectStreet = {
label: item.label,
value: item.value,
center: item.centerMark || item.center || []
}
this.selectCommunity = {
label: '全部社区',
value: '',
center: []
}
this.communityList = []
this.communityList.push({
label: '全部社区',
value: '',
center: []
})
this.communityList = [...this.communityList, ...item.children]
if (this.selectCommunity.value) {
this.set_shibeiAgencyId(this.selectCommunity.value)
this.set_shibeiAgencyType('grid')
this.set_shibeiMapCenter(this.selectCommunity.center)
} else if (this.selectStreet.value) {
this.set_shibeiAgencyId(this.selectStreet.value)
this.set_shibeiAgencyType('community')
this.set_shibeiMapCenter(this.selectStreet.center)
} else {
// this.set_shibeiAgencyId('66f3987a8ea0261a6693689689f9e56b')
this.set_shibeiAgencyId('1175270520603930625')
this.set_shibeiAgencyType('district')
// this.set_shibeiMapCenter([120.312565, 36.021688])
this.set_shibeiMapCenter([120.364165, 36.103091])
}
},
onChooseCommunity (item) {
this.selectCommunity = {
label: item.label,
value: item.value,
center: item.centerMark
}
if (this.selectCommunity.value) {
this.set_shibeiAgencyId(this.selectCommunity.value)
this.set_shibeiAgencyType('grid')
this.set_shibeiMapCenter(this.selectCommunity.center)
} else if (this.selectStreet.value) {
this.set_shibeiAgencyId(this.selectStreet.value)
this.set_shibeiAgencyType('community')
this.set_shibeiMapCenter(this.selectStreet.center)
} else {
// this.set_shibeiAgencyId('66f3987a8ea0261a6693689689f9e56b')
this.set_shibeiAgencyId('1175270520603930625')
this.set_shibeiAgencyType('district')
// this.set_shibeiMapCenter([120.312565, 36.021688])
this.set_shibeiMapCenter([120.364165, 36.103091])
}
},
recurrenceAgencyId (agencyId, list) {
try {
list.forEach(item => {
if (item.children && item.children.length > 0) {
if (item.value === agencyId) {
throw (item)
} else {
if (item.children && item.children.length > 0) {
this.recurrenceAgencyId(agencyId, item.children)
}
}
}
})
} catch (err) {
this.selectCommunity = { label: err.label, value: err.value, center: err.centerMark }
}
}
}
}
</script>
<style lang="scss" scoped>
.agency-select {
width: 100%;
height: 40px;
box-sizing: border-box;
padding-bottom: 8px;
display: flex;
align-items: center;
.item {
width: 100%;
height: 32px;
background: #031b3d;
border: 1px solid #03327e;
border-radius: 3px;
color: #fefefe;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 0 17px;
position: relative;
& + .item {
margin-left: 12px;
}
}
}
</style>

239
src/views/agencySelect.vue

@ -1,15 +1,16 @@
<template>
<div class="agency-select">
<div class="item">{{cityName}}</div>
<div class="item">{{districtName}}</div>
<div class="name-item">{{cityName}}</div>
<div class="name-item">{{districtName}}</div>
<div class="item"
ref="street"
@click="onChangeStreet">
<div>{{selectStreet.label === '全部党工委' ? '党工委' : selectStreet.label}}</div>
<svg-icon icon-class="bottom-sword"
fill="#fff">
fill="#8ec6d8">
</svg-icon>
<screen-dropdown-menu top="40px"
<screen-dropdown-menu top="50px"
:menuList="streetList"
:visible.sync="streetDropMenuVisible"
:defaultSelected="selectStreet.value"
@ -21,9 +22,9 @@
@click="onChangeCommunity">
<div>{{selectCommunity.label === '全部社区' ? '社区' : selectCommunity.label}}</div>
<svg-icon icon-class="bottom-sword"
fill="#fff">
fill="#8ec6d8">
</svg-icon>
<screen-dropdown-menu top="40px"
<screen-dropdown-menu top="50px"
:menuList="communityList"
:visible.sync="communityDropMenuVisible"
:defaultSelected="selectCommunity.value"
@ -34,59 +35,60 @@
</template>
<script>
// import { getOrgTree } from 'api/shibeiScreen/screenContentLeft'
import { mapGetters, mapActions } from 'vuex'
export default {
name: 'agency-select',
name: "agency-select",
data () {
return {
streetList: [],
communityList: [{
label: '全部社区',
value: '',
center: []
}],
cityName: '青岛市•',
districtName: '市北区委',
selectStreet: {
label: '全部党工委',
value: '',
center: []
value: ''
},
selectCommunity: {
label: '全部社区',
value: '',
center: []
value: ''
},
streetList: [
{
label: "即墨路街道党工委",
value: "jimo"
},
{
label: "兴德路街道党工委",
value: "xingde"
},
{
label: "大港街道党工委",
value: "dagang"
},
],
communityList: [
{
label: "上海路社区党委",
value: "sh"
},
{
label: "胶州路社区党委",
value: "jz"
},
{
label: "小港社区党委",
value: "xg"
},
],
streetDropMenuVisible: false,
communityDropMenuVisible: false,
cityName: '青岛市',
districtName: ''
}
},
created () {
// this.getOrgTree()
},
computed: {
...mapGetters(['shibeiAId', 'shibeiAgencyType'])
},
watch: {
shibeiAId (value) {
if (this.shibeiAgencyType === 'district') {
this.communityList = [{ label: '全部社区', value: '', center: [] }]
this.selectStreet = { label: '全部党工委', value: '', center: [] }
this.selectCommunity = { label: '全部社区', value: '', center: [] }
} else if (this.shibeiAgencyType === 'community') {
const item = this.streetList.find(item => item.value === this.shibeiAId)
this.selectStreet = { label: item.label, value: item.value, center: item.centerMark }
this.selectCommunity = { label: '全部社区', value: '', center: [] }
this.communityList = [{
label: '全部社区', value: '', center: []
}]
this.communityList = [...this.communityList, ...item.children]
} else if (this.shibeiAgencyType === 'grid') {
this.recurrenceAgencyId(this.shibeiAId, this.streetList)
}
}
},
mounted () {
window.addEventListener('click', e => {
if (this.$refs.street && !this.$refs.street.contains(e.target)) {
@ -94,142 +96,89 @@ export default {
this.streetDropMenuVisible = !this.streetDropMenuVisible
}
}
if (this.$refs.community && !this.$refs.community.contains(e.target)) {
if (this.communityDropMenuVisible) {
this.communityDropMenuVisible = !this.communityDropMenuVisible
}
}
})
},
watch: {
},
methods: {
...mapActions({
set_shibeiAgencyId: 'SET_SHIBEIAGENCYID',
set_shibeiAgencyType: 'SET_SHIBEIAGENCYTYPE',
set_shibeiMapCenter: 'SET_SHIBEIMAPCENTER'
}),
async getOrgTree () {
try {
const res = await getOrgTree()
console.log(res)
this.streetList = []
this.streetList.push({
label: '全部党工委',
value: '',
center: [],
children: []
})
this.districtName = res.data.label
this.streetList = [...this.streetList, ...res.data.children]
} catch (err) {
console.error(err)
}
},
onChangeStreet () {
this.streetDropMenuVisible = !this.streetDropMenuVisible
},
onChangeCommunity () {
this.communityDropMenuVisible = !this.communityDropMenuVisible
},
onChooseStreet (item) {
this.selectStreet = {
label: item.label,
value: item.value,
center: item.centerMark || item.center || []
}
this.selectCommunity = {
label: '全部社区',
value: '',
center: []
}
this.communityList = []
this.communityList.push({
label: '全部社区',
value: '',
center: []
})
this.communityList = [...this.communityList, ...item.children]
if (this.selectCommunity.value) {
this.set_shibeiAgencyId(this.selectCommunity.value)
this.set_shibeiAgencyType('grid')
this.set_shibeiMapCenter(this.selectCommunity.center)
} else if (this.selectStreet.value) {
this.set_shibeiAgencyId(this.selectStreet.value)
this.set_shibeiAgencyType('community')
this.set_shibeiMapCenter(this.selectStreet.center)
} else {
// this.set_shibeiAgencyId('66f3987a8ea0261a6693689689f9e56b')
this.set_shibeiAgencyId('1175270520603930625')
this.set_shibeiAgencyType('district')
// this.set_shibeiMapCenter([120.312565, 36.021688])
this.set_shibeiMapCenter([120.364165, 36.103091])
}
onChooseStreet (streetItem) {
this.selectStreet = streetItem
},
onChooseCommunity (item) {
this.selectCommunity = {
label: item.label,
value: item.value,
center: item.centerMark
}
if (this.selectCommunity.value) {
this.set_shibeiAgencyId(this.selectCommunity.value)
this.set_shibeiAgencyType('grid')
this.set_shibeiMapCenter(this.selectCommunity.center)
} else if (this.selectStreet.value) {
this.set_shibeiAgencyId(this.selectStreet.value)
this.set_shibeiAgencyType('community')
this.set_shibeiMapCenter(this.selectStreet.center)
} else {
// this.set_shibeiAgencyId('66f3987a8ea0261a6693689689f9e56b')
this.set_shibeiAgencyId('1175270520603930625')
this.set_shibeiAgencyType('district')
// this.set_shibeiMapCenter([120.312565, 36.021688])
this.set_shibeiMapCenter([120.364165, 36.103091])
}
onChooseCommunity (communityItem) {
this.selectCommunity = communityItem
},
recurrenceAgencyId (agencyId, list) {
try {
list.forEach(item => {
if (item.children && item.children.length > 0) {
if (item.value === agencyId) {
throw (item)
} else {
if (item.children && item.children.length > 0) {
this.recurrenceAgencyId(agencyId, item.children)
}
}
}
})
} catch (err) {
this.selectCommunity = { label: err.label, value: err.value, center: err.centerMark }
}
}
}
}
</script>
<style lang="scss" scoped>
.agency-select {
width: 100%;
height: 40px;
box-sizing: border-box;
padding-bottom: 8px;
display: flex;
align-items: center;
.item {
width: 100%;
height: 32px;
background: #031b3d;
border: 1px solid #03327e;
border-radius: 3px;
color: #fefefe;
margin-top: -107px;
margin-left: 39px;
display: flex;
font-size: 18px;
font-family: PingFang SC;
font-weight: bold;
color: #fefefe;
letter-spacing: 5px;
.name-item {
height: 45px;
align-items: center;
justify-content: space-between;
line-height: 40px;
}
.item {
box-sizing: border-box;
padding: 0 17px;
position: relative;
& + .item {
margin-left: 12px;
width: 220px;
height: 42px;
padding: 13px 11px 15px 10px;
margin-left: 20px;
display: flex;
justify-content: space-between;
align-items: center;
background: rgba(0, 159, 199, 0.23);
border-radius: 1px;
font-size: 15px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #c1e8ff;
letter-spacing: 5px;
// white-space: nowrap;
// overflow: hidden;
// text-overflow: ellipsis;
&:hover {
cursor: pointer;
}
}
}

16
src/views/index.vue

@ -1,9 +1,15 @@
<template>
<div class="shibei-screen-home"
<!-- <div class="shibei-screen-home"
:style="{
width: width + 'px',
height: height + 'px',
transform: `scale(${shibeiScale}) translate(-50%, -50%)`
}"> -->
<div class="shibei-screen-home"
:style="{
width: width + 'px',
height: height + 'px',
}">
<screen-header></screen-header>
<agency-select></agency-select>
@ -59,7 +65,7 @@ export default {
},
mounted () {
this.setScale()
window.addEventListener('resize', debounce(this.setScale))
// window.addEventListener('resize', debounce(this.setScale))
},
methods: {
@ -88,8 +94,10 @@ export default {
background-size: 100% 100%;
// background: #00050e;
position: absolute;
left: 50%;
top: 50%;
// left: 50%;
// top: 50%;
left: 20%;
top: 20%;
transition: 0.2s;
transform-origin: 0 0;
}

159
vue.config.js

@ -1,5 +1,160 @@
const { defineConfig } = require('@vue/cli-service')
//引入node.js核心模块path,意思是路径模块
const path = require('path')
////这个函数的意思就是拼接目录,__dirname,是node.js的固有的,意思是绝对路径的前缀👆🏻
function join(dir) {
return path.join(__dirname, dir)
}
function diffOutputDir() {
if (process.env.NODE_ENV === 'production') {
return path.resolve(__dirname, '../screen-backend/app/public/frontend')
} else if (process.env.VUE_APP_SCREEN === 'beta') {
return 'screen'
} else if (process.env.VUE_APP_SCREEN === 'dev') {
return 'screen'
}
}
function diffPublicPath() {
if (process.env.NODE_ENV === 'production') {
return '/public/frontend'
} else if (process.env.VUE_APP_SCREEN === 'beta') {
return '/vue_egg_ssr'
} else if (process.env.VUE_APP_SCREEN === 'dev') {
return './'
}
}
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave:false
// 资源根路径
// publicPath: diffPublicPath(), //部署应用包时的基本URL, 用法和webpack本身的output.publicPath一致.
// 打包根路径
// outputDir: diffOutputDir(), // npm run build 打包构建后存放的目录
// 静态资源文件夹名
assetsDir: 'static',
// 保存时是否使用 eslint-loader
lintOnSave: false,
// 生产环境 source map
productionSourceMap: false,
// 调整 webpack 配置
chainWebpack: (config) => {
config.plugins.delete('prefetch')
config.resolve.alias
.set('api', join('src/api'))
.set('assets', join('src/assets'))
.set('components', join('src/components'))
// .set('directives', join('src/directives'))
// .set('filters', join('src/filters'))
.set('store', join('src/store'))
.set('style', join('src/style'))
.set('utils', join('src/utils'))
// .set('shibeiScreen', join('src/views'))
// svg图标加载
config.module
.rule('svg')
.exclude.add(path.join(__dirname, 'src/components/svg-icon/svg'))
.end()
config.module
.rule('icons') // 定义一个名叫 icons 的规则
.test(/\.svg$/) // 设置 icons 的匹配正则
.include.add(path.join(__dirname, 'src/components/svg-icon/svg')) // 设置当前规则的作用目录,只在当前目录下才执行当前规则
.end()
.use('svg-sprite') // 指定一个名叫 svg-sprite 的 loader 配置
.loader('svg-sprite-loader') // 该配置使用 svg-sprite-loader 作为处理 loader
.options({
// 该 svg-sprite-loader 的配置
symbolId: 'icon-[name]'
})
.end()
// 修复HMR
config.resolve.symlinks(true)
// 打包结果分析
if (process.env.NODE_ENV === 'development') {
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
}
},
// 调整 webpack 配置
// configureWebpack: (config) => {
// config.devtool =
// process.env.NODE_ENV === 'production' ? 'none' : 'cheap-eval-source-map'
// if (
// process.env.NODE_ENV === 'beta' ||
// process.env.NODE_ENV === 'production'
// ) {
// config.externals = {
// AMap: 'AMap',
// BMapGL: 'BMapGL',
// BMAP_EARTH_MAP: 'BMAP_EARTH_MAP',
// echarts: 'echarts',
// vue: 'Vue',
// 'element-ui': 'ELEMENT',
// THREE: 'THREE',
// TWEEN: 'TWEEN'
// }
// } else {
// config.externals = {
// AMap: 'AMap',
// BMapGL: 'BMapGL',
// BMAP_EARTH_MAP: 'BMAP_EARTH_MAP',
// echarts: 'echarts',
// THREE: 'THREE',
// TWEEN: 'TWEEN'
// }
// }
// },
// css 相关
css: {
// 将组件内的 css 提取到 一个单独的文件
// extract: true,
// 是否开启 css source map
sourceMap: false,
// 为预处理器的 loader 传递自定义选项
loaderOptions: {}
},
// 开发环境 dev-server
// devServer: {
// open: false,
// host: '0.0.0.0',
// port: 8091,
// proxy: {
// '/api': {
// target: 'http://127.0.0.1:10001/api/',
// pathRewrite: {
// '^/api': ''
// },
// logLevel: 'debug',
// changeOrigin: true,
// secure: false
// },
// '/screenBaseUrl': {
// target: 'http://127.0.0.1:10001/',
// pathRewrite: {
// '^/screenBaseUrl': ''
// },
// changeOrigin: true,
// secure: false
// }
// },
// https: false,
// hotOnly: true,
// before: (app) => {}
// },
transpileDependencies: true
})

Loading…
Cancel
Save