组件服务

front/public/index.html

@@ -60,6 +60,7 @@
 
     <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

@@ -0,0 +1,28 @@
+/*
+ * @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,3 +42,11 @@ export function cityResourceRank() {
     method: 'get',
   })
 }
+//能力云图-组件服务
+export function assemblerBaseStatic() {
+  return request({
+    url: '/census/center/v2/assemblerInfo',
+    method: 'get',
+  })
+}
+

front/src/api/file.js

@@ -46,29 +46,3 @@ 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,383 +1,12 @@
 <!--
  * @Author: hisense.liangjunhua
- * @Date: 2022-06-19 10:16:10
+ * @Date: 2022-06-19 10:15:33
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-19 17:02:39
+ * @LastEditTime: 2022-06-19 10:16:46
  * @Description: 告诉大家这是什么
 -->
 <template>
-  <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>
+  <div class="application-resources">应用资源</div>
 </template>
-<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>
+<script setup></script>
+<style lang="less" scoped></style>

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

@@ -3,10 +3,469 @@
  * @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>
+  <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>
 </template>
-<script setup></script>
-<style lang="less" scoped></style>
+<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>

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

@@ -6,270 +6,7 @@
  * @Description: 告诉大家这是什么
 -->
 <template>
-  <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>
+  <div class="data-resources">数据资源</div>
 </template>
-<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>
+<script setup></script>
+<style lang="less" scoped></style>

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

@@ -6,7 +6,154 @@
  * @Description: 告诉大家这是什么
 -->
 <template>
-  <div class="infrastructure">基础设施</div>
+  <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>
 </template>
-<script setup></script>
-<style lang="less" scoped></style>
+<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>

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

@@ -6,87 +6,7 @@
  * @Description: 告诉大家这是什么
 -->
 <template>
-  <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>
+  <div class="knowledge-base">知识库</div>
 </template>
-<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>
+<script setup></script>
+<style lang="less" scoped></style>

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

@@ -2,235 +2,11 @@
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-19 10:15:33
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-19 16:50:27
+ * @LastEditTime: 2022-06-19 10:16:05
  * @Description: 告诉大家这是什么
 -->
 <template>
-  <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>
+  <div class="platform-overview">平台概览</div>
 </template>
-<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>
+<script setup></script>
+<style lang="less" scoped></style>

front/src/views/home/details.vue

@@ -16,7 +16,7 @@
       <application-details
         v-else-if="showView === 'application-details'"
       ></application-details>
-      <ability-to-recommend-bottom></ability-to-recommend-bottom>
+      <home-footer></home-footer>
     </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 AbilityToRecommendBottom from '@/views/home/components/AbilityToRecommendBottom'
+  import HomeFooter from '@/views/newHome/components/Footer'
   import AlgorithmDetails from '@/views/detailsAll/AlgorithmDetails'
   import ApplicationDetails from '@/views/detailsAll/ApplicationDetails'
   import { selectOne } from '@/api/home'
@@ -36,7 +36,7 @@
     components: {
       HomeHeader,
       DetailsView,
-      AbilityToRecommendBottom,
+      HomeFooter,
       AlgorithmDetails,
       ApplicationDetails,
     },

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

@@ -1,13 +1,21 @@
+<!--
+ * @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>青岛市大数据发展管理局建设</div>
+        <div>{{ dataList.company.left }}</div>
         <div class="shuxian"></div>
-        <div>海信网络科技股份有限公司</div>
+        <div>{{ dataList.company.right }}</div>
       </div>
       <div class="bottom">
-        <p v-for="item in dataList" :key="item">
+        <p v-for="(item, index) in dataList.address" :key="index">
           <span>{{ item.name }}</span>
           <span>{{ item.value }}</span>
         </p>
@@ -16,21 +24,10 @@
   </div>
 </template>
 <script setup>
-  import { reactive } from 'vue'
-  let dataList = reactive([
-    {
-      name: '鲁IC备00000000号',
-      value: '政府标识码3702000106',
-    },
-    {
-      name: '版权所有：青岛市大数据发展管理局',
-      value: '地址：山东省青岛市香港中路17号市级机关办公楼',
-    },
-    {
-      name: '电话：0532-8561234',
-      value: '传真0532-2145122',
-    },
-  ])
+  import { ref } from 'vue'
+  console.log('footerDataList', footerDataList)
+  let dataList = ref({})
+  dataList.value = footerDataList
 </script>
 <style lang="less" scoped>
   .footer {