wt-biz-bigdata/src/views/home/index.vue

<template>
  <screen>
    <div
      style="overflow-y: hidden; overflow: hidden"
      class="flex flex-col content-index"
    >
      <div class="flex flex-center full-width">
        <div class="full-width" style="height: 90px">
          <top />
        </div>
      </div>
      <div class="flex full-width full-height">
        <!--        left      -->
        <div class="flex-col flex-center box-b">
          <div class="full-height bm-s">
            <box>
              <template #top>
                <div class="pt-5 pl-5 white bold flex flex-justify-between">
                  <div class="flex flex-center">
                    <img
                      class="mr-5 roundimg"
                      src="@/assets/biz-img/round.png"
                    />
                    <span>梧桐智库关键字搜索云图</span>
                  </div>
                  <img class="img1" src="@/assets/biz-img/img1.png" />
                </div>
              </template>
              <left1 />
            </box>
          </div>
          <div class="full-height mt-10 bm-s">
            <box>
              <template #top>
                <div
                  class="pt-5 pl-5 white bold flex flex-center flex-justify-between"
                >
                  <div class="flex flex-center">
                    <img
                      class="mr-5 roundimg"
                      src="@/assets/biz-img/round.png"
                    />
                    <span>梧桐智库数据统计</span>
                  </div>
                  <img class="img1" src="@/assets/biz-img/img1.png" />
                </div>
              </template>
              <left2 />
            </box>
          </div>
          <div class="full-height mt-10 bm-s">
            <box>
              <template #top>
                <div
                  class="pt-5 pl-5 white bold flex flex-center flex-justify-between"
                >
                  <div class="flex flex-center">
                    <img
                      class="mr-5 roundimg"
                      src="@/assets/biz-img/round.png"
                    />
                    <span>项目云数据统计</span>
                  </div>
                  <img class="img1" src="@/assets/biz-img/img1.png" />
                </div>
              </template>
              <left3 />
            </box>
          </div>
        </div>
        <!--        center      -->
        <div class="flex-col flex-center box-a">
          <div class="full-height bm-m block flex-center">
            <center />
          </div>
          <div class="full-height mt-5 bm-ms">
            <box>
              <template #top>
                <div
                  class="pt-5 pl-5 white bold flex flex-center flex-justify-between"
                >
                  <div class="flex flex-center">
                    <img
                      class="mr-5 roundimg"
                      src="@/assets/biz-img/round.png"
                    />
                    <span>云南省用户累计数据统计</span>
                  </div>
                  <img class="img1" src="@/assets/biz-img/img1.png" />
                </div>
              </template>
              <chart />
            </box>
          </div>
          <div class="flex flex-center-between mt-10">
            <div class="bm-mss">
              <box>
                <template #top>
                  <div
                    class="pt-5 pl-5 white bold flex flex-center flex-justify-between"
                  >
                    <div class="flex flex-center">
                      <img
                        class="mr-5 roundimg"
                        src="@/assets/biz-img/round.png"
                      />
                      <span>用户增长趋势</span>
                    </div>
                    <img class="img1" src="@/assets/biz-img/img1.png" />
                  </div>
                </template>
                <chart1 />
              </box>
            </div>
            <div class="bm-mss">
              <box>
                <template #top>
                  <div
                    class="pt-5 pl-5 white bold flex flex-center flex-justify-between"
                  >
                    <div class="flex flex-center">
                      <img
                        class="mr-5 roundimg"
                        src="@/assets/biz-img/round.png"
                      />
                      <span>云平台用户统计</span>
                    </div>
                    <img class="img1" src="@/assets/biz-img/img1.png" />
                  </div>
                </template>
                <center1 />
              </box>
            </div>
          </div>
        </div>
        <!--    ------------------    right   ---------------------------   -->
        <div class="flex-col flex-center">
          <div class="full-height box-bbs bm-rs">
            <box>
              <template #top>
                <div
                  class="pt-5 pl-5 white bold flex flex-center flex-justify-between"
                >
                  <div class="flex flex-center">
                    <img
                      class="mr-5 roundimg"
                      src="@/assets/biz-img/round.png"
                    />
                    <span>公众号文章阅读排行</span>
                  </div>
                  <img class="img1" src="@/assets/biz-img/img1.png" />
                </div>
              </template>
              <chart2 />
            </box>
          </div>
          <div class="full-height box-bs bm-rs">
            <box>
              <template #top>
                <div
                  class="pt-5 pl-5 white bold flex flex-center flex-justify-between"
                >
                  <div class="flex flex-center">
                    <img
                      class="mr-5 roundimg"
                      src="@/assets/biz-img/round.png"
                    />
                    <span>公众号文章阅读排行</span>
                  </div>
                  <img class="img1" src="@/assets/biz-img/img1.png" />
                </div>
              </template>
              <rotation />
            </box>
          </div>
          <div class="full-height box-bs bm-rs">
            <box>
              <template #top>
                <div
                  class="pt-5 pl-5 white bold flex flex-center flex-justify-between"
                >
                  <div class="flex flex-center">
                    <img
                      class="mr-5 roundimg"
                      src="@/assets/biz-img/round.png"
                    />
                    <span>专项债券查阅排行</span>
                  </div>
                  <img class="img1" src="@/assets/biz-img/img1.png" />
                </div>
              </template>
              <chart3 />
            </box>
          </div>
          <div class="full-height box-bs bm-rs">
            <box>
              <template #top>
                <div
                  class="pt-5 pl-5 white bold flex flex-center flex-justify-between"
                >
                  <div class="flex flex-center">
                    <img
                      class="mr-5 roundimg"
                      src="@/assets/biz-img/round.png"
                    />
                    <span>公众号前五文章分享、群发统计</span>
                  </div>
                  <img class="img1" src="@/assets/biz-img/img1.png" />
                </div>
              </template>
              <chart4 />
            </box>
          </div>
        </div>
      </div>
    </div>
  </screen>
