front/public/index.html

@@ -60,7 +60,6 @@
 
     <script type="text/javascript" src="./static/config/basicConfig.js"></script>
     <script type="text/javascript" src="./static/config/mapConfig.js"></script>
-    <script type="text/javascript" src="./static/config/footerData.js"></script>
     <!--  ==========地图相关配置========== -->
     <script type="text/javascript" src="./leaflet/libs/leaflet/1.3.1/leaflet.js"></script>
     <script type="text/javascript" src="./static/js/jquery-3.6.0.min.js"></script>

front/public/static/config/footerData.js

@@ -1,28 +0,0 @@
-/*
- * @Author: zhangfeihu
- * @Date: 2022-06-16 16:37:31
- * @LastEditors: 851673013@qq.com 851673013@qq.com
- * @LastEditTime: 2022-06-16 17:10:48
- * @FilePath: \qiantai\front\public\static\config\footerData.js
- * @Description: 底部菜单数据配置配置
- */
-const footerDataList = {
-  company: {
-    left: '青岛市大数据发展管理局建设',
-    right: '海信网络科技股份有限公司'
-  },
-  address: [
-    {
-      name: '鲁IC备00000000号',
-      value: '政府标识码3702000106',
-    },
-    {
-      name: '版权所有：青岛市大数据发展管理局',
-      value: '地址：山东省青岛市香港中路17号市级机关办公楼',
-    },
-    {
-      name: '电话：0532-8561234',
-      value: '传真：0532-2145122',
-    },
-  ]
-}

front/src/api/capabilityCloud.js

@@ -42,11 +42,3 @@ export function cityResourceRank() {
     method: 'get',
   })
 }
-//能力云图-组件服务
-export function assemblerBaseStatic() {
-  return request({
-    url: '/census/center/v2/assemblerInfo',
-    method: 'get',
-  })
-}
-

front/src/api/file.js

