安全排查/电梯加装/市场预售接入数据

build/rollup.config.js

@@ -98,6 +98,8 @@ const external = [
   // list external dependencies, exactly the way it is written in the import statement.
   // eg. 'jquery'
   'vue',
+  'axios',
+  'qs',
 ]
 
 // UMD/IIFE shared settings: output.globals

package-lock.json

@@ -27,6 +27,7 @@
         "@vue/compiler-sfc": "^3.0.11",
         "@zerollup/ts-transform-paths": "^1.7.18",
         "animate.css": "^4.1.1",
+        "axios": "^0.24.0",
         "core-js": "^3.18.3",
         "countup.js": "^2.0.8",
         "cross-env": "^7.0.3",
@@ -43,6 +44,7 @@
         "normalize.css": "^8.0.1",
         "postcss": "^8.2.10",
         "prettier": "^2.3.2",
+        "qs": "^6.5.2",
         "rimraf": "^3.0.2",
         "rollup": "^2.52.8",
         "rollup-plugin-postcss": "^4.0.0",
@@ -4382,6 +4384,15 @@
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
       "dev": true
     },
+    "node_modules/axios": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.24.0.tgz",
+      "integrity": "sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==",
+      "dev": true,
+      "dependencies": {
+        "follow-redirects": "^1.14.4"
+      }
+    },
     "node_modules/babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -23634,6 +23645,15 @@
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
       "dev": true
     },
+    "axios": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.24.0.tgz",
+      "integrity": "sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==",
+      "dev": true,
+      "requires": {
+        "follow-redirects": "^1.14.4"
+      }
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",

package.json

@@ -42,6 +42,7 @@
     "@vue/compiler-sfc": "^3.0.11",
     "@zerollup/ts-transform-paths": "^1.7.18",
     "animate.css": "^4.1.1",
+    "axios": "^0.24.0",
     "core-js": "^3.18.3",
     "countup.js": "^2.0.8",
     "cross-env": "^7.0.3",
@@ -58,6 +59,7 @@
     "normalize.css": "^8.0.1",
     "postcss": "^8.2.10",
     "prettier": "^2.3.2",
+    "qs": "^6.5.2",
     "rimraf": "^3.0.2",
     "rollup": "^2.52.8",
     "rollup-plugin-postcss": "^4.0.0",

repair.js

