云图

front/src/api/capabilityCloud.js

@@ -6,3 +6,39 @@ export function KnowledgeBaseStatic() {
     method: 'get',
   })
 }
+//能力云图-概览总数
+export function wholeAmount() {
+  return request({
+    url: '/census/center/v2/whole_amount',
+    method: 'get',
+  })
+}
+//能力云图-概览ehcarts
+export function trafficStatistics(data) {
+  return request({
+    url: '/census/center/v2/trafficStatistics',
+    method: 'post',
+    data,
+  })
+}
+//能力云图-应用资源总数
+export function applicationNum() {
+  return request({
+    url: '/census/center/v2/applicationNum',
+    method: 'get',
+  })
+}
+//能力云图-区市应用资源排名
+export function districtResourceRank() {
+  return request({
+    url: '/census/center/v2/districtResourceRank',
+    method: 'get',
+  })
+}
+//能力云图-委办局应用资源分布
+export function cityResourceRank() {
+  return request({
+    url: '/census/center/v2/cityResourceRank',
+    method: 'get',
+  })
+}

front/src/views/capabilityCloud/components/ApplicationResources.vue

@@ -1,12 +1,383 @@
 <!--
  * @Author: hisense.liangjunhua
- * @Date: 2022-06-19 10:15:33
+ * @Date: 2022-06-19 10:16:10
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-19 10:16:46
+ * @LastEditTime: 2022-06-19 17:02:39
  * @Description: 告诉大家这是什么
 -->
 <template>
