有诉必答 complete

src/components/MyComponent/MyChart/my-line.vue

@@ -75,19 +75,32 @@ export default defineComponent({
       legend: {},
       grid: {
         left: '2%',
-        right: '4%',
+        right: '5%',
         bottom: '1%',
+        top: '20%',
         containLabel: true,
       },
       xAxis: [
         {
           type: 'category',
           boundaryGap: false,
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(47,134,238,0.3)',
+            },
+          },
         },
       ],
       yAxis: [
         {
           type: 'value',
+          splitLine: {
+            show: true,
+            lineStyle: {
+              // color: 'rgba(91,213,255,0.3)'
+              color: 'rgba(47,134,238,0.3)',
+            },
+          },
         },
       ],
     }

src/components/MyComponent/MyChart/my-radar.vue

@@ -74,6 +74,7 @@ export default defineComponent({
       },
       radar: {
         name: {
+          show: false,
           textStyle: {
             color: '#fff',
             backgroundColor: 'rgba(255,255,255,.3)',
@@ -118,7 +119,7 @@ export default defineComponent({
       },
     }
     const { chartRef, initChart } = useChartGenerate(
-      defaultOption,
+      props.option ? Object.assign(defaultOption, props.option) : defaultOption,
       defaultSeriesItem,
       props.format
     )
@@ -126,7 +127,7 @@ export default defineComponent({
       initChart(props.dataset, props.option)
     })
     watchEffect(() => {
-      (defaultOption as any).radar.indicator =
+      ;(defaultOption as any).radar.indicator =
         props.dataset &&
         props.dataset.dimensions &&
         props.dataset.dimensions.map((d) => ({

src/view/components/tabs.vue

@@ -57,6 +57,7 @@ export default defineComponent({
     flex 1
     display flex
     flex-direction column
+    justify-content space-between
     width inherit
     cursor pointer
     &.on

src/view/right/complain.vue

@@ -12,11 +12,35 @@
     <div class="manage">
       <Tabs :list="tabList" />
       <div class="content">
-        <m-line :dataset="responseChartData" :option="chartOption"></m-line>
+        <SubTitle>响应度</SubTitle>
+        <div class="chart">
+          <m-line :dataset="responseChartData" :option="chartOption" />
+        </div>
+        <SubTitle>分类排行</SubTitle>
+        <div class="chart wrapper">
+          <div>
+            <m-radar :dataset="classChartData" :option="chartOption2" />
+          </div>
+          <div>
+            <p v-for="item in classChartData.dimensions" :key="item.name">
+              <span /> {{ item.displayName }}：
+              {{ classChartData.source[0][item.name] }}
+            </p>
+          </div>
+        </div>
       </div>
     </div>
     <div class="emergency">
       <m-sub>紧急案件</m-sub>
+      <div class="detail">
+        <div>
+          <p>综合管理 · 事件分类 · 来源</p>
+          <span>上海市黄浦区北京东路31-91号益丰·外滩源</span>
+        </div>
+        <div>
+          内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述
+        </div>
+      </div>
     </div>
   </m-card>
 </template>
@@ -24,10 +48,12 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
 import Tabs, { TabsProp } from '../components/tabs.vue'
+import SubTitle from '../components/sub-title.vue'
+import { ECOption } from '@/components/MyComponent/MyChart/my-line.vue'
 
 export default defineComponent({
   name: 'Complain',
-  components: { Tabs },
+  components: { Tabs, SubTitle },
   setup() {
     const summary = ref([
       {
@@ -76,25 +102,83 @@ export default defineComponent({
         { name: '15-16', data1: 150, data2: 100 },
       ],
     })
-    const chartOption = ref({
+    const chartOption = ref<ECOption>({
       color: ['#9B88F9', 'gold'],
+      legend: {
+        right: '1%',
+      },
+    })
+    const classChartData = ref({
+      dimensions: [
+        { name: 'class1', displayName: '分类1', max: 500 },
+        { name: 'class2', displayName: '分类2', max: 500 },
+        { name: 'class3', displayName: '分类3', max: 500 },
+        { name: 'class4', displayName: '分类4', max: 500 },
+        { name: 'class5', displayName: '分类5', max: 500 },
+      ],
+      source: [
+        {
+          seriesName: '分类排行',
+          class1: 150,
+          class2: 200,
+          class3: 200,
+          class4: 300,
+          class5: 230,
+        },
+      ],
+    })
+    const chartOption2 = ref({
+      color: ['#FF9D27'],
+      legend: { show: false },
+      radar: {
+        name: {
+          // show: false,
+          color: 'transparent',
+        },
+        indicator: {},
+        splitArea: {
+          areaStyle: {
+            color: [
+              'rgba(1,124,143,.9)',
+              'rgba(1,124,143,.7)',
+              'rgba(1,124,143,.5)',
+              'rgba(1,124,143,.3)',
+              'rgba(1,124,143,.1)',
+            ],
+          },
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: 'rgba(255,255,255,.3)',
+          },
+        },
+        axisLine: {
+          show: false,
+        },
+        radius: '80%',
+      },
     })
     return {
       summary,
       tabList,
       responseChartData,
       chartOption,
+      classChartData,
+      chartOption2,
     }
   },
 })
 </script>
 
 <style lang="stylus" scoped>
+@import '../../components/MyComponent/main.styl'
+
 .summary
   display flex
   justify-content space-between
   align-items center
-  margin .1rem 0
+  margin-top .1rem
   >div
     display flex
     align-items center
@@ -107,6 +191,57 @@ export default defineComponent({
         color #ccc
 .manage
   display flex
+  height 60%
+  // margin-bottom .05rem
   .content
     flex 1
+    padding-left .1rem
+    .chart
+      width 100%
+      height 43%
+      &.wrapper
+        display flex
+        >div
+          width 50%
+          height 100%
+          &:last-child
+            $center()
+            flex-direction column
+            p
+              display flex
+              align-items center
+              span
+                display inline-block
+                width .06rem
+                height @width
+                border-radius 50%
+                margin-right .1rem
+                background #826AFA
+              &:nth-of-type(2) > span
+                background #E02020
+              &:nth-of-type(3) > span
+                background #F7B500
+              &:nth-of-type(4) > span
+                background #6DD400
+              &:nth-of-type(5) > span
+                background #32C5FF
+.emergency
+  overflow hidden
+  .detail
+    display flex
+    flex-direction column
+    padding .1rem
+    background url('@/assets/images/border2.png') 100% / 100% 100% no-repeat
+    margin-bottom .05rem
+    >div
+      flex 1
+      &:first-child
+        border-bottom .01rem solid $primary-border
+        padding-bottom .05rem
+        margin-bottom @padding-bottom
+      span
+        color #ccc
+      p
+        font-size .12rem
+        font-weight bold
 </style>