update 统计界面

Web/src/assets/style/extend.less

@@ -1,3 +1,6 @@
 @import '~ant-design-vue/dist/antd.less';
 @padding-xxs: 4px;
 @padding-xl: 32px;
+body {
+  line-height: 1.42857143;
+}

Web/src/assets/style/lib/form.less

@@ -323,3 +323,47 @@
     background: none;
   }
 }
+.yo-form-page {
+  .ant-form {
+    .ant-radio-button-wrapper {
+      margin-right: @padding-xs;
+      margin-bottom: @padding-xs;
+
+      border-left: @border-width-base @border-style-base @normal-color;
+      &:not(:first-child) {
+        &::before {
+          content: none;
+        }
+      }
+    }
+  }
+}
+.yo-filter-item {
+  display: flex;
+  flex-flow: row wrap;
+
+  margin-bottom: 0;
+  .ant-tag-checkable {
+    font-size: @font-size-base;
+  }
+  .ant-radio-button-wrapper {
+    border: 0 !important;
+    background-color: transparent;
+    &:hover {
+      color: @red-6;
+    }
+  }
+  .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
+    border-color: @red-6;
+    background-color: @red-6;
+    &:hover {
+      border-color: @red-5;
+      background-color: @red-5;
+    }
+    &:active {
+      border-color: @red-7;
+      background-color: @red-7;
+      box-shadow: none;
+    }
+  }
+}

Web/src/assets/style/lib/radio.less

@@ -1,15 +1,4 @@
 @import (reference) '~@/assets/style/extend.less';
-.ant-radio-button-wrapper {
-  margin-right: @padding-xs;
-  margin-bottom: @padding-xs;
-
-  border-left: @border-width-base @border-style-base @normal-color;
-  &:not(:first-child) {
-    &::before {
-      content: none;
-    }
-  }
-}
 .ant-radio-button-wrapper-checked {
   &:not(.ant-radio-button-wrapper-disabled),
   &:not(.ant-radio-button-wrapper-disabled):hover {

Web/src/pages/business/statistics/summary/index.vue

@@ -6,6 +6,20 @@
           <template v-for="(tab, index) in tabs">
             <a-tab-pane :force-render="true" :key="index" :tab="tab.title" v-if="tab.show"></a-tab-pane>
           </template>
+          <a-radio-group
+            :value="tabs.find(p => p.active).type"
+            @change="onStatisticsTypeChange"
+            button-style="solid"
+            class="block mt-xxs mr-md"
+            slot="tabBarExtraContent"
+          >
+            <a-radio-button class="mb-none" value="charts">
+              <a-icon type="bar-chart" />
+            </a-radio-button>
+            <a-radio-button class="mb-none" value="table">
+              <a-icon type="table" />
+            </a-radio-button>
+          </a-radio-group>
         </a-tabs>
         <div class="yo-tab-external-mount-content">
           <template v-for="(tab, index) in tabs">
@@ -15,7 +29,14 @@
               class="yo-tab-external-tabpane"
               v-if="tab.show"
             >
-              <p :key="n" v-for="n in 100">{{n}}</p>
+              <component
+                :id="id"
+                :is="tab.component"
+                :param="param"
+                :type="tab.type"
+                ref="forms"
+                v-if="tab.component"
+              />
             </div>
           </template>
         </div>
@@ -25,13 +46,24 @@
 </template>
 <script>
 export default {
+  props: ['id', 'param'],
+
   data() {
     return {
       tabs: [
         {
           title: '按房屋等级',
+          component: () => import('./tab1'),
           active: true,
           show: true,
+          type: 'charts',
+        },
+        {
+          title: '按房屋结构',
+          component: () => import('./tab2'),
+          active: false,
+          show: true,
+          type: 'charts',
         },
       ],
     };
@@ -42,6 +74,10 @@ export default {
         p.active = i === key;
       });
     },
+
+    onStatisticsTypeChange(e) {
+      this.tabs.find((p) => p.active).type = e.target.value;
+    },
   },
 };
 </script>

Web/src/pages/business/statistics/summary/tab1/charts.vue