-  <div class="application-resources">应用资源</div>
+  <div class="application-resources">
+    <div class="top"><span class="title">应用资源</span></div>
+    <div class="bottom">
+      <div class="left">
+        <div class="item">
+          <div class="img"></div>
+          <div class="content">
+            <div class="name">总应用数</div>
+            <div claSS="num">{{ num1 }}</div>
+          </div>
+        </div>
+        <div class="item">
+          <div class="img"></div>
+          <div class="content">
+            <div class="name">建设中应用数</div>
+            <div claSS="num">{{ num2 }}</div>
+          </div>
+        </div>
+        <div class="item">
+          <div class="img"></div>
+          <div class="content">
+            <div class="name">停用应用数</div>
+            <div claSS="num">{{ num3 }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="nav">
+          <div
+            :class="{ select: select == '委办局应用资源分布' }"
+            @click="selectNav('委办局应用资源分布')"
+          >
+            委办局应用资源分布
+            <i v-show="select == '委办局应用资源分布'"></i>
+          </div>
+          <div
+            :class="{ select: select == '区市应用资源排名' }"
+            @click="selectNav('区市应用资源排名')"
+          >
+            区市应用资源排名
+            <i v-show="select == '区市应用资源排名'"></i>
+          </div>
+        </div>
+        <div class="echarts-box2" id="echarts-box2"></div>
+      </div>
+    </div>
+  </div>
 </template>
-<script setup></script>
-<style lang="less" scoped></style>
+<script setup>
+  import * as echarts from 'echarts'
+  import { ref, onMounted } from 'vue'
+  import {
+    applicationNum,
+    districtResourceRank,
+    cityResourceRank,
+  } from '@/api/capabilityCloud'
+  const num1 = ref(0)
+  const num2 = ref(0)
+  const num3 = ref(0)
+  const select = ref('区市应用资源排名')
+  let myChart = null
+  const selectNav = (val) => {
+    select.value = val
+    switch (val) {
+      case '区市应用资源排名':
+        districtResourceRank().then((res) => {
+          res.data.data = res.data.data.splice(0, 5)
+          option.xAxis.data = []
+          option.series[0].data = []
+          option.series[1].data = []
+          option.yAxis[0].max = res.data.data[0].count * 1.5
+          res.data.data.forEach((val) => {
+            option.xAxis.data.push(val.deptName)
+            option.series[0].data.push(val.count)
+            option.series[1].data.push(val.count)
+          })
+          myChart.setOption(option)
+        })
+        break
+      case '委办局应用资源分布':
+        cityResourceRank().then((res) => {
+          res.data.data = res.data.data.splice(0, 5)
+          option.xAxis.data = []
+          option.series[0].data = []
+          option.series[1].data = []
+          option.yAxis[0].max = res.data.data[0].count * 1.5
+          res.data.data.forEach((val) => {
+            option.xAxis.data.push(val.deptName)
+            option.series[0].data.push(val.count)
+            option.series[1].data.push(val.count)
+          })
+          myChart.setOption(option)
+        })
+        break
+    }
+  }
+  applicationNum().then((res) => {
+    num1.value =
+      res.data.data.filter((val) => val.type == '总应用数')[0].amount || 0
+    num2.value =
+      res.data.data.filter((val) => val.type == '建设中应用数')[0].amount || 0
+    num3.value =
+      res.data.data.filter((val) => val.type == '停用应用数')[0].amount || 0
+  })
+  const option = {
+    animation: true,
+    grid: {
+      top: '5%',
+      bottom: '15%',
+      right: '5%',
+    },
+    xAxis: {
+      data: [],
+      axisLine: {
+        show: true, //隐藏X轴轴线
+      },
+      axisTick: {
+        show: false, //隐藏X轴轴线
+      },
+      splitLine: {
+        show: false,
+        lineStyle: {
+          color: 'rgba(77, 128, 254, 0.2)',
+          width: 2,
+        },
+      },
+      axisLabel: {
+        show: true,
+        fontSize: 14,
+        textStyle: {
+          color: 'rgb(255,255,255,0.5)', //X轴文字颜色
+        },
+        // interval: 0,
+        // rotate: 30,
+        interval: 0,
+        formatter: function (value) {
+          var ret = '' //拼接加 返回的类目项
+          var maxLength = 6 //每项显示文字个数
+          var valLength = value.length //X轴类目项的文字个数
+          var rowN = Math.ceil(valLength / maxLength) //类目项需要换行的行数
+          if (rowN > 1) {
+            //如果类目项的文字大于3,
+            for (var i = 0; i < rowN; i++) {
+              var temp = '' //每次截取的字符串
+              var start = i * maxLength //开始截取的位置
+              var end = start + maxLength //结束截取的位置
+              //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
+              temp = value.substring(start, end) + '\n'
+              ret += temp //凭借最终的字符串
+            }
+            return ret
+          } else {
+            return value
+          }
+        },
+      },
+    },
+    yAxis: [
+      {
+        type: 'value',
+        gridIndex: 0,
+        min: 0,
+        max: 100,
+        interval: 25,
+        // splitNumber: 4,
+        splitLine: {
+          show: false,
+          lineStyle: {
+            color: 'rgba(77, 128, 254, 0.2)',
+            width: 2,
+          },
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLine: {
+          show: false,
+          lineStyle: {
+            color: 'rgba(77, 128, 254, 0.2)',
+          },
+        },
+        axisLabel: {
+          show: false,
+          margin: 14,
+          fontSize: 16,
+          textStyle: {
+            color: '#65D5FF',
+          },
+        },
+      },
+    ],
+    series: [
+      {
+        name: '设备在线率',
+        type: 'bar',
+        barWidth: 30,
+        itemStyle: {
+          normal: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: 'rgba(146, 225, 255, 1)',
+              },
+              {
+                offset: 1,
+                color: 'rgba(0, 151, 251, 1)',
+              },
+            ]),
+            label: {
+              // 标签显示位置
+              show: true,
+              position: 'top', // insideTop 或者横向的 insideLeft
+              color: '#fff',
+            },
+          },
+        },
+        data: [],
+        z: 10,
+        zlevel: 0,
+      },
+      {
+        // 分隔
+        type: 'pictorialBar',
+        itemStyle: {
+          normal: {
+            color: '#0F375F',
+          },
+        },
+        symbolRepeat: 'fixed',
+        symbolMargin: 6,
+        symbol: 'rect',
+        symbolClip: true,
+        symbolSize: [32, 2],
+        symbolPosition: 'start',
+        symbolOffset: [1, 1],
+        data: [],
+        width: 2,
+        z: 0,
+        zlevel: 1,
+      },
+    ],
+    dataZoom: [
+      {
+        type: 'slider',
+        show: false,
+        xAxisIndex: [0],
+        endValue: 4,
+        startValue: 0,
+      },
+    ],
+  }
+
+  onMounted(() => {
+    const chart = document.getElementById('echarts-box2')
+    if (chart) {
+      myChart = echarts.init(chart)
+      myChart.setOption(option)
+      window.addEventListener('resize', function () {
+        myChart.resize()
+      })
+    }
+    selectNav('委办局应用资源分布')
+  })
+</script>
+<style lang="less" scoped>
+  .application-resources {
+    width: 9.24rem;
+    height: 4.65rem;
+    background: rgba(0, 108, 188, 0.1);
+    border-radius: 2px;
+    border: 1px solid rgba(0, 108, 188, 0.7);
+    .top {
+      font-size: 24px;
+      background: url(~@/assets/capabilityCloud/top_bg.png) no-repeat;
+      text-align: center;
+    }
+    .bottom {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0.2rem;
+      .left {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        .item {
+          width: 2.6rem;
+          height: 1.12rem;
+          background: linear-gradient(
+            to bottom,
+            rgba(33, 54, 88, 0.5),
+            rgba(33, 54, 88, 0)
+          );
+          margin-top: 0.14rem;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          .img {
+            width: 0.66rem;
+            height: 0.66rem;
+            margin-right: 0.26rem;
+          }
+          .content {
+            .name {
+              font-size: 16px;
+              color: #fff;
+            }
+            .num {
+              font-size: 32px;
+              color: #1ef6f5;
+            }
+          }
+        }
+        .item:nth-of-type(1) {
+          margin-top: 0;
+          .img {
+            background: url('~@/assets/capabilityCloud/zyys.png') no-repeat;
+            background-size: 100% 100%;
+          }
+        }
+        .item:nth-of-type(2) .img {
+          background: url('~@/assets/capabilityCloud/jszyys.png') no-repeat;
+          background-size: 100% 100%;
+          margin-left: 0.2rem;
+        }
+        .item:nth-of-type(3) .img {
+          background: url('~@/assets/capabilityCloud/tyyys.png') no-repeat;
+          background-size: 100% 100%;
+        }
+      }
+      .right {
+        width: 6.53rem;
+        height: 3.54rem;
+        over-flow: hidden;
+        position: relative;
+        .nav {
+          position: absolute;
+          z-index: 10;
+          top: 0.3rem;
+          left: 0;
+          display: flex;
+          justify-content: space-between;
+          padding: 0 1.5rem;
+          & > div {
+            cursor: pointer;
+            background: rgba(8, 153, 231, 0.3);
+            padding: 0.1rem 0.2rem;
+            margin-left: 0.1rem;
+            color: #fff;
+            position: relative;
+            i {
+              display: inline-block;
+              width: 100%;
+              height: 0.1rem;
+              background: url('~@/assets/capabilityCloud/select_sj.png')
+                no-repeat;
+              background-position: center;
+              position: absolute;
+              top: 0.4rem;
+              left: 0;
+            }
+          }
+          .select {
+            background: url(~@/assets/capabilityCloud/select.png) no-repeat;
+            background-size: 100%;
+          }
+        }
+        .echarts-box2 {
+          width: 6.53rem;
+          height: 4.04rem;
+        }
+      }
+    }
+  }
+</style>