@@ -46,3 +46,29 @@ export function correct(params) {
 export function paddleocr(params) {
   return axios.post('http://15.72.183.90:7008/paddleocr', params, config2)
 }
+
+// 能力云图-数据资源
+export function count() {
+  return axios.post(
+    'http://10.10.30.24:30058/share-portal/platform/index/abilityMarket/count',
+    config2
+  )
+}
+// 能力云图-数据资源-总数据数
+export function getRecord(params) {
+  return axios.get(
+    'http://10.134.135.24:30090/api/share-portal/platform/catalogue/query?serviceName=' +
+    params.serviceName +
+    '&orderField=' +
+    params.orderField +
+    '&orderType=' +
+    params.orderType +
+    '&pageNum=' +
+    params.pageNum +
+    '&pageSize=' +
+    params.pageSize +
+    '&serviceType=' +
+    params.serviceType,
+    config2
+  )
+}

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/ComponentServices.vue

@@ -3,469 +3,10 @@
  * @Date: 2022-06-19 10:15:33
  * @LastEditors: hisense.liangjunhua
  * @LastEditTime: 2022-06-19 10:17:22
- * @Description: 能力云图-组件服务
+ * @Description: 告诉大家这是什么
 -->
 <template>
-  <div class="component-services">
-    <div class="component-services-top">
-      <span class="title">组件服务</span>
-    </div>
-    <div class="component-services-content">
-      <!-- 上架总量 -->
-      <div class="component-services-content-left">
-        <div class="component-services-content-left-top">组件</div>
-        <div class="component-services-content-left-bottom">
-          <div
-            class="component-services-content-left-bottom-son"
-            v-for="(item, index) in snum"
-            :key="index"
-          >
-            <P>{{ item.title }}</P>
-            <p class="num">{{ item.num }}</p>
-          </div>
-        </div>
-      </div>
-      <!-- 组件数量和调用趋势 -->
-      <div class="component-services-content-right">
-        <div class="component-services-content-right-left">
-          <div class="component-services-content-right-left-title">
-            组件数量
-          </div>
-          <div class="component-services-content-right-left-content">
-            <div
-              v-for="(item, index) in servicesSnum"
-              :key="index"
-              class="component-services-content-right-left-content-son"
-            >
-              <p>{{ item.type }}</p>
-              <p class="num">{{ item.amount }}</p>
-            </div>
-          </div>
-        </div>
-        <div class="component-services-content-right-right">
-          <div class="component-services-content-right-right-title">
-            <div class="component-services-content-right-right-title-top">
-              <div
-                class="component-services-content-right-right-title-top-left"
-              >
-                调用趋势
-              </div>
-              <div
-                class="component-services-content-right-right-title-top-right"
-              >
-                <div>周</div>
-                <div>月</div>
-              </div>
-            </div>
-            <div class="component-services-content-right-right-title-bottom">
-              次
-            </div>
-          </div>
-          <div class="callTheTrend" id="callTheTrend"></div>
-          <div class="component-services-content-right-right-bottom">
-            <div class="component-services-content-right-right-bottom-left">
-              <div class="components-can-assign">组件赋能排行</div>
-              <div class="components-scores">组件评分排行</div>
-            </div>
-            <div class="component-services-content-right-right-bottom-right">
-              <div>
-                <span>TOP</span>
-                <span>名称</span>
-                <span>应用数</span>
-              </div>
-              <div>
-                <span></span>
-                <span></span>
-                <span></span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+  <div class="component-services">组件服务</div>
 </template>
-<script setup>
-  import { ref, onMounted } from 'vue'
-  import * as echarts from 'echarts'
-  import { assemblerBaseStatic } from '@/api/capabilityCloud'
-  // import * as moment from 'moment'
-  let snum = ref([
-    { title: '上架总量', num: '0000' },
-    { title: '总调用次数(API)', num: '0000' },
-    { title: '健康度(API)', num: '0000' },
-  ])
-  let servicesSnum = ref([])
-  let callTheTrendData = ref([
-    { time: 6.02, value: 10 },
-    { time: 6.03, value: 12 },
-    { time: 6.04, value: 0 },
-    { time: 6.05, value: 1 },
-    { time: 6.06, value: 10 },
-    { time: 6.07, value: 20 },
-    { time: 6.08, value: 15 },
-  ])
-  //调用趋势echarts图
-  const callTheTrend = () => {
-    echarts.init(document.getElementById('callTheTrend')).dispose()
-    let chartDom = document.getElementById('callTheTrend')
-    let myChart = echarts.init(chartDom)
-    let option
-    option = {
-      grid: {
-        top: '10%',
-        left: '0%',
-        right: '5%',
-        bottom: '0%',
-        containLabel: true,
-      },
-      xAxis: [
-        {
-          type: 'category',
-          boundaryGap: false,
-          axisLine: {
-            lineStyle: {
-              color: 'rgba(28,119,205,0.8)',
-            },
-          },
-          axisLabel: {
-            textStyle: {
-              color: 'rgba(255,255,255,0.5)',
-              size: 18,
-            },
-          },
-          data: ['1-13', '1-14', '1-15', '1-16', '1-17', '1-18', '1-19'],
-        },
-      ],
-      yAxis: [
-        {
-          name: '个',
-          type: 'value',
-          axisTick: {
-            show: false,
-          },
-          axisLine: {
-            lineStyle: {
-              color: '#57617B',
-            },
-          },
-          axisLabel: {
-            textStyle: {
-              color: 'rgba(255,255,255,0.5)',
-              size: 18,
-            },
-          },
-          splitLine: {
-            show: false,
-          },
-        },
-      ],
-      series: [
-        {
-          type: 'line',
-          smooth: true,
-          lineStyle: {
-            normal: {
-              width: 3,
-            },
-          },
-          areaStyle: {
-            normal: {
-              color: new echarts.graphic.LinearGradient(
-                0,
-                0,
-                0,
-                1,
-                [
-                  {
-                    offset: 0,
-                    color: 'rgba(244,124,37, 1)',
-                  },
-                  {
-                    offset: 0.8,
-                    color: 'rgba(244,124,37, 0)',
-                  },
-                ],
-                false
-              ),
-              shadowColor: 'rgba(0, 0, 0, 0.1)',
-              shadowBlur: 10,
-            },
-          },
-          itemStyle: {
-            normal: {
-              color: new echarts.graphic.LinearGradient(
-                0,
-                0,
-                0,
-                1,
-                [
-                  {
-                    offset: 0,
-                    color: '#ffe22e',
-                  },
-                  {
-                    offset: 0.8,
-                    color: '#f47c25',
-                  },
-                ],
-                false
-              ),
-              shadowColor: 'rgba(0, 0, 0, 0.1)',
-              shadowBlur: '3px',
-            },
-          },
-          data: [96.3, 96.4, 97.5, 95.6, 98.1, 94.8, 89.6],
-        },
-      ],
-    }
-    option && myChart.setOption(option)
-  }
-  //组件服务数量接口
-  const NumberOfComponentServices = () => {
-    assemblerBaseStatic().then((res) => {
-      snum.value[0].num = res.data.data[0].amount
-      console.log('res', res.data)
-      res.data.data.map((item, index) => {
-        if (index != 0) {
-          servicesSnum.value.push(item)
-        }
-      })
-    })
-  }
-  const init = () => {
-    NumberOfComponentServices()
-  }
-  onMounted(() => {
-    init()
-    callTheTrend(callTheTrendData.value)
-  })
-</script>
-<style lang="less" scoped>
-  .component-services {
-    height: 4.65rem;
-    width: 7.84rem;
-    position: relative;
-    background: rgba(0, 108, 188, 0.1);
-    border: 0.02rem rgba(0, 108, 188, 0.7) solid;
-    border-radius: 0.03rem;
-    .component-services-top {
-      width: 7.84rem;
-      height: 0.44rem;
-      position: absolute;
-      top: 0;
-      background: url('~@/assets/capabilityCloud/Component_services_bg.png')
-        no-repeat;
-      background-size: cover;
-      background-position: center;
-      line-height: 0.44rem;
-      text-align: center;
-      .title {
-        font-size: 0.24rem;
-      }
-    }
-    .component-services-content {
-      padding: 0.28rem 0 0.28rem 0.28rem;
-      width: 7.84rem;
-      height: 4.65rem;
-      display: flex;
-      .component-services-content-left {
-        margin-right: 0.18rem;
-        .component-services-content-left-top {
-          width: 1.16rem;
-          height: 1.04rem;
-          margin-left: 0.15rem;
-          line-height: 1.04rem;
-          text-align: center;
-          color: rgba(255, 255, 255, 0.9);
-          font-size: 0.2rem;
-          background: url('~@/assets/capabilityCloud/Component_services_title.png')
-            no-repeat;
-          background-size: cover;
-          background-position: center;
-        }
-        .component-services-content-left-bottom {
-          width: 1.48rem;
-          margin-top: -0.15rem;
-          padding-top: 0.52rem;
-          background: url('~@/assets/capabilityCloud/Component_services_content_bg.png')
-            no-repeat;
-          background-size: cover;
-          background-position: center;
-          .component-services-content-left-bottom-son {
-            text-align: center;
-            margin-bottom: 0.56rem;
-            & > p:first-child {
-              color: #ffffff;
-              font-size: 0.16rem;
-              line-height: 0.16rem;
-              margin-bottom: 0.12rem;
-              margin-top: ;
-            }
-            & > p:last-child {
-              color: #1ef6f5;
-              font-size: 0.28rem;
-              line-height: 0.28rem;
-            }
-          }
-          .component-services-content-left-bottom-son:last-child {
-            margin-bottom: 0rem;
-          }
-        }
-      }
-      .component-services-content-right {
-        width: (100% - 1.66rem);
-        margin-top: 0.35rem;
-        display: flex;
-        .component-services-content-right-left {
-          width: 1.6rem;
-          height: 3.72rem;
-          background: -webkit-linear-gradient(#214677, transparent);
-          margin-right: 0.13rem;
-          .component-services-content-right-left-title {
-            font-size: 0.2rem;
-            color: #ffffff;
-            padding: 0.14rem 0 0.1rem 0;
-            border-bottom: #00ffff 0.01rem solid;
-            text-align: center;
-            margin: 0 0.13rem;
-          }
-          .component-services-content-right-left-content {
-            padding-top: 0.14rem;
-            .component-services-content-right-left-content-son {
-              background: url('~@/assets/capabilityCloud/Component_services_snum.png')
-                no-repeat;
-              background-size: 1.1rem 0.59rem;
-              background-position: center;
-              text-align: center;
-              & > p:first-child {
-                color: #ffffff;
-                font-size: 0.16rem;
-                line-height: 0.16rem;
-                margin-bottom: 0.12rem;
-              }
-              & > p:last-child {
-                color: #1ef6f5;
-                font-size: 0.28rem;
-                line-height: 0.28rem;
-                padding-bottom: 0.24rem;
-                margin: 0;
-              }
-            }
-            .component-services-content-right-left-content-son :first-child {
-              & > p:last-child {
-                color: #1ef6f5;
-                font-size: 0.28rem;
-                line-height: 0.28rem;
-                padding-bottom: 0.38rem;
-              }
-            }
-          }
-        }
-        .component-services-content-right-right {
-          width: 3.96rem;
-          .component-services-content-right-right-title {
-            .component-services-content-right-right-title-top {
-              display: flex;
-              align-items: center;
-              .component-services-content-right-right-title-top-left {
-                font-size: 0.18rem;
-                height: 0.2rem;
-                line-height: 0.18rem;
-                color: #ffffff;
-                background: url('~@/assets/capabilityCloud/Component_services_title_bg.png')
-                  no-repeat;
-                background-size: 0.7rem 0.08rem;
-                background-position: bottom;
-              }
-              .component-services-content-right-right-title-top-right {
-                margin-left: 0.15rem;
-                display: flex;
-                color: #ffffff;
-                font-size: 0.14rem;
-                & > div {
-                  font-size: 0.14rem;
-                  height: 0.26rem;
-                  width: 0.4rem;
-                  border: 0.01rem solid #61d2d2;
-                  text-align: center;
-                  line-height: 0.24rem;
-                  margin-right: 0.05rem;
-                  border-radius: 0.12rem;
-                  background: #05315b;
-                }
-              }
-            }
-            .component-services-content-right-right-title-bottom {
-              color: rgba(255, 255, 255, 0.5);
-              line-height: 0.14rem;
-            }
-          }
-          .callTheTrend {
-            height: 1.32rem;
-            width: 100%;
-          }
-          .component-services-content-right-right-bottom {
-            display: flex;
-            padding-top: 0.13rem;
-            .component-services-content-right-right-bottom-left {
-              width: 1.28rem;
-              border-right: 0.02rem rgba(0, 108, 188, 0.7) solid;
-              margin-right: 0.2rem;
-              .components-can-assign,
-              .components-scores {
-                margin-top: 0.13rem;
-                height: 0.88rem;
-                width: 1.25rem;
-                font-size: 0.16rem;
-                color: rgba(255, 255, 255, 0.6);
-                line-height: 0.88rem;
-                text-align: center;
-                background: linear-gradient(
-                  to right,
-                  rgba(0, 117, 203, 0.2),
-                  rgba(0, 117, 203, 0)
-                );
-              }
-              .components-can-assign {
-                margin-top: 0;
-              }
-            }
-            .component-services-content-right-right-bottom-right {
-              width: 2.5rem;
-              font-size: 0.16rem;
-              border: 0.02rem rgba(0, 108, 188, 0.7) solid;
-              color: rgba(255, 255, 255, 0.8);
-              & > div {
-                & > span {
-                  display: inline-block;
-                  height: 0.32rem;
-                  line-height: 0.32rem;
-                  border-right: 0.02rem rgba(0, 108, 188, 0.7) solid;
-                  border-bottom: 0.02rem rgba(0, 108, 188, 0.7) solid;
-                }
-                & > span:first-child {
-                  width: 0.47rem;
-                  text-align: center;
-                }
-                & > span:nth-child(2) {
-                  width: 1.47rem;
-                }
-                & > span:last-child {
-                  width: 0.5rem;
-                  color: #1ffefd;
-                  text-align: center;
-                  border-right: 0;
-                }
-              }
-              & > div:first-child {
-                color: #1ffefd;
-                background: #27528c;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-</style>
+<script setup></script>
+<style lang="less" scoped></style>

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

@@ -6,7 +6,270 @@
  * @Description: 告诉大家这是什么
 -->
 <template>
-  <div class="data-resources">数据资源</div>
+  <div class="data-resources">
+    <div class="resources-top">
+      <span class="title">数据资源</span>
+    </div>
+    <div class="resources-bottom">
+      <div class="resources-left">
+        <div v-for="(item, index) in resourcesLeft" :key="index">
+          <h3>{{ item.name }}</h3>
+          <h2 class="num">{{ item.num || '0' }}</h2>
+        </div>
+        <img :src="leftImg" alt="" />
+      </div>
+      <div class="resources-right">
+        <div class="resources-right-title">
+          <h3>数据赋能排行</h3>
+        </div>
+        <div class="resources-right-table">
+          <a-table
+            :data-source="assignRankings"
+            :columns="columns"
+            :pagination="false"
+            bordered="true"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
-<script setup></script>
-<style lang="less" scoped></style>
+<script setup>
+  import { ref } from 'vue'
+  import { count, getRecord } from '@/api/file'
+  // import { abc } from './dataABC.json'
+  // 左侧数据
+  const resourcesLeft = ref([
+    {
+      name: '总数据数',
+      num: '',
+    },
+    {
+      name: '总申请次数',
+      num: '',
+    },
+    {
+      name: '满足率',
+      num: '',
+    },
+  ])
+  // 右侧数据
+  const assignRankings = ref([
+    {
+      index: '1',
+      name: '0',
+      operation: '0',
+    },
+    {
+      index: '2',
+      name: '0',
+      operation: '0',
+    },
+    {
+      index: '3',
+      name: '0',
+      operation: '0',
+    },
+    {
+      index: '4',
+      name: '0',
+      operation: '0',
+    },
+    {
+      index: '5',
+      name: '0',
+      operation: '0',
+    },
+  ])
+  const columns = ref([
+    {
+      title: 'Top',
+      dataIndex: 'index',
+      key: 'index',
+      width: '15%',
+    },
+    {
+      title: '名称',
+      dataIndex: 'name',
+      key: 'name',
+      width: '55%',
+      ellipsis: true,
+    },
+    {
+      title: '应用数',
+      dataIndex: 'operation',
+      key: 'operation',
+      width: '30%',
+    },
+  ])
+  // 左侧图片
+  const leftImg = require('@/assets/capabilityCloud/resources-left.png')
+  // 请求左侧数据开始
+  const obj = {
+    serviceName: '',
+    orderField: 'updateTime',
+    orderType: 'desc',
+    pageNum: 1,
+    pageSize: 5,
+    serviceType: 'data',
+  }
+  getRecord(obj).then((res) => {
+    if (res.data.data) {
+      // res.data.data.list.forEach((val) => {
+      //   val.name = val.serviceName
+      //   val.createDate = val.updateTime
+      //   val.id = val.serviceId // "requestNum": 0, // "requestQuantity": 0, // "starNum": 4, // "shareStatus": "2"
+      // })
+      // resourceList.data = res.data.data.list || []
+      resourcesLeft.value[0].num = res.data.data.total || '0' // getShoppingCartList(resourceData.value.data.records)
+      console.log('数据资源~~~~~~~~~~~', resourcesLeft.value[0].num)
+    }
+  })
+  // 请求左侧数据结束
+  // 请求右侧数据开始
+  const contentData = ref([])
+  count().then((res) => {
+    contentData.value = res.data.data
+    console.log(contentData.value)
+    resourcesLeft.value[1].num = contentData.value.requestCount || '0'
+    resourcesLeft.value[2].num =
+      contentData.value.satisfactionRate + '%' || '0' + '%'
+    // 排行
+    for (let i = 1; i < 6; i++) {
+      assignRankings.value[i - 1].index = i
+      assignRankings.value[i - 1].name =
+        contentData.value.list[i - 1].resourceTop5.service_name || '0'
+      assignRankings.value[i - 1].opacity =
+        contentData.value.list[i - 1].resourceTop5.count || '0'
+    }
+  })
+  // 请求右侧数据结束
+</script>
+<style lang="less" scoped>
+  .data-resources {
+    width: 440px;
+    height: 465px;
+    background: rgba(0, 108, 188, 0.1);
+    border-radius: 2px;
+    border: 1px solid rgba(0, 108, 188, 0.7);
+    .resources-top {
+      height: 60px;
+      background: url('~@/assets/capabilityCloud/resources-title.png') no-repeat;
+      text-align: center;
+      font-size: 24px;
+    }
+    .resources-bottom {
+      width: 100%;
+      display: flex;
+      .resources-left {
+        width: 156px;
+        height: 275px;
+        background-image: linear-gradient(#214678, transparent);
+        text-align: center;
+        margin-left: 18px;
+        position: relative;
+        div {
+          margin: 0 10px;
+          border-bottom: 1px solid #1f557c;
+          h3 {
+            font-size: 16px;
+            color: #ffffff;
+            margin-bottom: 0px;
+            padding-top: 16px;
+          }
+          .num {
+            font-size: 28px;
+            color: #1ef6f5;
+            margin-bottom: 0px;
+          }
+        }
+        div:last-of-type {
+          border-bottom: none;
+        }
+        img {
+          width: 90%;
+          position: absolute;
+          left: 50%;
+          bottom: -138px;
+          margin-left: -45%;
+        }
+      }
+      .resources-right {
+        margin-left: 18px;
+        width: 235px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        .resources-right-title {
+          width: 224px;
+          height: 100px;
+          text-align: center;
+          background: url('~@/assets/capabilityCloud/resources-right.png')
+            no-repeat center;
+          display: flex;
+          align-items: center;
+          h3 {
+            font-size: 18px;
+            color: #ffffff;
+            width: 100%;
+            height: 38px;
+            line-height: 38px;
+            background: linear-gradient(
+              to right,
+              rgba(0, 0, 0, 0) 0%,
+              #1b76cc 50%,
+              rgba(0, 0, 0, 0) 100%
+            );
+            text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.6);
+          }
+        }
+        .resources-right-table {
+          width: 100%;
+          :deep(.ant-table-thead > tr > th) {
+            background-color: #1f557c;
+            border: none;
+            color: #1ef6f5;
+            height: 32px;
+            padding: 0;
+          }
+          :deep(.ant-table-row) {
+            height: 45px;
+          }
+          :deep(.ant-table-cell) {
+            text-align: center;
+            border-bottom: 1px solid #1f557c;
+            border-right: 1px solid #1f557c;
+            padding: 0;
+          }
+          :deep(.ant-table-cell:nth-child(1)) {
+            border-left: 1px solid #1f557c;
+          }
+          :deep(.ant-table-cell:nth-child(2)) {
+            text-align: left;
+            padding-left: 10px;
+          }
+          :deep(.ant-table-cell:nth-child(3)) {
+            color: #1ef6f5;
+          }
+          :deep(.ant-table-tbody) {
+            color: #ffffff;
+          }
+          :deep(.ant-table) {
+            border: none;
+            background: transparent;
+          }
+          :deep(.ant-table-content > table) {
+            border: none;
+          }
+          :deep(.ant-table-container) {
+            border: none;
+          }
+          :deep(.ant-table-cell-row-hover) {
+            background: transparent;
+            transition: all 0s;
+          }
+        }
+      }
+    }
+  }
+</style>

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

@@ -6,154 +6,7 @@
  * @Description: 告诉大家这是什么
 -->
 <template>
-  <div class="infrastructure">
-    <div class="infrastructure-top">
-      <span class="title">基础设施</span>
-    </div>
-    <div class="infrastructure-content">
-      <div
-        class="infrastructure-content-son"
-        v-for="(item, index) in dataList"
-        :key="index"
-      >
-        <div class="num-class" :style="`background:url(${item.img}) no-repeat`">
-          <div>{{ item.title }}</div>
-          <div>{{ item.snum }}</div>
-        </div>
-        <div class="health-degree">
-          <div class="health-degree-title">健康度</div>
-          <a-progress
-            :stroke-color="{
-              '0%': '#108ee9',
-              '100%': '#87d068',
-            }"
-            :percent="item.percentage"
-            :show-info="false"
-          />
-        </div>
-        <div class="percentage" :class="fontFormat(item.title)">
-          {{ item.percentage }}%
-        </div>
-      </div>
-    </div>
-  </div>
+  <div class="infrastructure">基础设施</div>
 </template>
-<script setup>
-  import { ref } from 'vue'
-  let dataList = ref([
-    {
-      title: '视频资源数量',
-      snum: '100',
-      percentage: '100',
-      img: require('../../../assets/capabilityCloud/infrastructure_sz.png'),
-    },
-    {
-      title: '云资源',
-      snum: '0',
-      percentage: '0',
-      img: require('../../../assets/capabilityCloud/infrastructure_yz.png'),
-    },
-    {
-      title: '感知资源',
-      snum: '0',
-      percentage: '0',
-      img: require('../../../assets/capabilityCloud/infrastructure_gz.png'),
-    },
-  ])
-  function fontFormat(name) {
-    switch (name) {
-      case '视频资源数量':
-        break
-      case '云资源':
-        break
-      case '感知资源':
-        break
-    }
-  }
-</script>
-<style lang="less" scoped>
-  .infrastructure {
-    width: 4.4rem;
-    height: 4.65rem;
-    position: relative;
-    background: rgba(0, 108, 188, 0.1);
-    border: 0.02rem rgba(0, 108, 188, 0.7) solid;
-    border-radius: 0.03rem;
-    padding: 0.2rem;
-    padding-top: 0;
-    .infrastructure-top {
-      width: 4.4rem;
-      height: 0.44rem;
-      position: absolute;
-      top: 0;
-      background: url('~@/assets/capabilityCloud/infrastructure_title.png')
-        no-repeat;
-      background-size: cover;
-      background-position: center;
-      line-height: 0.44rem;
-      text-align: center;
-      .title {
-        font-size: 0.24rem;
-      }
-    }
-    .infrastructure-content {
-      width: 4rem;
-      margin-top: 0.62rem;
-      .infrastructure-content-son {
-        display: flex;
-        width: 4rem;
-        height: 1.17rem;
-        background: linear-gradient(to right, #214677, rgba(2, 20, 103, 0));
-        align-items: center;
-        margin-bottom: 0.14rem;
-        padding-left: 0.1rem;
-      }
-      .num-class {
-        width: 1.7rem;
-        padding-left: 0.1rem;
-        text-align: center;
-        & > div:first-child {
-          font-size: 0.18rem;
-          color: #ffffff;
-          margin-bottom: 0.1rem;
-          line-height: 0.18rem;
-        }
-        & > div:last-child {
-          font-size: 0.36rem;
-          line-height: 0.36rem;
-          color: #1ce2e5;
-        }
-      }
-      .health-degree {
-        width: 1.35rem;
-        .health-degree-title {
-          font-size: 0.14rem;
-          color: rgba(255, 255, 255, 0.6);
-          margin-bottom: 0.08rem;
-        }
-        :deep(.ant-progress-outer) {
-          height: 0.27rem;
-        }
-        :deep(.ant-progress-inner) {
-          height: 0.27rem;
-          border-radius: 0.14rem;
-          border: 0.01rem solid rgba(8, 153, 231, 0.6);
-          background: rgba(21, 65, 123, 0.6);
-          div {
-            height: 0.27rem !important;
-          }
-        }
-      }
-      // .health-degree:
-      .percentage {
-        height: 0.57rem;
-        font-size: 0.24rem;
-        line-height: 0.24rem;
-        font-family: 'DIN-Bold';
-        margin-left: 0.1rem;
-        display: flex;
-        align-items: flex-end;
-      }
-    }
-  }
-</style>
+<script setup></script>
+<style lang="less" scoped></style>

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

@@ -6,7 +6,87 @@
  * @Description: 告诉大家这是什么
 -->
 <template>
-  <div class="knowledge-base">知识库</div>
+  <div class="knowledge-base">
+    <div class="knowledge-top">
+      <span class="title">知识库</span>
+    </div>
+    <div class="knowledge-content">
+      <div v-for="(item, index) in contentBox" :key="index">
+        <img :src="item.photo" alt="" />
+        <h3>{{ item.name }}</h3>
+        <h3>{{ item.type }}</h3>
+        <h6 class="num">{{ item.num }}</h6>
+      </div>
+    </div>
+  </div>
 </template>
-<script setup></script>
-<style lang="less" scoped></style>
+<script setup>
+  import { ref } from 'vue'
+  import { KnowledgeBaseStatic } from '@/api/capabilityCloud'
+  const contentBoxData = ref([])
+  const contentBox = ref([
+    {
+      photo: require('@/assets/capabilityCloud/Knowledge-up.png'),
+      name: '知识库',
+      type: '上架总量',
+      num: '',
+    },
+    {
+      photo: require('@/assets/capabilityCloud/Knowledge-look.png'),
+      name: '知识库',
+      type: '浏览总量',
+      num: '',
+    },
+  ])
+  KnowledgeBaseStatic().then((res) => {
+    console.log(res.data.data)
+    contentBoxData.value = res.data.data
+    console.log(contentBoxData.value)
+    contentBox.value[0].num = contentBoxData.value[0].amount
+    contentBox.value[1].num = contentBoxData.value[1].amount
+  })
+</script>
+<style lang="less" scoped>
+  .knowledge-base {
+    width: 152px;
+    height: 465px;
+    background: rgba(0, 108, 188, 0.1);
+    border-radius: 2px;
+    border: 1px solid rgba(0, 108, 188, 0.7);
+    .knowledge-top {
+      height: 60px;
+      background: url('~@/assets/capabilityCloud/Knowledge-title.png') no-repeat;
+      text-align: center;
+      font-size: 24px;
+    }
+    .knowledge-content {
+      width: 100%;
+
+      div {
+        width: 118px;
+        height: 176px;
+        margin: 0 auto;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        background-image: linear-gradient(#214678, transparent);
+        margin-bottom: 20px;
+        img {
+          margin: 27px 0 12px;
+        }
+        h3 {
+          font-size: 16px;
+          font-weight: normal;
+          color: #ffffff;
+          margin-bottom: 0px;
+        }
+        .num {
+          font-weight: 300;
+          font-size: 28px;
+          color: #1ef6f5;
+          margin-bottom: 27px;
+        }
+      }
+    }
+  }
+</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>

front/src/views/home/details.vue

@@ -16,7 +16,7 @@
       <application-details
         v-else-if="showView === 'application-details'"
       ></application-details>
-      <home-footer></home-footer>
+      <ability-to-recommend-bottom></ability-to-recommend-bottom>
     </div>
   </div>
 </template>
@@ -25,7 +25,7 @@
   import HomeHeader from '@/views/home/components/header'
   import { defineComponent, reactive, ref } from 'vue'
   import DetailsView from './components/DetailsView.vue'
-  import HomeFooter from '@/views/newHome/components/Footer'
+  import AbilityToRecommendBottom from '@/views/home/components/AbilityToRecommendBottom'
   import AlgorithmDetails from '@/views/detailsAll/AlgorithmDetails'
   import ApplicationDetails from '@/views/detailsAll/ApplicationDetails'
   import { selectOne } from '@/api/home'
@@ -36,7 +36,7 @@
     components: {
       HomeHeader,
       DetailsView,
-      HomeFooter,
+      AbilityToRecommendBottom,
       AlgorithmDetails,
       ApplicationDetails,
     },

front/src/views/newHome/components/Footer.vue

@@ -1,21 +1,13 @@
-<!--
- * @Author: 851673013@qq.com 851673013@qq.com
- * @Date: 2022-06-16 15:20:52
- * @LastEditors: 851673013@qq.com 851673013@qq.com
- * @LastEditTime: 2022-06-16 17:14:56
- * @FilePath: \qiantai\front\src\views\newHome\components\Footer.vue
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
--->
 <template>
   <div class="footer">
     <div class="fotter-son">
       <div class="top">
-        <div>{{ dataList.company.left }}</div>
+        <div>青岛市大数据发展管理局建设</div>
         <div class="shuxian"></div>
-        <div>{{ dataList.company.right }}</div>
+        <div>海信网络科技股份有限公司</div>
       </div>
       <div class="bottom">
-        <p v-for="(item, index) in dataList.address" :key="index">
+        <p v-for="item in dataList" :key="item">
           <span>{{ item.name }}</span>
           <span>{{ item.value }}</span>
         </p>
@@ -24,10 +16,21 @@
   </div>
 </template>
 <script setup>
-  import { ref } from 'vue'
-  console.log('footerDataList', footerDataList)
-  let dataList = ref({})
-  dataList.value = footerDataList
+  import { reactive } from 'vue'
+  let dataList = reactive([
+    {
+      name: '鲁IC备00000000号',
+      value: '政府标识码3702000106',
+    },
+    {
+      name: '版权所有：青岛市大数据发展管理局',
+      value: '地址：山东省青岛市香港中路17号市级机关办公楼',
+    },
+    {
+      name: '电话：0532-8561234',
+      value: '传真0532-2145122',
+    },
+  ])
 </script>
 <style lang="less" scoped>
   .footer {