@@ -0,0 +1,209 @@
+<template>
+  <section>
+    <a-row :gutter="16">
+      <a-col :span="8">
+        <a-card :bordered="false" type="inner">
+          <div :style="{ height: '400px' }" ref="chart-1"></div>
+        </a-card>
+      </a-col>
+      <a-col :span="16">
+        <a-card :bordered="false" type="inner">
+          <div :style="{ height: '400px' }" ref="chart-2"></div>
+        </a-card>
+      </a-col>
+    </a-row>
+    <a-card :bordered="false" type="inner">
+      <div :style="{ height: '400px' }" ref="chart-3"></div>
+    </a-card>
+  </section>
+</template>
+<script>
+import * as echarts from 'echarts';
+
+const echartsColors = [
+  { from: '#14dbff', to: '#007dff' },
+  { from: '#45f4a6', to: '#3bb27d' },
+  { from: '#fbb456', to: '#f1961b' },
+  { from: '#fa7148', to: '#ef5932' },
+];
+
+const itemColor = (index) => {
+  return {
+    type: 'linear',
+    x: 0,
+    y: 0,
+    x2: 1,
+    y2: 1,
+    colorStops: [
+      {
+        offset: 0,
+        color: echartsColors[index % echartsColors.length].from,
+      },
+      {
+        offset: 1,
+        color: echartsColors[index % echartsColors.length].to,
+      },
+    ],
+  };
+};
+
+export default {
+  mounted() {
+    this.onInitChart1();
+    this.onInitChart2();
+    this.onInitChart3();
+  },
+
+  methods: {
+    onInitChart1() {
+      const dom = this.$refs['chart-1'],
+        chart = echarts.init(dom);
+      chart.setOption({
+        legend: {
+          top: 'bottom',
+        },
+        tooltip: {
+          formatter: '<b>{b}</b> : {c}幢 ({d}%)',
+        },
+        toolbox: {
+          show: true,
+          feature: {
+            mark: { show: true },
+            restore: { show: true },
+            saveAsImage: { show: true },
+          },
+        },
+        series: [
+          {
+            name: '面积模式',
+            type: 'pie',
+            radius: [50, 150],
+            startAngle: 110,
+            center: ['50%', '50%'],
+            roseType: 'area',
+            label: {
+              formatter: '{d}',
+            },
+            data: [
+              {
+                value: 70,
+                name: 'A级',
+                itemStyle: {
+                  color: itemColor(0),
+                },
+              },
+              {
+                value: 38,
+                name: 'B级',
+                itemStyle: {
+                  color: itemColor(1),
+                },
+              },
+              {
+                value: 32,
+                name: 'C级',
+                itemStyle: {
+                  color: itemColor(2),
+                },
+              },
+              {
+                value: 30,
+                name: 'D级',
+                itemStyle: {
+                  color: itemColor(3),
+                },
+              },
+            ],
+          },
+        ],
+      });
+    },
+
+    onInitChart2() {
+      const dom = this.$refs['chart-2'],
+        chart = echarts.init(dom);
+      chart.setOption({
+        tooltip: {
+          formatter: '<b>{b}</b> : {c}幢',
+        },
+        toolbox: {
+          show: true,
+          feature: {
+            mark: { show: true },
+            restore: { show: true },
+            saveAsImage: { show: true },
+          },
+        },
+        xAxis: {
+          type: 'category',
+          data: ['A级', 'B级', 'C级', 'D级'],
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
+            barWidth: 20,
+            itemStyle: {
+              color: itemColor(0),
+              borderRadius: 10,
+            },
+            data: [120, 200, 150, 80],
+            type: 'bar',
+          },
+        ],
+      });
+    },
+
+    onInitChart3() {
+      const dom = this.$refs['chart-3'],
+        chart = echarts.init(dom);
+      chart.setOption({
+        tooltip: {
+          formatter: '<b>{b}</b> : {c}幢',
+        },
+        toolbox: {
+          show: true,
+          feature: {
+            mark: { show: true },
+            restore: { show: true },
+            saveAsImage: { show: true },
+          },
+        },
+        xAxis: {
+          type: 'category',
+          data: ['A级', 'B级', 'C级', 'D级'],
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
+            data: [820, 932, 800, 900],
+            showSymbol: false,
+            lineStyle: {
+              width: 5,
+              shadowBlur: 5,
+              shadowOffsetY: 3,
+              shadowColor: echartsColors[0].from,
+              opacity: 0.5,
+              cap: 'round',
+            },
+            itemStyle: {
+              color: itemColor(0),
+            },
+            type: 'line',
+            smooth: true,
+          },
+        ],
+      });
+    },
+  },
+};
+</script>
+<style scoped>
+.ant-card {
+  background-color: rgba(255, 255, 255, .8);
+}
+
+</style>