front/src/views/capabilityCloud/components/PlatformOverview.vue

@@ -2,11 +2,235 @@
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-19 10:15:33
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-19 10:16:05
+ * @LastEditTime: 2022-06-19 16:50:27
  * @Description: 告诉大家这是什么
 -->
 <template>
-  <div class="platform-overview">平台概览</div>
+  <div class="platform-overview">
+    <div class="top"><span class="title">平台概览</span></div>
+    <div class="bottom">
+      <div class="left">
+        <div class="item">
+          <div class="name">平台访问量</div>
+          <div claSS="num">{{ num1 }}</div>
+        </div>
+        <div class="item">
+          <div class="name">用户量</div>
+          <div claSS="num">{{ num2 }}</div>
+        </div>
+      </div>
+      <div class="right" :key="showKey">
+        <div class="title">浏览趋势</div>
+        <div class="echarts-box" id="echarts-box"></div>
+      </div>
+    </div>
+  </div>
 </template>
-<script setup></script>
-<style lang="less" scoped></style>
+<script setup>
+  import * as echarts from 'echarts'
+  import * as moment from 'moment'
+  import { ref, onMounted } from 'vue'
+  import { wholeAmount, trafficStatistics } from '@/api/capabilityCloud'
+  const num1 = ref(0)
+  const num2 = ref(0)
+  const showKey = ref(0)
+  wholeAmount().then((res) => {
+    num1.value =
+      res.data.data.filter((val) => val.type == '平台访问量')[0].amount || 0
+    num2.value =
+      res.data.data.filter((val) => val.type == '用户量')[0].amount || 0
+  })
+  // 获取近七天日期
+  const getDate = () => {
+    const date = []
+    for (let i = 0; i < 7; i++) {
+      date.push(moment().subtract(i, 'days').format('YYYY-MM-DD'))
+    }
+    return date.reverse()
+  }
+  const dateList = getDate()
+  var charts = {
+    unit: '次',
+    names: ['浏览'],
+    lineX: dateList,
+    value: [[]],
+  }
+  var color = ['rgba(23, 255, 243']
+  var lineY = []
+
+  for (var i = 0; i < charts.names.length; i++) {
+    var x = i
+    if (x > color.length - 1) {
+      x = color.length - 1
+    }
+    var data = {
+      name: charts.names[i],
+      type: 'line',
+      color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
+        {
+          offset: 0,
+          color: '#00b5ff',
+        },
+        {
+          offset: 1,
+          color: '#39da78',
+        },
+      ]),
+      smooth: true,
+      areaStyle: {
+        normal: {
+          color: new echarts.graphic.LinearGradient(
+            0,
+            0,
+            0,
+            1,
+            [
+              {
+                offset: 0,
+                color: 'rgba(33, 34, 35, 0.35)',
+              },
+              {
+                offset: 0.8,
+                color: color[x] + ', 0)',
+              },
+            ],
+            false
+          ),
+          shadowColor: 'rgba(0, 0, 0, 0.1)',
+          shadowBlur: 10,
+        },
+      },
+      symbol: 'circle',
+      symbolSize: 5,
+      data: charts.value[i],
+    }
+    lineY.push(data)
+  }
+  var option = {
+    tooltip: {
+      trigger: 'axis',
+    },
+    legend: {
+      data: charts.names,
+      textStyle: {
+        fontSize: 12,
+        color: 'rgb(0,253,255,0.6)',
+      },
+      right: '4%',
+    },
+    grid: {
+      top: '14%',
+      left: '4%',
+      right: '5%',
+      bottom: '12%',
+      containLabel: true,
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: charts.lineX,
+      axisLabel: {
+        textStyle: {
+          color: 'rgb(255,255,255,0.5)',
+        },
+      },
+    },
+    yAxis: {
+      name: charts.unit,
+      type: 'value',
+      axisLabel: {
+        formatter: '{value}',
+        textStyle: {
+          color: 'rgb(255,255,255,0.5)',
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          color: 'rgb(23,255,243,0.3)',
+        },
+      },
+      axisLine: {
+        lineStyle: {
+          color: 'rgb(255,255,255,0.5)',
+        },
+      },
+    },
+    series: lineY,
+  }
+  onMounted(() => {
+    trafficStatistics({
+      startDate: dateList[0],
+      endDate: dateList[dateList.length - 1],
+    }).then((res) => {
+      res.data.data.browseDayList.forEach((val, index) => {
+        charts.value[0].push(val[dateList[index]] + '')
+      })
+      const chart = document.getElementById('echarts-box')
+      if (chart) {
+        const myChart = echarts.init(chart)
+        myChart.setOption(option)
+        window.addEventListener('resize', function () {
+          myChart.resize()
+        })
+      }
+    })
+  })
+</script>
+<style lang="less" scoped>
+  .platform-overview {
+    width: 9.24rem;
+    height: 4.65rem;
+    background: rgba(0, 108, 188, 0.1);
+    border-radius: 2px;
+    border: 1px solid rgba(0, 108, 188, 0.7);
+    .top {
+      font-size: 24px;
+      background: url(~@/assets/capabilityCloud/top_bg.png) no-repeat;
+      text-align: center;
+    }
+    .bottom {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0.2rem;
+      .left {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        .item {
+          width: 1.94rem;
+          height: 1.94rem;
+          background: url('~@/assets/capabilityCloud/pt_bg.png') no-repeat;
+          background-size: 100% 100%;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          .name {
+            font-size: 16px;
+            color: #fff;
+          }
+          .num {
+            font-size: 32px;
+            color: #fdc623;
+          }
+        }
+      }
+      .right {
+        width: 6.53rem;
+        height: 3.54rem;
+        position: relative;
+        .title {
+          font-size: 18px;
+          position: absolute;
+          top: 0;
+          left: 0.2rem;
+        }
+        .echarts-box {
+          width: 6.53rem;
+          height: 4.04rem;
+        }
+      }
+    }
+  }
+</style>