接入物业三驾马车数据

src/ajax/api.ts

 let BASE_URL = ''
 switch (process.env.NODE_ENV) {
   case 'production':
-    BASE_URL = ''
+    BASE_URL = 'http://nandong-dev.omniview.pro/api'
     break
   default:
-    BASE_URL = ''
+    BASE_URL = '/api'
 }
 
 export default {
   BASE_URL,
-  TEST_URL: 'https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js',
+  GET_BUILDING: '/service-basicdatasync-ddd/building',
+  GET_STATION: '/service-special-nandong/workstations',
+  GET_INDUSTRY_AUTHORITY: '/service-basicdatasync-ddd/indCous',
+  GET_COMMITTEE: '/service-basicdatasync-ddd/residentsCommittees',
+  GET_COMPANY: '/service-basicdatasync-ddd/propCompanies',
+  GET_CASE: '/service-special-nandong/compairs',
 }

src/ajax/axios.ts

-import axios, { AxiosRequestConfig, AxiosInstance, AxiosPromise } from 'axios'
+import axios, { AxiosRequestConfig, AxiosPromise } from 'axios'
 import qs from 'qs'
 import api from './api'
 import store from '@/store'
@@ -10,7 +10,8 @@ const Axios = axios.create({
 Axios.interceptors.request.use(
   (config) => {
     // 添加token
-    // config.headers.Authorization = 'token'
+    config.headers.Authorization =
+      'bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiMSIsImVuYWJsZSI6dHJ1ZSwic2NvcGUiOlsicmVhZCIsIndyaXRlIiwidHJ1c3QiXSwiZXhwIjoxNjE2NzQ5MjI3LCJqdGkiOiJjYjY4YjhmMC1mODM0LTRjMzEtOGEzYS05ZWQ2OTE4OWFjYjYiLCJjbGllbnRfaWQiOiJzc28iLCJ0aW1lc3RhbXAiOjE2MTY3NDIwMjc5NzJ9.B2o40R6Tb1jxxcBF9e-MEPNCERDblYtaOoqmHiVgWXJTaZJw_I2i4xFwdmC9wDm1aqWGNHjUPUO9knF3wv_U7g1IwAiVIp_kbk158qjrOBG7C72x5Tl-0DHiCd78nQvDsQiB2rldo9lGh0JF5oD9LgL1iEUsQshJjQlyYMePIS_bYlClQP3uYyNKaFEEZcQH5EqciCIcTLa5y8WtiSzDCnc7fDpNmfDxmb54M39r-2QsxOrtTJ_9QkerzupPCu7XX_GCWqNvtbAV3FuaLYk3sw6jxj07aIe1QOLKAiF233v8T8mPstrp6BNzIBBVDeoHu__XcpyqDJxRNuQXRp-n8w'
     return config
   },
   (error) => {
@@ -22,8 +23,6 @@ Axios.interceptors.response.use(
   (response) => {
     // TODO 返回的数据status判断错误操作等……
     store.commit('SET_LOADING', false)
-    console.log('res', response.data)
-
     return response.data
   },
   (error) => {
@@ -113,17 +112,17 @@ const ajax = ({
 }
 
 export default {
-  get(args: RequestOptions): AxiosPromise<AxiosInstance> {
+  get(args: RequestOptions): AxiosPromise<any> {
     return ajax({ method: 'GET', ...args })
   },
-  post(args: RequestOptions): AxiosPromise<AxiosInstance> {
+  post(args: RequestOptions): AxiosPromise<any> {
     // args.contentType = 'application/x-www-form-urlencoded;charset=UTF-8'
     return ajax({ method: 'POST', ...args })
   },
-  put(args: RequestOptions): AxiosPromise<AxiosInstance> {
+  put(args: RequestOptions): AxiosPromise<any> {
     return ajax({ method: 'PUT', ...args })
   },
-  delete(args: RequestOptions): AxiosPromise<AxiosInstance> {
+  delete(args: RequestOptions): AxiosPromise<any> {
     return ajax({ method: 'DELETE', ...args })
   },
 }

src/components/MyComponent/MyForm/my-form.vue

@@ -22,11 +22,7 @@
       </div>
     </div>
     <MyModal v-model="showImgModal" title="照片预览">
-      <img
-        v-if="showImgModal && imgSrc"
-        style="max-height: 45vh; width: 100%"
-        :src="imgSrc"
-      />
+      <img v-if="showImgModal && imgSrc" style="width: 100%" :src="imgSrc" />
     </MyModal>
   </div>
 </template>

src/hooks/useChartGenerate.ts

-import { onMounted, onBeforeUnmount, nextTick, shallowRef, Ref } from 'vue'
-import * as echarts from 'echarts/core'
-import {
-  DatasetComponentOption,
-  TitleComponentOption,
-  TooltipComponentOption,
-  GridComponentOption,
-  LegendComponentOption,
-} from 'echarts/components'
-
-import {
-  LineSeriesOption,
-  BarSeriesOption,
-  PieSeriesOption,
-  RadarSeriesOption,
-  ScatterSeriesOption,
-} from 'echarts/charts'
-
-type ECOption = echarts.ComposeOption<
-  | DatasetComponentOption
-  | TitleComponentOption
-  | TooltipComponentOption
-  | GridComponentOption
-  | LegendComponentOption
-  | LineSeriesOption
-  | BarSeriesOption
-  | PieSeriesOption
-  | RadarSeriesOption
-  | ScatterSeriesOption
->
-
-interface ReturnProp {
-  chartRef: Ref<null | HTMLElement>
-  initChart: (dataset: DatasetComponentOption, option: ECOption) => void
-}
-
-/**
- * 构建图表组件公共方法
- * @param defaultOption 默认配置
- * @param defaultSeriesItem 默认的series项
- * @param fn 自定义的合并配置的方法
- */
-export default function useChartGenerate<T extends ECOption, U>(
-  defaultOption: T,
-  defaultSeriesItem?: U,
-  fn?: (dataset: DatasetComponentOption, option: any) => ECOption
-): ReturnProp {
-  const chartRef = shallowRef<null | HTMLElement>(null)
-  const myChart = shallowRef<null | echarts.ECharts>(null)
-
-  /**
-   * 由于radar图的dataset支持不好，故这里根据数据集中source数组里的seriesName来重置tooltip显示的名字
-   * @param originOptions 图标配置
-   * @param dataset 数据集
-   */
-  const formatRadarSeries = (originOptions: ECOption, dataset: any) => {
-    const source = dataset && dataset.source
-    const length = (source && source.length) || 0
-    const options = JSON.parse(JSON.stringify(originOptions))
-
-    options.series = [
-      {
-        type: 'radar',
-        data: [],
-      },
-    ]
-    for (let index = 0; index < length; index++) {
-      const data: number[] = []
-      Object.keys(source[index]).forEach((key) => {
-        if (key !== 'seriesName') {
-          data.push(source[index][key])
-        }
-      })
-      options.series[0].data.push(
-        Object.assign({}, defaultSeriesItem, {
-          value: data,
-          name: source[index].seriesName,
-        })
-      )
-    }
-    return options
-  }
-
-  /**
-   * 根据默认配置设置series，有自定义配置则覆盖默认配置
-   * @param dataset 数据集
-   * @param option 自定义图表配置
-   */
-  const mergeOptions = (
-    dataset: DatasetComponentOption,
-    option?: ECOption
-  ): ECOption => {
-    let length = 0
-    if (dataset) {
-      defaultOption.dataset = dataset
-      if (dataset.dimensions) {
-        length = dataset.dimensions.length - 1
-      } else if (dataset.source) {
-        length =
-          Object.keys(
-            (Array.isArray(dataset.source) && dataset.source[0]) || []
-          ).length - 1
-      }
-    }
-    if (!defaultOption.series || (defaultOption.series as any[]).length === 0) {
-      defaultOption.series = []
-      for (let index = 0; index < length; index++) {
-        defaultSeriesItem && defaultOption.series.push(defaultSeriesItem)
-      }
-    }
-    if ((defaultSeriesItem as any).type === 'radar') {
-      return Object.assign(
-        {},
-        formatRadarSeries(defaultOption, dataset),
-        option || {}
-      )
-    }
-    return Object.assign({}, defaultOption, option || {})
-  }
-
-  /**
-   * 将图表配置中的color选项如果有数组项则转换为渐变
-   * @param options 图表配置
-   */
-  const formatColorOption = (options: ECOption): ECOption => {
-    if (!options.color || (options.color as string[]).length === 0) {
-      return options
-    }
-    options.color = (options.color as string[]).map((color) => {
-      if (Array.isArray(color)) {
-        if (color.length < 2) {
-          console.error('Echarts color选项里的数组参数至少需要2个字符串元素！')
-          return 'black'
-        }
-        return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          {
-            offset: 0,
-            color: color[0],
-          },
-          {
-            offset: 1,
-            color: color[1],
-          },
-        ])
-      }
-      return color
-    })
-    return options
-  }
-
-  /**
-   * 根据数据集和配置初始化图表
-   * @param dataset 数据集
-   * @param option 自定义图表配置
-   */
-  const initChart = (dataset: DatasetComponentOption, option?: ECOption) => {
-    if (!myChart.value) return
-    const options = fn ? fn(dataset, option) : mergeOptions(dataset, option)
-    if (
-      !options.series ||
-      (Array.isArray(options.series) && options.series.length === 0)
-    ) {
-      return
-    }
-    const resultOptions = formatColorOption(options)
-    myChart.value.setOption(resultOptions, true)
-  }
-
-  /**
-   * 根据屏幕大小自动调整图表尺寸
-   */
-  const handleResize = () => {
-    if (!myChart.value) return
-    myChart.value.resize()
-  }
-
-  onMounted(async () => {
-    window.addEventListener('resize', handleResize)
-    await nextTick()
-    myChart.value = echarts.init(chartRef.value as HTMLElement, 'dark')
-  })
-
-  onBeforeUnmount(() => {
-    window.removeEventListener('resize', handleResize)
-    if (!myChart.value) return
-    myChart.value.dispose()
-    myChart.value = null
-  })
-
-  return { chartRef, initChart }
-}

src/store/actions.ts

-export default {}
+import { ajax, api } from '@/ajax'
+import { Dispatch, Commit } from 'vuex'
+
+export default {
+  initData({ dispatch }: { dispatch: Dispatch }): void {
+    dispatch('getPropertySummary')
+  },
+  // 物业三架马车数据
+  async getPropertySummary({ commit }: { commit: Commit }): Promise<void> {
+    const {
+      GET_COMMITTEE: url1,
+      GET_INDUSTRY_AUTHORITY: url2,
+      GET_COMPANY: url3,
+    } = api
+    const [num1, num2, num3] = await Promise.all(
+      [url1, url2, url3].map(async (url) => {
+        return (await ajax.get({ url, params: { pageSize: 1 } })).data.totalRows
+      })
+    )
+    commit('SET_PROPERTY_SUMMARY', { num1: +num1, num2: +num2, num3: +num3 })
+  },
+}

src/store/index.ts

@@ -13,6 +13,7 @@ export interface GlobalStateProps {
   curView: ViewType
   readonly viewOptions: ViewType[]
   curTheme: ThemeType
+  propertySummary: { [key: string]: number }
 }
 export default createStore<GlobalStateProps>({
   state,

src/store/mutations.ts

@@ -10,4 +10,7 @@ export default {
   SET_CURRENT_THEME(state: GlobalStateProps, val: ThemeType): void {
     state.curTheme = val
   },
+  SET_PROPERTY_SUMMARY(state: GlobalStateProps, val: number[]): void {
+    state.propertySummary = val
+  },
 }

src/store/state.ts

@@ -9,4 +9,5 @@ export default {
     { name: '第三工作站', type: 'work3' },
   ],
   curTheme: 'manage',
+  propertySummary: {},
 } as GlobalStateProps

src/view/left/command.vue

@@ -83,7 +83,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue'
+import { defineComponent, ref, computed } from 'vue'
 import Tabs, { TabsProp } from '../components/tabs.vue'
 import SubTitle from '../components/sub-title.vue'
 import Summary, { SummaryProp } from '../components/summary.vue'
@@ -96,6 +96,7 @@ import icon2 from '@/assets/images/icon2.png'
 import icon3 from '@/assets/images/icon3.png'
 import icon4 from '@/assets/images/icon4.png'
 import icon5 from '@/assets/images/icon5.png'
+import store from '@/store'
 export default defineComponent({
   name: 'Command',
   components: { Tabs, SubTitle, Summary, Brief, Cricle },
@@ -206,27 +207,30 @@ export default defineComponent({
         unit: '人',
       },
     ])
-    const propertySummary = ref<BriefProp[]>([
+    const propertySummary = computed(() => {
+      const { num1, num2, num3 } = store.state.propertySummary
+      return [
         {
           name: '居委会',
-        value: 10,
+          value: num1 || 0,
           icon: icon3,
         },
         {
           name: '业委会',
-        value: 15,
+          value: num2 || 0,
           icon: icon4,
         },
         {
           name: '物业企业',
-        value: 20,
+          value: num3 || 0,
           icon: icon5,
         },
         {
           name: '交叉任职',
           value: 5,
         },
-    ])
+      ]
+    })
     const economicList = ref([
       {
         name: '商办空置率',

src/view/main.vue

@@ -58,6 +58,7 @@ import MapBtns from './components/map-btns.vue'
 import CaseDrawer from './drawers/case-drawer.vue'
 import PopulationDrawer from './drawers/population-drawer.vue'
 import store from '@/store'
+import { ajax, api } from '@/ajax'
 
 export default defineComponent({
   name: 'Main',
@@ -74,6 +75,7 @@ export default defineComponent({
     PopulationDrawer,
   },
   setup() {
+    store.dispatch('initData')
     const curViewType = computed(() => store.state.curView.type)
     const curTheme = computed(() => store.state.curTheme)
     const streetComponentList = computed(() => [
@@ -92,6 +94,13 @@ export default defineComponent({
     ])
     const fullScreen = ref(false)
     const showDrawer = ref(false)
+    ajax
+      .get({
+        url: api.GET_CASE,
+      })
+      .then((res) => {
+        console.log(res)
+      })
     return {
       curViewType,
       curTheme,

vite.config.js

@@ -12,4 +12,13 @@ export default defineConfig({
     },
   },
   base: './',
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://nandong-dev.omniview.pro/api',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, ''),
+      },
+    },
+  },
 })