@@ -8,7 +8,7 @@ fs.readFile(file, 'utf-8', (err, data) => {
   if (err) return console.error(err)
   const newData = data
     .replace('var ComponentLib=', 'export default ')
-    .replace('(Vue);', '')
+    .replace('(Vue,axios,qs);', '')
   rimraf(file, (err) => {
     if (err) return console.error(err)
     fs.writeFile(file, newData, 'utf-8', (err) => {

src/ajax/api.ts

+let BASE_URL: string = ''
+switch (process.env.NODE_ENV) {
+  case 'production':
+    BASE_URL = window._base_url
+    break
+  default:
+    BASE_URL = 'http://ja-hm.omniview.pro/api/v2'
+}
+
+export default {
+  BASE_URL,
+  CONFIGS: '/service-bigscreen/public/bigscreenConfigs', // 配置
+}

src/ajax/axios.ts

+import axios, { AxiosRequestConfig, AxiosPromise } from 'axios'
+import qs from 'qs'
+import api from './api'
+
+const Axios = axios.create({
+  baseURL: api.BASE_URL,
+  timeout: 15000,
+})
+Axios.interceptors.request.use(
+  (config) => {
+    config.baseURL = window._base_url
+    // 添加token
+    // config.headers.Authorization = ''
+    return config
+  },
+  (error) => {
+    return Promise.reject(error)
+  },
+)
+
+Axios.interceptors.response.use(
+  (response) => {
+    // TODO 返回的数据status判断错误操作等……
+    return response.data
+  },
+  (error) => {
+    return Promise.reject(error)
+  },
+)
+
+interface ParamsProp {
+  [propName: string]: unknown
+}
+
+interface RequestOptions {
+  method?:
+    | 'GET'
+    | 'get'
+    | 'delete'
+    | 'DELETE'
+    | 'head'
+    | 'HEAD'
+    | 'options'
+    | 'OPTIONS'
+    | 'post'
+    | 'POST'
+    | 'put'
+    | 'PUT'
+    | 'patch'
+    | 'PATCH'
+    | 'purge'
+    | 'PURGE'
+    | 'link'
+    | 'LINK'
+    | 'unlink'
+    | 'UNLINK'
+    | undefined
+  url: string
+  params?: ParamsProp
+  contentType?:
+    | 'application/json;charset=UTF-8'
+    | 'application/x-www-form-urlencoded;charset=UTF-8'
+  headers?: { [key: string]: string }
+}
+
+/**
+ * 请求
+ * @param {String} method [请求方法]
+ * @param {String} url [请求地址]
+ * @param {Object} params [请求参数]
+ * @param {String} contentType [请求头，默认为'application/json;charset=UTF-8']
+ * @param {Object} headers [自定义请求头]
+ */
+const ajax = ({
+  method = 'GET',
+  url,
+  params = {},
+  contentType = 'application/json;charset=UTF-8',
+  headers = {},
+}: RequestOptions) => {
+  if (!url || typeof url != 'string') {
+    throw new Error('接口URL不正确')
+  }
+  let config: AxiosRequestConfig = {
+    method,
+    url,
+    headers: {
+      'X-Requested-With': 'XMLHttpRequest',
+      'Content-Type': contentType,
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Headers':
+        'Authorization,Origin, X-Requested-With, Content-Type, Accept',
+      'Access-Control-Allow-Methods': '*',
+      ...headers,
+    },
+  }
+  if (method === 'GET') {
+    config = Object.assign(config, { params })
+  } else {
+    if (contentType.toLowerCase().indexOf('x-www-form-urlencoded') >= 0) {
+      config = Object.assign(config, { data: qs.stringify(params) })
+    } else {
+      config = Object.assign(config, { data: params })
+    }
+  }
+  return Axios(config)
+}
+
+export default {
+  get(args: RequestOptions): AxiosPromise<any> {
+    return ajax({ method: 'GET', ...args })
+  },
+  post(args: RequestOptions): AxiosPromise<any> {
+    // args.contentType = 'application/x-www-form-urlencoded;charset=UTF-8'
+    return ajax({ method: 'POST', ...args })
+  },
+  put(args: RequestOptions): AxiosPromise<any> {
+    return ajax({ method: 'PUT', ...args })
+  },
+  delete(args: RequestOptions): AxiosPromise<any> {
+    return ajax({ method: 'DELETE', ...args })
+  },
+}

src/ajax/index.ts

+import ajax from './axios'
+import api from './api'
+
+export { ajax, api }

src/components/MyComponent/MyEmpty/my-empty.vue

 <template>
   <div class="my-empty">
-    <img src="/src/assets/images/no-data.png" />
+    <img src="@/assets/images/no-data.png" />
     <p>— {{ text }} —</p>
   </div>
 </template>

src/components/MyComponent/MyProgress/my-progress.vue

@@ -2,8 +2,12 @@
   <div class="my-progress">
     <div v-if="msg" class="msg">
       <p v-if="msg.name">{{ msg.name }}</p>
-      <p v-if="msg.value" :style="{ color: msg.color }">
-        <MonitorCount v-if="typeof msg.value === 'number'" :value="msg.value" />
+      <p v-if="msg.value || msg.value === 0" :style="{ color: msg.color }">
+        <MonitorCount
+          v-if="typeof msg.value === 'number'"
+          :value="msg.value"
+          :decimal="msg.decimal || 0"
+        />
         <span v-else>{{ msg.value }}</span>
         <span v-if="msg.unit">{{ msg.unit }}</span>
       </p>

src/entry.ts

@@ -2,5 +2,8 @@ import { components, eventBus } from './entry.esm'
 
 export default function (url: string) {
   window._base_url = url
+  Object.keys(components).forEach((key) => {
+    components[key]._base_url = url
+  })
   return { components, eventBus }
 }

src/lib/A017/index.vue

 <template>
   <m-card title="安全排查">
     <div class="chart-wrapper">
-      <div class="chart">
-        <m-pie
-          v-if="pieData.source.length > 0"
-          :dataset="pieData"
-          :option="pieOption"
-        />
-        <m-empty v-else />
-      </div>
-      <div class="legend">
-        <div v-for="(item, i) in pieData.source" :key="item.type">
-          <i class="dot" :style="`background:${pieOption.color[i]}`" />
-          <p>{{ item.type }}</p>
-          <span><m-count :value="item.value" />%</span>
+      <template v-if="pieData.source.length > 0">
+        <div class="chart">
+          <m-pie
+            v-if="pieData.source.length > 0"
+            :dataset="pieData"
+            :option="pieOption"
+          />
         </div>
-      </div>
+        <div class="legend">
+          <div class="inner">
+            <div v-for="(item, i) in pieData.source" :key="item.type">
+              <i class="dot" :style="`background:${pieOption.color[i]}`" />
+              <p :title="item.type">{{ item.type }}</p>
+              <span><m-count :value="item.rate" />%</span>
+            </div>
+          </div>
+        </div>
+      </template>
+      <m-empty v-else />
     </div>
     <m-progress
       v-for="item in list"
@@ -25,37 +29,51 @@
         name: item.name,
         value: item.value,
         unit: '%',
+        decimal: 2,
         color: '#fff',
       }"
       :color="['rgb(36,59,86)', '#F4923E']"
-      @click="test(item)"
     />
     <p />
   </m-card>
 </template>
 
 <script lang="ts">
-export default {
+const _config = {
   name: 'A017',
   title: '安全排查',
   row: 1,
+  baseUrl: window._base_url,
+  apis: {
+    main: '/service-special-ja-ddd/public/risk/type/statistical',
+  },
 }
+export default _config
 </script>
 <script lang="ts" setup>
+import { ref } from 'vue'
+import { ajax } from '@/ajax'
+
+ajax.get({ url: _config.apis.main }).then((res) => {
+  const { checkRate, riskTypeStatistical = [] } = res?.data?.content || {}
+  list.value = [
+    { name: '需专业排查', value: +checkRate.judgeType * 100 || 0 },
+    { name: '需应急排险', value: +checkRate.isEmergencyRisk * 100 || 0 },
+    { name: '小梁薄板', value: +checkRate.isThinPlate * 100 || 0 },
+  ]
+  const total = riskTypeStatistical.reduce((acc, cur) => acc + +cur.num, 0)
+  pieData.source = riskTypeStatistical.map((item) => ({
+    type: item.riskType,
+    value: +item.num || 0,
+    rate: +((+item.num / total) * 100).toFixed(0),
+  }))
+})
 const pieData = {
   dimensions: [
     { name: 'type', displayName: '类型' },
     { name: 'value', displayName: '占比' },
   ],
-  source: [
-    { type: '墙体裂开', value: 35 },
-    { type: '阳台开裂', value: 21 },
-    { type: '钢构件锈蚀', value: 19 },
-    { type: '房屋整体沉降倾斜', value: 14 },
-    { type: '场地地质', value: 9 },
-    { type: '周边环境风险', value: 11 },
-    { type: '其他', value: 5 },
-  ],
+  source: [],
 }
 const pieOption = {
   color: [
@@ -66,6 +84,19 @@ const pieOption = {
     '#FF9D27',
     '#FF6161',
     '#BABABA',
+    '#ff0000',
+    '#00ff00',
+    '#0000ff',
+    '#9FE6B8',
+    '#FFDB5C',
+    '#ff9f7f',
+    '#fb7293',
+    '#E062AE',
+    '#E690D1',
+    '#e7bcf3',
+    '#9d96f5',
+    '#8378EA',
+    '#96BFFF',
   ],
   legend: false,
   series: [
@@ -79,11 +110,11 @@ const pieOption = {
     },
   ],
 }
-const list = [
-  { name: '需专业排查', value: 31 },
-  { name: '需应急排险', value: 29 },
-  { name: '小梁薄板', value: 49 },
-]
+const list = ref([
+  { name: '需专业排查', value: 0 },
+  { name: '需应急排险', value: 0 },
+  { name: '小梁薄板', value: 0 },
+])
 </script>
 
 <style lang="stylus" scoped>
@@ -91,23 +122,32 @@ const list = [
 .chart-wrapper
   display flex
   .chart
-    width 30%
+    width 25%
     height .8rem
   .legend
     flex 1
-    display flex
-    flex-wrap wrap
-    >div
+    height .8rem
+    overflow-y auto
+    .inner
       display flex
-      align-items center
-      width 50%
-      font-size .08rem
-      .dot
-        display inline-block
-        width .06rem
-        height @width
-        border-radius 50%
-      p
-        margin 0 .04rem
-        color #ccc
+      flex-wrap wrap
+      >div
+        display flex
+        align-items center
+        width 48%
+        font-size .08rem
+        &:nth-of-type(2n)
+          margin-left .05rem
+        .dot
+          display inline-block
+          width .06rem
+          height @width
+          border-radius 50%
+        p
+          margin 0 .04rem
+          flex 1
+          color #ccc
+          overflow hidden
+          white-space nowrap
+          text-overflow ellipsis
 </style>

src/lib/A018/index.vue

@@ -19,41 +19,42 @@
 </template>
 
 <script lang="ts">
-export default {
+const _config = {
   name: 'A018',
   title: '电梯加装',
   row: 1,
+  baseUrl: window._base_url,
+  apis: {
+    main: '/service-special-ja-ddd/public/elevator/statistical',
+  },
 }
+export default _config
 </script>
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
+import { ajax } from '@/ajax'
 
+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: '幢' },
+  ]
+  charData.value.source = streetData
+})
 const fontSize = computed(() => Math.floor((screen.height * 1.6) / 100))
-const charData = {
+const charData = ref({
   dimensions: [
-    { name: 'name', displayName: '街道' },
-    { name: 'data1', displayName: '已完成加梯征询' },
-    { name: 'data2', displayName: '应完成加梯征询' },
-    { name: 'data3', displayName: '加梯已完工' },
-    { name: 'data4', displayName: '加梯应完工' },
-  ],
-  source: [
-    { name: '江宁路街道', data1: 100, data2: 100, data3: 50, data4: 50 },
-    { name: '静安寺街道', data1: 110, data2: 110, data3: 20, data4: 20 },
-    { name: '南京西路街道', data1: 120, data2: 130, data3: 40, data4: 40 },
-    { name: '曹家渡街道', data1: 130, data2: 140, data3: 60, data4: 60 },
-    { name: '石门二路街道', data1: 140, data2: 150, data3: 80, data4: 80 },
-    { name: '天目西路街道', data1: 150, data2: 160, data3: 90, data4: 90 },
-    { name: '北站街道', data1: 150, data2: 160, data3: 90, data4: 90 },
-    { name: '宝山路街道', data1: 100, data2: 100, data3: 50, data4: 50 },
-    { name: '芷江西路街道', data1: 110, data2: 110, data3: 20, data4: 20 },
-    { name: '共和新路街道', data1: 120, data2: 130, data3: 40, data4: 40 },
-    { name: '大宁路街道', data1: 130, data2: 140, data3: 60, data4: 60 },
-    { name: '彭浦新村街道', data1: 140, data2: 150, data3: 80, data4: 80 },
-    { name: '临汾路街道', data1: 150, data2: 160, data3: 90, data4: 90 },
-    { name: '彭浦镇', data1: 150, data2: 160, data3: 90, data4: 90 },
+    { name: 'streetName', displayName: '街道' },
+    { name: 'passNum', displayName: '已完成加梯征询' },
+    { name: 'shouldPassNum', displayName: '应完成加梯征询' },
+    { name: 'finishNum', displayName: '加梯已完工' },
+    { name: 'shouldFinishNum', displayName: '加梯应完工' },
   ],
-}
+  source: [],
+})
 const option = {
   grid: {
     left: '2%',
@@ -63,6 +64,8 @@ const option = {
     containLabel: true,
   },
   legend: {
+    left: 0,
+    right: 0,
     itemWidth: fontSize.value * 0.6,
     itemHeight: fontSize.value * 0.8,
     textStyle: {
@@ -96,12 +99,12 @@ const option = {
     },
   ],
 }
-const list = [
-  { name: '多层住宅房屋', value: 2456, unit: '幢' },
-  { name: '可加梯门牌数', value: 953, unit: '幢' },
-  { name: '完成加梯征询', value: 20, unit: '幢' },
-  { name: '加梯完工', value: 16, unit: '幢' },
-]
+const list = ref([
+  { name: '多层住宅房屋', value: 0, unit: '幢' },
+  { name: '可加梯门牌数', value: 0, unit: '幢' },
+  { name: '完成加梯征询', value: 0, unit: '幢' },
+  { name: '加梯完工', value: 0, unit: '幢' },
+])
 </script>
 
 <style lang="stylus" scoped>
@@ -109,18 +112,15 @@ const list = [
 .sum
   display flex
   justify-content space-between
+  flex-wrap wrap
   >div
+    width 50%
     display flex
     align-items center
     font-size .09rem
     color #ccc
     .orange-count
-      margin 0 .04rem
-    span
-      &:first-child
-        display inline-block
-        min-width .22rem
-        max-width .33rem
+      margin 0 .04rem .02rem
 .chart
   width 100%
   height 1.5rem

src/lib/A019/index.vue

@@ -4,7 +4,7 @@
       <p>
         住宅预销售金额
         <span style="margin-left: 0.1rem">
-          <m-count class="orange-count" :value="1684" />
+          <m-count class="orange-count" :value="total" />
           万元
         </span>
       </p>
@@ -48,30 +48,75 @@
 </template>
 
 <script lang="ts">
-export default {
+const _config = {
   name: 'A019',
   title: '市场预售',
   row: 1,
+  baseUrl: window._base_url,
+  apis: {
+    main: '/service-special-ja-ddd/public/presale/statistical',
+  },
 }
+export default _config
 </script>
 <script lang="ts" setup>
 import { ref } from 'vue'
 import { NSpace, NSelect } from 'naive-ui'
+import { ajax } from '@/ajax'
 
 const year = ref('2021')
+const total = ref(0)
+ajax
+  .get({
+    url:_config.apis.main,
+    params: { year: year.value },
+  })
+  .then((res) => {
+    const {
+      noLivePresaleNum = 0, //非居预售证数
+      totalSets = 0, //总套数
+      liveRate = 0, //居住占比
+      totalPrice = 0, //总金额
+      presaleNum = 0, //预售证数
+      noLiveRate = 0, //非居占比
+      livePresaleNum = 0, //居住预售证数
+      totalArea = 0, //总面积
+    } = res?.data?.content || {}
+    total.value = totalPrice
+    list.value = [
+      {
+        name: '住房',
+        value: livePresaleNum,
+        rate: liveRate * 100,
+        color: '#ff9d26',
+      },
+      {
+        name: '商办',
+        value: noLivePresaleNum,
+        rate: noLiveRate * 100,
+        color: '#01bffe',
+      },
+    ]
+    areas.value = [
+      { name: '预销售面积', value: totalArea, unit: '㎡', decimal: 2 },
+      { name: '预销售套数', value: totalSets, unit: '套', decimal: 0 },
+    ]
+  })
+
 const yearOptions = [
   { label: '2021', value: '2021' },
   { label: '2020', value: '2020' },
   { label: '2019', value: '2019' },
 ]
-const list = [
-  { name: '住房', value: 10, rate: 65, color: '#ff9d26' },
-  { name: '商办', value: 2, rate: 35, color: '#01bffe' },
-]
-const areas = [
-  { name: '预销售面积', value: 32.99, unit: '㎡', decimal: 2 },
-  { name: '预销售套数', value: 561, unit: '套', decimal: 0 },
-]
+
+const list = ref([
+  { name: '住房', value: 0, rate: 0, color: '#ff9d26' },
+  { name: '商办', value: 0, rate: 0, color: '#01bffe' },
+])
+const areas = ref([
+  { name: '预销售面积', value: 0, unit: '㎡', decimal: 2 },
+  { name: '预销售套数', value: 0, unit: '套', decimal: 0 },
+])
 </script>
 
 <style lang="stylus" scoped>
@@ -80,7 +125,7 @@ const areas = [
   display flex
   width 100%
   height .06rem
-  margin .1rem 0
+  margin .14rem 0
   >div
     position relative
     .count
@@ -88,12 +133,15 @@ const areas = [
     >div
       height .15rem
       transform translateY(-100%)
+      p
+        min-width .5rem
       .name
         margin-top .05rem
     &:nth-of-type(1)
       >div
         border-left .01rem solid
       p
+        width 100%
         margin-left .05rem
     &:nth-of-type(2)
       >div
@@ -110,12 +158,14 @@ const areas = [
     display flex
     align-items center
     justify-content space-between
-    width 49%
     $box()
     color #ccc
     padding .05rem .08rem
+    &+div
+      flex 1
+      margin-left .05rem
     .orange-count
-      margin 0 .04rem .02rem 0
+      margin 0 .04rem .02rem 0.1rem
     span
       display flex
       align-items center

vue.config.js

+module.exports = {
+  devServer: {
+    proxy: {
+      '/api': {
+        target: 'http://ja-hm.omniview.pro/api/v2',
+        changeOrigin: true,
+        pathRewrite: {
+          '^/api': '',
+        },
+      },
+    },
+  },
+}