Skip to content

C
component-lib
Commit becf1302 authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

使用cdn修复组件展示环境,调整页面

parent 92a6b586
Hide whitespace changes
Inline Side-by-side
Showing with 334 additions and 132 deletions
build/rollup.config.js
View file @ becf1302
......@@ -13,7 +13,6 @@ import typescript from '@rollup/plugin-typescript'
import minimist from 'minimist'
import image from '@rollup/plugin-image'
// Get browserslist config and remove ie from es build targets
const esbrowserslist = fs
.readFileSync('./.browserslistrc')
.toString()
......@@ -51,37 +50,6 @@ const baseConfig = {
extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
}),
PostCSS(),
// Process only `<style module>` blocks.
// PostCSS({
// modules: {
// generateScopedName: '[local]___[hash:base64:5]',
// },
// include: /&module=.*\.stylus$/,
// }),
// Process all `<style>` blocks except `<style module>`.
// PostCSS({
// include: /(?<!&module=.*)\.stylus$/,
// plugins: [
// postcssImport({
// resolve(id, basedir) {
// // // resolve alias @css, @import '@css/style.css'
// // // because @css/ has 5 chars
// // if (id.startsWith("@css")) {
// // return path.resolve("./src/assets/styles/css", id.slice(5));
// // }
// // // resolve node_modules, @import '~normalize.css/normalize.css'
// // // similar to how css-loader's handling of node_modules
// // if (id.startsWith("~")) {
// // return path.resolve("./node_modules", id.slice(1));
// // }
// // resolve relative path, @import './components/style.css'
// return path.resolve(basedir, id)
// },
// }),
// ],
// }),
commonjs(),
],
babel: {
......@@ -112,36 +80,7 @@ const globals = {
// Customize configs for individual targets
const buildFormats = []
const webConfig = {
...baseConfig,
input: 'dev/serve.ts',
output: {
file: 'dist/component-lib.web.js',
},
plugins: [
image(),
replace(baseConfig.plugins.replace),
...baseConfig.plugins.preVue,
vue(baseConfig.plugins.vue),
...baseConfig.plugins.postVue,
typescript(),
babel({
...baseConfig.plugins.babel,
presets: [
[
'@babel/preset-env',
{
...babelPresetEnvConfig,
targets: esbrowserslist,
},
],
],
}),
],
}
buildFormats.push(webConfig)
if (!argv.format || argv.format === 'es') {
if (argv.format && argv.format === 'es') {
const esConfig = {
...baseConfig,
input: 'src/entry.esm.ts',
......@@ -182,14 +121,14 @@ if (!argv.format || argv.format === 'es') {
buildFormats.push(esConfig)
}
if (!argv.format || argv.format === 'cjs') {
const umdConfig = {
if (argv.format && argv.format === 'iife') {
const unpkgConfig = {
...baseConfig,
external,
output: {
compact: true,
file: 'dist/component-lib.ssr.js',
format: 'cjs',
file: 'dist/component-lib.min.js',
format: 'iife',
name: 'ComponentLib',
exports: 'auto',
globals,
......@@ -201,22 +140,27 @@ if (!argv.format || argv.format === 'cjs') {
vue(baseConfig.plugins.vue),
...baseConfig.plugins.postVue,
babel(baseConfig.plugins.babel),
terser({
output: {
ecma: 5,
},
}),
],
}
buildFormats.push(umdConfig)
buildFormats.push(unpkgConfig)
addWebConfig()
}
if (!argv.format || argv.format === 'iife') {
const unpkgConfig = {
...baseConfig,
external,
function addWebConfig() {
const webConfig = {
input: 'dev/serve.ts',
external: ['axios', 'qs'],
output: {
compact: true,
file: 'dist/component-lib.min.js',
format: 'iife',
name: 'ComponentLib',
exports: 'auto',
globals,
file: 'dist/component-lib.web.js',
globals: {
axios: 'axios',
qs: 'Qs',
},
},
plugins: [
image(),
......@@ -224,16 +168,24 @@ if (!argv.format || argv.format === 'iife') {
...baseConfig.plugins.preVue,
vue(baseConfig.plugins.vue),
...baseConfig.plugins.postVue,
babel(baseConfig.plugins.babel),
terser({
output: {
ecma: 5,
},
typescript(),
babel({
...baseConfig.plugins.babel,
extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
babelHelpers: 'bundled',
presets: [
[
'@babel/preset-env',
{
...babelPresetEnvConfig,
targets: esbrowserslist,
},
],
],
}),
],
}
buildFormats.push(unpkgConfig)
buildFormats.push(webConfig)
}
// Export config
export default buildFormats
html.js
View file @ becf1302
......@@ -10,9 +10,10 @@ const html = `
<head>
<meta charset="UTF-8">
<link rel="icon" href="./favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>组件列表</title>
<script src="http://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="http://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.min.js"></script>
<script type="module" crossorigin src="./component-lib.web.js"></script>
</head>
......
package.json
View file @ becf1302
......@@ -16,10 +16,9 @@
"start": "npm run serve",
"serve": "vue-cli-service serve dev/serve.ts",
"prebuild": "rimraf ./dist",
"build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js && node ./html.js && node ./repair.js",
"build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs && node ./html.js ",
"build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es && node ./html.js ",
"build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife && node ./html.js && node ./repair.js",
"build": "npm run build:es && npm run build:web && node ./repair.js && node ./html.js",
"build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es",
"build:web": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife && node ./repair.js && node ./html.js",
"postbuild": "rimraf ./dist/types/dev ./dist/types/src/entry.d.ts"
},
"devDependencies": {
......
src/ajax/api.ts
View file @ becf1302
let BASE_URL: string = ''
switch (process.env.NODE_ENV) {
case 'production':
BASE_URL = window._base_url
BASE_URL = 'http://ja-hm.omniview.pro/api/v2'
break
default:
BASE_URL = 'http://ja-hm.omniview.pro/api/v2'
......
src/components/brief.vue
View file @ becf1302
<template>
<div class="brief-container" :class="{ vertical: align === 'vertical' }">
<div v-for="item in list" :key="item.name">
<div
v-for="(item, i) in list"
:key="item.name"
:class="{ 'click-able': clickAble }"
@click="onClick(i)"
>
<img
v-if="item.icon"
:src="item.icon"
......@@ -33,6 +38,7 @@ export interface BriefProp {
name: string
value: number | number[]
icon?: any
data?: any
}
export default defineComponent({
name: 'Brief',
......@@ -53,6 +59,19 @@ export default defineComponent({
type: String as PropType<'vertical' | 'horizontal'>,
default: 'horizontal',
},
clickAble: {
type: Boolean as PropType<boolean>,
default: false,
},
},
emits: ['touch'],
setup(props, ctx) {
function onClick(index: number) {
if (props.clickAble) {
ctx.emit('touch', index)
}
}
return { onClick }
},
})
</script>
......@@ -73,6 +92,16 @@ export default defineComponent({
display flex
align-items center
width 33%
&.click-able
cursor pointer
&:hover
.count
background-clip text
-webkit-background-clip text
-webkit-text-fill-color transparent
background-image linear-gradient(to bottom, #FFD1B2, #FF8635)
p
color $yellow
>img
margin-right .05rem
>div
......
src/lib/A013/index.vue
View file @ becf1302
......@@ -13,8 +13,18 @@
</p>
</n-space>
<n-space>
<n-select v-model:value="year" size="small" :options="yearOptions" />
<n-select v-model:value="area" size="small" :options="areaOptions" />
<n-select
v-model:value="year"
class="my-select"
size="small"
:options="yearOptions"
/>
<n-select
v-model:value="area"
class="my-select"
size="small"
:options="areaOptions"
/>
</n-space>
</div>
<div class="content">
......@@ -111,7 +121,7 @@ const list = [
<style lang="stylus">
@import '../../components/MyComponent/main.styl'
.n-select
.n-select.my-select
height .2rem
.n-base-selection
height inherit
......
src/lib/A015/index.vue
View file @ becf1302
<template>
<m-card title="体征指标">
<m-sub :addition="{ value: 1674, unit: '个小区' }"> 住宅房屋 </m-sub>
<Brief :list="summary" />
<m-sub :addition="{ value: 351, unit: '幢' }"> 非居建筑 </m-sub>
<m-sub :addition="{ value: totalCommunityCount, unit: '个小区' }">
住宅房屋
</m-sub>
<Brief :list="summary" click-able @touch="onTouch" />
<m-sub
:addition="{ value: nonResident?.length || 0, unit: '幢' }"
click-able
@selct="onSelect"
>
非居建筑
</m-sub>
<m-sub> 服务主体 </m-sub>
<Brief :list="list" />
<p />
......@@ -10,11 +18,20 @@
</template>
<script lang="ts">
export default {
const _config = {
name: 'A015',
title: '体征指标',
row: 1,
baseUrl: window._base_url,
apis: {
community: '/service-basicdatasync-ddd/public/communities',
nonResident: '/service-basicdatasync-ddd/public/nonResi/buildings',
api1: '/service-basicdatasync-ddd/public/indCous',
api2: '/service-basicdatasync-ddd/public/residentsCommitteesV2',
api3: '/service-basicdatasync-ddd/public/propCompanies',
},
}
export default _config
</script>
<script lang="ts" setup>
import icon4 from '@/assets/images/icon4.png'
......@@ -26,20 +43,110 @@ import icon8 from '@/assets/images/icon8.png'
import icon9 from '@/assets/images/icon9.png'
import Brief from '@/components/brief.vue'
import { ref } from 'vue'
import { ajax } from '@/ajax'
import bus from '@/util/event-bus'
const totalCommunityCount = ref(0)
const summary = ref([
{ icon: icon4, name: '商品房', value: 0, data: [] },
{ icon: icon5, name: '公房', value: 0, data: [] },
{ icon: icon1, name: '公租房', value: 0, data: [] },
{ icon: icon6, name: '混合', value: 0, data: [] },
{ icon: icon7, name: '军产', value: 0, data: [] },
{ icon: icon8, name: '售后房', value: 0, data: [] },
])
ajax
.get({
url: _config.apis.community,
params: { sectType: '1', pageSize: 9000 },
})
.then((res) => {
const data = res?.data?.content || []
totalCommunityCount.value = data.length
const list = {
type1: data.filter((item) => item?.stKind == '01'),
type2: data.filter(
(item) => item?.stKind == '07' || item?.stKind == '05',
),
type3: data.filter((item) => item?.stKind == '11'),
type4: data.filter((item) => item?.stKind == '06'),
type5: data.filter((item) => item?.stKind == '09'),
type6: data.filter((item) => item?.stKind == '04'),
}
summary.value = [
{
icon: icon4,
name: '商品房',
value: list.type1?.length || 0,
data: list.type1,
},
{
icon: icon5,
name: '公房',
value: list.type2?.length || 0,
data: list.type2,
},
{
icon: icon1,
name: '公租房',
value: list.type3?.length || 0,
data: list.type3,
},
{
icon: icon6,
name: '混合',
value: list.type4?.length || 0,
data: list.type4,
},
{
icon: icon7,
name: '军产',
value: list.type5?.length || 0,
data: list.type5,
},
{
icon: icon8,
name: '售后房',
value: list.type6?.length || 0,
data: list.type6,
},
]
})
const onTouch = (i: number) => {
bus.emit('addPoints', summary.value[i].data)
}
const nonResident = ref([])
ajax
.get({ url: _config.apis.nonResident, params: { pageSize: 9000 } })
.then((res) => {
nonResident.value = res?.data?.content || []
})
const onSelect = () => {
bus.emit('addPoints', nonResident.value)
}
const summary = [
{ icon: icon4, name: '商品房', value: 904 },
{ icon: icon5, name: '公房', value: 400 },
{ icon: icon1, name: '私房/农房', value: 130 },
{ icon: icon6, name: '商住混合', value: 82 },
{ icon: icon7, name: '军产', value: 12 },
{ icon: icon8, name: '保障房', value: 46 },
]
const list = ref([
{ icon: icon9, name: '业委会', value: 47520 },
{ icon: icon9, name: '居委会', value: 3960 },
{ icon: icon9, name: '物业汽油桶', value: 45 },
{ icon: icon9, name: '业委会', value: 0 },
{ icon: icon9, name: '居委会', value: 0 },
{ icon: icon9, name: '物业企业', value: 0 },
])
Promise.all([
ajax.get({ url: _config.apis.api1, params: { sectType_in: '1' } }),
ajax.get({ url: _config.apis.api2, params: { sectType_in: '1' } }),
ajax.get({
url: _config.apis.api3,
params: { sectType_in: '1', managedNum_desc: '1' },
}),
]).then(([data1, data2, data3]) => {
list.value = [
{ icon: icon9, name: '业委会', value: data1?.data?.totalRows || 0 },
{ icon: icon9, name: '居委会', value: data2?.data?.totalRows || 0 },
{ icon: icon9, name: '物业企业', value: data3?.data?.totalRows || 0 },
]
})
</script>
<style lang="stylus" scoped>
......
src/lib/A016/index.vue
View file @ becf1302
......@@ -31,7 +31,18 @@
</div>
</div>
<m-sub :addition="{ value: 1684, unit: '万元' }"> 维修资金 </m-sub>
<Summary title="续筹分布" :list="list" :avatar="avatar1" />
<!-- <Summary title="续筹分布" :list="list" :avatar="avatar1" /> -->
<div class="warn">
<div>
<p>{{ list[0].name }}</p>
<m-count class="orange-count" :value="list[0].value" />
<span>户</span>
</div>
<div v-for="item in list.slice(1)" :key="item.name">
<m-count :value="item.value" />
<p>{{ item.name }}</p>
</div>
</div>
<div class="chart">
<m-bar
v-if="barData.source.length > 0"
......@@ -68,9 +79,9 @@ const summary = [
{ name: '物业日查', value: 100 },
]
const list = ref([
{ name: '分户', value: 47520 },
{ name: '门牌', value: 3960 },
{ name: '小区', value: 45 },
{ name: '续筹预警', value: 47520 },
{ name: '涉及门牌', value: 3960 },
{ name: '涉及小区', value: 45 },
])
const partys = [
......@@ -100,12 +111,13 @@ const barOption = {
yAxis: {
minInterval: 1,
},
grid: {
bottom: 0,
},
xAxis: [
{
type: 'category',
axisLabel: {
interval: 0,
},
show: false,
},
],
series: [
......@@ -143,6 +155,34 @@ const barOption = {
font-weight bold
>p
color #ccc
.warn
$box()
padding .05rem .1rem
display flex
justify-content space-between
align-items center
>div
text-align center
flex 1
position relative
p
color #ccc
span
font-size .08rem
margin-left .05rem
color #ccc
&:first-child
flex 1.5
p
font-size .12rem
color #fff
&:last-child
&:before
content '|'
position absolute
top 50%
transform translateY(-50%)
left 0
.chart
width 100%
height .8rem
......
src/lib/A017/index.vue
View file @ becf1302
<template>
<m-card title="安全排查">
<div class="summary">
<div v-for="item in list" :key="item.name">
<m-count class="orange-count" :value="item.value" :decimal="2" />%
<div v-for="item in list" :key="item.name" @click="onClick(item)">
<m-count class="orange-count" :value="item.value" :decimal="2" /> %
<p>{{ item.name }}</p>
</div>
</div>
......@@ -45,6 +45,7 @@ export default _config
<script lang="ts" setup>
import { ref } from 'vue'
import { ajax } from '@/ajax'
import bus from '@/util/event-bus'
ajax.get({ url: _config.apis.main }).then((res) => {
const { checkRate, riskTypeStatistical = [] } = res?.data?.content || {}
......@@ -62,7 +63,7 @@ ajax.get({ url: _config.apis.main }).then((res) => {
})
const pieData = {
dimensions: [
{ name: 'type', displayName: '类型' },
{ name: 'type', displayName: '安全排查类型' },
{ name: 'value', displayName: '占比' },
],
source: [],
......@@ -107,6 +108,10 @@ const list = ref([
{ name: '需应急排险', value: 0 },
{ name: '小梁薄板', value: 0 },
])
function onClick({ name }) {
bus.emit('addPoints', name)
}
</script>
<style lang="stylus" scoped>
......@@ -146,4 +151,7 @@ const list = ref([
margin-bottom .04rem
>div
text-align center
cursor pointer
&:hover
color $yellow
</style>
src/lib/A018/index.vue
View file @ becf1302
<template>
<m-card title="电梯加装">
<div class="sum">
<div v-for="item in list" :key="item.name">
<div v-for="item in list" :key="item.name" @click="onClick(item.state)">
<span>{{ item.name }}</span>
<m-count class="orange-count" :value="item.value" />
<span>{{ item.unit }}</span>
......@@ -26,6 +26,7 @@ const _config = {
baseUrl: window._base_url,
apis: {
main: '/service-special-ja-ddd/public/elevator/statistical',
elevator: '/service-special-ja-ddd/public/elevatorInstallationInfos',
},
}
export default _config
......@@ -33,14 +34,27 @@ export default _config
<script lang="ts" setup>
import { computed, ref } from 'vue'
import { ajax } from '@/ajax'
import bus from '@/util/event-bus'
import ele1 from '@/assets/images/ele1.png'
import ele2 from '@/assets/images/ele2.png'
ajax.get({ url: _config.apis.main }).then((res) => {
const { statistical, streetData = [] } = res?.data?.content || {}
list.value = [
// { name: '多层住宅房屋', value: +statistical.totalNum || 0, unit: '幢' },
// { name: '可加梯门牌数', value: +statistical.caddNum || 0, unit: '幢' },
{ name: '完成加梯征询', value: +statistical.passNum || 0, unit: '幢' },
{ name: '加梯完工', value: +statistical.finishNum || 0, unit: '幢' },
{
name: '完成加梯征询',
value: +statistical.passNum || 0,
unit: '幢',
state: '2',
},
{
name: '加梯完工',
value: +statistical.finishNum || 0,
unit: '幢',
state: '7',
},
]
charData.value.source = streetData
})
......@@ -48,14 +62,27 @@ const fontSize = computed(() => Math.floor((screen.height * 1.6) / 100))
const charData = ref({
dimensions: [
{ name: 'streetName', displayName: '街道' },
{ name: 'passNum', displayName: '已完成加梯征询' },
{ name: 'shouldPassNum', displayName: '应完成加梯征询' },
{ name: 'finishNum', displayName: '加梯已完工' },
{ name: 'shouldFinishNum', displayName: '加梯应完工' },
{ name: 'passNum', displayName: '已完成征询' },
{ name: 'shouldPassNum', displayName: '应完成征询' },
{ name: 'startNum', displayName: '已开工' },
{ name: 'shouldStartNum', displayName: '应开工' },
{ name: 'finishNum', displayName: '已完工' },
{ name: 'shouldFinishNum', displayName: '应完工' },
],
source: [],
})
const option = {
color: [
'#0076FF',
'#00BFFF',
'#9FC444',
'#FFCE34',
'#FF9D27',
'#FF6161',
'#BABABA',
'#ff0000',
'#00ff00',
],
grid: {
left: '2%',
right: '1%',
......@@ -85,14 +112,21 @@ const option = {
series: [
{
type: 'bar',
barWidth: '30%',
barWidth: '20%',
},
{
type: 'line',
},
{
type: 'bar',
barWidth: '30%',
barWidth: '20%',
},
{
type: 'line',
},
{
type: 'bar',
barWidth: '20%',
},
{
type: 'line',
......@@ -102,23 +136,40 @@ const option = {
const list = ref([
// { name: '多层住宅房屋', value: 0, unit: '幢' },
// { name: '可加梯门牌数', value: 0, unit: '幢' },
{ name: '完成加梯征询', value: 0, unit: '幢' },
{ name: '加梯完工', value: 0, unit: '幢' },
{ name: '完成加梯征询', value: 0, unit: '幢', state: '2' },
{ name: '加梯完工', value: 0, unit: '幢', state: '7' },
])
const onClick = (state) => {
console.log('---', state)
const icon = state === '2' ? ele1 : ele2
ajax
.get({
url: _config.apis.elevator,
params: { state, createTime_desc: 'desc', pageSize: 9000 },
})
.then((res) => {
const data = res?.data?.content || []
bus.emit('addPoints', { data, icon })
})
}
</script>
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.sum
display flex
justify-content space-between
justify-content space-around
>div
display flex
align-items center
font-size .09rem
color #ccc
cursor pointer
.orange-count
margin 0 .04rem .02rem
&:hover
color $yellow
.chart
width 100%
height 1.5rem
......
src/lib/A019/index.vue
View file @ becf1302
......@@ -8,7 +8,12 @@
万元
</span>
</p>
<n-select v-model:value="year" size="small" :options="yearOptions" />
<n-select
v-model:value="year"
class="my-select"
size="small"
:options="yearOptions"
/>
</n-space>
<div class="bar">
<div
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment