<template>
  <div id="twelve_1">
    <el-row :gutter="4" class="twelve_1">
      <el-col :span="5" class="left">
        <el-col :span="24" class="left_1">
          <el-col :span="24" class="name"> 产业大脑</el-col>
          <el-col :span="24" class="remark" @click="toChange"> 立体展示平台运行成效</el-col>
        </el-col>
        <el-col :span="24" class="left_2">
          <el-col :span="24" class="list">
            <el-col :span="24" class="name">
              <el-image class="image" :src="yonghu" fit="fill" />
              用户数据
            </el-col>
            <el-col :span="24" class="other">
              <el-col :span="12" class="otherLeft">用户总量</el-col>
              <el-col :span="12" class="otherRight">96593个</el-col>
            </el-col>
            <el-col :span="24" class="other">
              <el-col :span="12" class="otherLeft">本月新增</el-col>
              <el-col :span="12" class="otherRight">43个</el-col>
            </el-col>
          </el-col>
          <el-col :span="24" class="list">
            <el-col :span="24" class="name">
              <el-image class="image" :src="ziyuan" fit="fill" />
              资源数据
            </el-col>
            <el-col :span="24" class="other">
              <el-col :span="12" class="otherLeft">资源总量</el-col>
              <el-col :span="12" class="otherRight">100514个</el-col>
            </el-col>
            <el-col :span="24" class="other">
              <el-col :span="12" class="otherLeft">本月新增</el-col>
              <el-col :span="12" class="otherRight">430个</el-col>
            </el-col>
          </el-col>
          <el-col :span="24" class="list">
            <el-col :span="24" class="name">
              <el-image class="image" :src="duijie" fit="fill" />
              对接数据
            </el-col>
            <el-col :span="24" class="other">
              <el-col :span="12" class="otherLeft">对接总量</el-col>
              <el-col :span="12" class="otherRight">11445个</el-col>
            </el-col>
            <el-col :span="24" class="other">
              <el-col :span="12" class="otherLeft">本月新增</el-col>
              <el-col :span="12" class="otherRight">16个</el-col>
            </el-col>
          </el-col>
        </el-col>
      </el-col>
      <el-col :span="19" class="right">
        <el-row :gutter="20" class="right_1">
          <el-col :span="10">
            <el-col :span="24" class="right_1_1">
              <el-col :span="24" class="title"> 最新事件 </el-col>
              <el-col :span="24" class="value">
                <vue3-seamless-scroll
                  :list="list"
                  :hover="true"
                  :step="0.5"
                  :wheel="true"
                  :isWatch="true"
                >
                  <el-col
                    :span="24"
                    class="list"
                    v-for="(item, index) in list"
                    :key="index"
                    @click="toView(item)"
                  >
                    <el-col :span="24" class="name textOver">
                      <div>
                        <span>{{ item.name || '暂无名称' }}</span
                        >发布 <span>「{{ item.type || '暂无' }}」</span>
                      </div>
                      <div>{{ item.time || '暂无时间' }}</div>
                    </el-col>
                    <el-col :span="24" class="other textOver">
                      {{ item.brief }}
                    </el-col>
                  </el-col>
                </vue3-seamless-scroll>
              </el-col>
            </el-col>
          </el-col>
          <el-col :span="14">
            <el-col :span="24" class="right_1_2">
              <el-col :span="24" class="title"> 用户构成 </el-col>
              <echarts1></echarts1>
            </el-col>
          </el-col>
        </el-row>
        <el-row :span="24" :gutter="20" class="right_2">
          <el-col :span="6">
            <el-col :span="24" class="right_2_1">
              <el-col :span="24" class="title"> 创新地图 </el-col>
              <echarts2></echarts2>
            </el-col>
          </el-col>
          <el-col :span="18">
            <el-col :span="24" class="right_2_2">
              <div class="other_1">
                <el-col :span="24" class="title"> 资源分布 </el-col>
                <echarts3></echarts3>
              </div>
              <div class="other_1">
                <el-col :span="24" class="title"> 对接排名 </el-col>
                <echarts4></echarts4>
              </div>
            </el-col>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
const toChange = inject('toChange')
import echarts1 from './components/echarts1.vue'
import echarts2 from './components/echarts2.vue'
import echarts3 from './components/echarts3.vue'
import echarts4 from './components/echarts4.vue'
// 图片引入
import ziyuan from '/images/ziyuan.png'
// 图片引入
import yonghu from '/images/yonghu.png'
// 图片引入
import duijie from '/images/duijie.png'
const list = ref([
  {
    name: '工研院',
    type: '需求',
    time: '12/14 02:45',
    brief: '软弱国岩隧道施工掘进机及支护装备开发及产业化'
  },
  { name: '工研院', type: '需求', time: '12/14 02:45', brief: '滚动轴承材料热处理加工工艺研究' },
  {
    name: '工研院',
    type: '需求',
    time: '12/14 02:45',
    brief: '全透-全黑低压快速切换智能窗户遮光膜2、高电热辐射转化率石墨'
  },
  { name: '工研院', type: '需求', time: '12/14 02:45', brief: '多目标高速图像模板匹配' },
  {
    name: '工研院',
    type: '需求',
    time: '12/14 02:45',
    brief: '软弱国岩隧道施工掘进机及支护装备开发及产业化'
  },
  {
    name: '工研院',
    type: '需求',
    time: '12/14 02:45',
    brief: '软弱国岩隧道施工掘进机及支护装备开发及产业化'
  },
  {
    name: '工研院',
    type: '需求',
    time: '12/14 02:45',
    brief: '软弱国岩隧道施工掘进机及支护装备开发及产业化'
  }
])
</script>
<style scoped lang="scss">
.twelve_1 {
  padding: 10px 0;
  .left {
    .left_1 {
      .name {
        text-align: center;
        font-family: PingFangSC-Medium;
        font-size: 20px;
        color: #121834;
        line-height: 20px;
        font-weight: 700;
        margin-bottom: 8px;
      }
      .remark {
        text-align: center;
        font-size: 14px;
      }
    }
    .left_2 {
      margin: 10px 0;
      .list {
        padding: 20px !important;
        margin: 15px;
        border-radius: 4px;
        box-shadow: 0 0 16px rgba(205, 205, 205, 0.6);
        .name {
          display: flex;
          align-items: center;
          font-family: PingFangSC-Medium;
          font-size: 18px;
          color: #121834;
          line-height: 18px;
          font-weight: 700;
          margin-bottom: 8px;
          .image {
            width: 25px;
            height: 25px;
            margin: 0 10px 0 0;
          }
        }
        .other {
          display: flex;
          justify-content: space-between;
          font-family: PingFangSC-Medium;
          font-size: 14px;
          color: #63a9e2;
          line-height: 14px;
          margin: 15px 0;
          .otherRight {
            text-align: right;
          }
        }
      }
    }
  }
  .right {
    .right_1 {
      display: flex;
      margin: 0 0 20px 0;
      .right_1_1 {
        box-shadow: 0 0 16px rgba(205, 205, 205, 0.6);
        border-radius: 4px;

        .title {
          text-align: center;
          font-family: PingFangSC-Medium;
          font-size: 16px;
          color: #121834;
          line-height: 16px;
          font-weight: 700;
          margin-bottom: 8px;
          padding: 10px;
        }
        .value {
          max-height: 270px;
          overflow: hidden;
          .list {
            padding: 10px;
            font-size: 14px;
            background: #fff;
            .name {
              display: flex;
              justify-content: space-between;
              margin: 0 0 10px 0;
              span {
                color: #4f8bf3;
              }
            }

            .content {
              text-align: center;
            }

            .content:hover {
              color: #2374ff;
            }
          }

          .list:nth-child(2n) {
            background: #f4f4f4;
          }
        }
      }
      .right_1_2 {
        border-radius: 4px;
        box-shadow: 0 0 16px rgba(205, 205, 205, 0.6);
        .title {
          text-align: center;
          font-family: PingFangSC-Medium;
          font-size: 16px;
          color: #121834;
          line-height: 16px;
          font-weight: 700;
          margin-bottom: 8px;
          padding: 10px;
        }
      }
    }
    .right_2 {
      display: flex;
      .right_2_1 {
        border-radius: 4px;
        box-shadow: 0 0 16px rgba(205, 205, 205, 0.6);
        .title {
          text-align: center;
          font-family: PingFangSC-Medium;
          font-size: 16px;
          color: #121834;
          line-height: 16px;
          font-weight: 700;
          margin-bottom: 8px;
          padding: 10px;
        }
      }
      .right_2_2 {
        display: flex;
        justify-content: space-between;
        border-radius: 4px;
        box-shadow: 0 0 16px rgba(205, 205, 205, 0.6);
        .other_1 {
          width: 50%;
          .title {
            text-align: center;
            font-family: PingFangSC-Medium;
            font-size: 16px;
            color: #121834;
            line-height: 16px;
            font-weight: 700;
            margin-bottom: 8px;
            padding: 10px;
          }
        }
      }
    }
  }
}
</style>