Web/src/pages/business/statistics/summary/tab1/index.vue

@@ -0,0 +1,79 @@
+<template>
+  <container>
+    <br />
+    <a-card :bordered="false" type="inner">
+      <a-form-model :label-col="{ flex: '70px' }" :wrapper-col="{ flex: '1' }">
+        <a-form-model-item class="yo-filter-item" label="房屋性质">
+          <a-radio-group :default-value="''" button-style="solid" size="small">
+            <a-radio-button value>全部</a-radio-button>
+            <a-radio-button value="1">住宅</a-radio-button>
+            <a-radio-button value="2">非住宅</a-radio-button>
+          </a-radio-group>
+        </a-form-model-item>
+        <a-divider class="mt-xs mb-xs" dashed />
+        <a-form-model-item class="yo-filter-item" label="审核状态">
+          <a-radio-group :default-value="''" button-style="solid" size="small">
+            <a-radio-button value>全部</a-radio-button>
+            <a-radio-button value="1">待建档</a-radio-button>
+            <a-radio-button value="2">暂存</a-radio-button>
+            <a-radio-button value="3">待提交</a-radio-button>
+            <a-radio-button value="4">退回</a-radio-button>
+            <a-radio-button value="5">待审核</a-radio-button>
+            <a-radio-button value="6">审核通过</a-radio-button>
+          </a-radio-group>
+        </a-form-model-item>
+        <a-divider class="mt-xs mb-xs" dashed />
+        <a-form-model-item class="yo-filter-item" label="土地性质">
+          <a-radio-group :default-value="''" button-style="solid" size="small">
+            <a-radio-button value>全部</a-radio-button>
+            <a-radio-button value="1">国有土地</a-radio-button>
+            <a-radio-button value="2">集体土地</a-radio-button>
+          </a-radio-group>
+        </a-form-model-item>
+        <a-divider class="mt-xs mb-xs" dashed />
+        <a-form-model-item class="yo-filter-item" label="筛选范围">
+          <a-cascader class="w-400" placeholder="请选择区域" />
+        </a-form-model-item>
+        <a-divider class="mt-xs mb-xs" dashed />
+        <div class="text-center">
+          <a-button class="mr-xs" type="primary">查询</a-button>
+          <a-button>导出Excel</a-button>
+        </div>
+      </a-form-model>
+    </a-card>
+    <StatisticsCharts v-if="renderList.indexOf('charts') > -1" v-show="type === 'charts'" />
+    <StatisticsTable v-if="renderList.indexOf('table') > -1" v-show="type === 'table'" />
+  </container>
+</template>
+<script>
+import StatisticsCharts from './charts';
+import StatisticsTable from './table';
+
+export default {
+  components: {
+    StatisticsCharts,
+    StatisticsTable,
+  },
+
+  props: {
+    type: {
+      type: String,
+      default: 'charts',
+    },
+  },
+
+  data() {
+    return {
+      renderList: ['charts'],
+    };
+  },
+
+  watch: {
+    type() {
+      if (this.renderList.indexOf(this.type) === -1) {
+        this.renderList.push(this.type);
+      }
+    },
+  },
+};
+</script>

Web/src/pages/business/statistics/summary/tab1/table.vue