</template>

<route>
{
path: '/',
name: '智库统计',
}
</route>
<script>
import { userStore } from '@/store/user.js'
import left1 from '@/views/home/components/left1.vue'
import left2 from '@/views/home/components/left2.vue'
import left3 from '@/views/home/components/left3.vue'
import rotation from '@/views/home/components/rotation.vue'
import chart from '@/views/home/components/chart.vue'
import center from '@/views/home/components/center.vue'
import center1 from '@/views/home/components/center1.vue'
import chart1 from '@/views/home/components/chart1.vue'
import chart2 from '@/views/home/components/chart2.vue'
import chart3 from '@/views/home/components/chart3.vue'
import chart4 from '@/views/home/components/chart4.vue'
import Top from '@/views/home/components/top.vue'
import Screen from '../../components/screen.vue'
import chartBox from '@/components/chart-box/index.vue'
import chartButton from '@/components/chart-button/index.vue'
import box from '@/components/box/index.vue'

export default {
  components: {
    Screen,
    Top,
    left1,
    left2,
    left3,
    rotation,
    center,
    center1,
    chart,
    chart1,
    chart2,
    chart3,
    chart4,
    chartBox,
    chartButton,
    box
  },
  data() {
    return {
      keyWordsList: []
    }
  },
  setup() {
    const user = userStore()
    return { user }
  },
  created() {
    this.getBizSreachWords()
    this.timingAcquisition()
  },
  methods: {
    timingAcquisition() {
      setInterval(() => {
        this.getBizSreachWords()
      }, 30000)
    },

    //获取智库搜索关键字
    getBizSreachWords() {
      const data = {
        current: 1,
        size: 10
      }
      this.$api.biz.getTagsList(data).then(res => {
        if (res.code === 200) {
          this.keyWordsList = res.data
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content-index {
  background-image: url('@/assets/biz-img/bg.png');
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  height: 100%;
  color: #142e48;
}

.bg1 {
  width: 451px;
  height: 66px;
  border-left: #be8c4e solid 4px;
  background-color: rgba(238, 238, 238, 0.1);
  backdrop-filter: blur(10px);
  margin-right: 6px;
  border-top: #6e8897 solid 1px;
  border-right: #6e8897 solid 1px;
  border-bottom: #6e8897 solid 1px;
}

.bg2 {
  width: 220px;
  height: 92px;
  background-image: url('../../assets/img/bg2.png');
  background-size: 100% 100%;
}

.line {
  width: 2px;
  height: 38px;
  background: #a3a3a3;
  margin-left: 15px;
  margin-right: 15px;
}

.logo1 {
  width: 68px;
  height: 44px;
  margin-left: 15px;
}

.logo2 {
  width: 32px;
  height: 40px;
  margin-left: 25px;
}

.midd {
  height: 262px;
}

.midd1 {
  width: 950px;
}

.bm-s {
  width: 470px;
}
.bm-rs {
  width: 450px;
}

.bm-m {
  width: 930px;
}
.bm-ms {
  width: 930px;
  height: 210px;
}
.bm-mss {
  width: 460px;
  height: 200px;
}

.box-a {
  height: 530px;
  padding: 10px;
}
.box-b {
  height: 310px;
  padding: 10px;
}
.box-bbs {
  height: 265px;
  padding: 10px;
}
.box-bs {
  height: 215px;
  padding: 10px;
}

.line-1 {
  width: 500px;
  height: 2px;
  background: #909090;
  margin-top: 15px;
  margin-right: 30px;
  margin-left: 10px;
}

.line-2 {
  width: 270px;
  height: 2px;
  background: #909090;
  margin-top: 15px;
  margin-right: 30px;
  margin-left: 30px;
}

.line-3 {
  width: 480px;
  height: 2px;
  background: #909090;
  margin-right: 10px;
  margin-left: 10px;
}
.roundimg {
  height: 10px;
  width: 10px;
}
.img1 {
  height: 2px;
  width: 60px;
  align-self: end;
  margin-bottom: -10px;
}
</style>