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

build/rollup.config.js

@@ -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

@@ -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

@@ -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

 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

 <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

@@ -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

 <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

@@ -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

 <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

 <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

@@ -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