@@ -0,0 +1,204 @@
+<template>
+  <a-card :bordered="false">
+    <a-table
+      :columns="columns"
+      :data-source="data"
+      :pagination="false"
+      :scroll="{ x: 'max-content', }"
+      bordered
+      size="middle"
+    />
+  </a-card>
+</template>
+<script>
+const columns = [
+  {
+    title: '区域',
+    dataIndex: 'area',
+    width: 150,
+  },
+  {
+    title: '总数',
+    children: [
+      {
+        title: '幢数(占比)',
+        dataIndex: 'z',
+        width: 120,
+      },
+      {
+        title: '建筑面积(占比)',
+        dataIndex: 'j',
+        width: 120,
+      },
+      {
+        title: '户数',
+        dataIndex: 'h',
+        width: 80,
+      },
+    ],
+  },
+  {
+    title: '房屋等级',
+    children: [
+      {
+        title: '一级',
+        children: [
+          {
+            title: '幢数',
+            dataIndex: 'z1',
+            width: 80,
+          },
+          {
+            title: '建筑面积',
+            dataIndex: 'j1',
+            width: 80,
+          },
+          {
+            title: '户数',
+            dataIndex: 'h1',
+            width: 80,
+          },
+        ],
+      },
+      {
+        title: '二级',
+        children: [
+          {
+            title: '幢数',
+            dataIndex: 'z2',
+            width: 80,
+          },
+          {
+            title: '建筑面积',
+            dataIndex: 'j2',
+            width: 80,
+          },
+          {
+            title: '户数',
+            dataIndex: 'h2',
+            width: 80,
+          },
+        ],
+      },
+      {
+        title: '三级',
+        children: [
+          {
+            title: '幢数',
+            dataIndex: 'z3',
+            width: 80,
+          },
+          {
+            title: '建筑面积',
+            dataIndex: 'j3',
+            width: 80,
+          },
+          {
+            title: '户数',
+            dataIndex: 'h3',
+            width: 80,
+          },
+        ],
+      },
+      {
+        title: '四级',
+        children: [
+          {
+            title: '幢数',
+            dataIndex: 'z4',
+            width: 80,
+          },
+          {
+            title: '建筑面积',
+            dataIndex: 'j4',
+            width: 80,
+          },
+          {
+            title: '户数',
+            dataIndex: 'h4',
+            width: 80,
+          },
+        ],
+      },
+      {
+        title: 'C级',
+        children: [
+          {
+            title: '幢数',
+            dataIndex: 'zc',
+            width: 80,
+          },
+          {
+            title: '建筑面积',
+            dataIndex: 'jc',
+            width: 80,
+          },
+          {
+            title: '户数',
+            dataIndex: 'hc',
+            width: 80,
+          },
+        ],
+      },
+      {
+        title: 'D级',
+        children: [
+          {
+            title: '幢数',
+            dataIndex: 'zd',
+            width: 80,
+          },
+          {
+            title: '建筑面积',
+            dataIndex: 'jd',
+            width: 80,
+          },
+          {
+            title: '户数',
+            dataIndex: 'hd',
+            width: 80,
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const data = [];
+for (let i = 0; i < 30; i++) {
+  data.push({
+    key: i,
+    area: 'John Brown',
+    z: 100,
+    j: 1222.33,
+    h: 39,
+    z1: 20,
+    j1: 20,
+    h1: 20,
+    z2: 20,
+    j2: 20,
+    h2: 20,
+    z3: 20,
+    j3: 20,
+    h3: 20,
+    z4: 20,
+    j4: 20,
+    h4: 20,
+    zc: 20,
+    jc: 20,
+    hc: 20,
+    zd: 20,
+    jd: 20,
+    hd: 20,
+  });
+}
+
+export default {
+  data() {
+    return {
+      data,
+      columns,
+    };
+  },
+};
+</script>

Web/src/pages/business/statistics/summary/tab2/charts.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>页签2 统计图</div>
+</template>

Web/src/pages/business/statistics/summary/tab2/index.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    页签2
+    <StatisticsCharts v-show="type === 'charts'" />
+    <StatisticsTable v-show="type === 'table'" />
+  </div>
+</template>
+<script>
+import StatisticsCharts from './charts';
+import StatisticsTable from './table';
+
+export default {
+  components: {
+    StatisticsCharts,
+    StatisticsTable,
+  },
+
+  props: {
+    type: {
+      type: String,
+      default: 'charts',
+    },
+  },
+};
+</script>

Web/src/pages/business/statistics/summary/tab2/table.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>页签2 统计表</div>
+</template>

Web/vue.config.js

@@ -25,5 +25,7 @@ module.exports = {
         plugins: [
             new MonacoWebpackPlugin()
         ]
-    }
+    },
+
+    productionSourceMap: false
 }