<template>
  <div class="bigscreen-bg">
    <div class="main">
      <div class="time">
        <i class="fa fa-fw fa-clock-o"></i>
        <span>2021-06-21 14:18:22</span>
      </div>
      <div class="content">
        <div class="div1 box">
          <Title title="急救站点信息" />
          <dl class="bigTab left">
            <dt>
              <div class="cell_1">序号</div>
              <div class="cell_2">辖区</div>
              <div class="cell_3">急救站点</div>
              <div class="cell_4">站点位置</div>
              <div class="cell_5">车辆数量</div>
              <div class="cell_6">所在医疗机构</div>
            </dt>
            <dd
              v-for="(item, index) in dataList1"
              :key="index"
            >
              <div
                class="cell_1"
                :title="index + 1"
              >{{index + 1}}</div>
              <div
                class="cell_2"
                :title="item.areaName"
              >{{item.areaName}}</div>
              <div
                class="cell_3"
                :title="item.siteName"
              >{{item.siteName}}</div>
              <div
                class="cell_4"
                :title="item.siteLocation"
              >{{item.siteLocation}}</div>
              <div
                class="cell_5"
                :title="item.carCount"
              >{{item.carCount}}</div>
              <div
                class="cell_6"
                :title="item.hospitalName"
              >{{item.hospitalName}}</div>
            </dd>
          </dl>
        </div>
        <div class="div2">
          <div class="top box">
            <Title title="院前救治患者" />
            <div class="bigMsg">
              <div class="row">
                <div class="col">
                  <p class="p1">胸痛中心</p>
                  <p class="p2">{{dataList2.num1}}人</p>
                </div>
                <div class="col">
                  <p class="p1">卒中中心</p>
                  <p class="p2">{{dataList2.num2}}人</p>
                </div>
              </div>
              <div class="row">
                <div class="col">
                  <p class="p1">创伤中心</p>
                  <p class="p2">{{dataList2.num3}}人</p>
                </div>
                <div class="col">
                  <p class="p1">烧伤中心</p>
                  <p class="p2">{{dataList2.num4}}人</p>
                </div>
              </div>
            </div>
          </div>
          <div class="bottom box">
            <Title title="院前救治占比" />
            <EchartsPie />
          </div>
        </div>
        <div class="div3 box">
          <ul class="datalist">
            <li>
              <img
                src="../../assets/images/bigscreen_01.png"
                alt=""
              >
              <p class="p1">胸痛中心</p>
              <p class="p2">{{dataList3.num1}} <span>个</span></p>
            </li>
            <li>
              <img
                src="../../assets/images/bigscreen_02.png"
                alt=""
              >
              <p class="p1">卒中中心</p>
              <p class="p2">{{dataList3.num2}} <span>个</span></p>
            </li>
            <li>
              <img
                src="../../assets/images/bigscreen_03.png"
                alt=""
              >
              <p class="p1">创/烧伤中心</p>
              <p class="p2">{{dataList3.num3}} <span>个</span></p>
            </li>
          </ul>
          <EchartsMap />
        </div>
        <div class="div4">
          <div class="top box">
            <Title title="院前救治患者" />
            <div class="bigMsg">
              <div class="row">
                <div class="col">
                  <p class="p1">胸痛中心</p>
                  <p class="p2">{{dataList2.num1}}人</p>
                </div>
                <div class="col">
                  <p class="p1">卒中中心</p>
                  <p class="p2">{{dataList2.num2}}人</p>
                </div>
              </div>
              <div class="row">
                <div class="col">
                  <p class="p1">创伤中心</p>
                  <p class="p2">{{dataList2.num3}}人</p>
                </div>
                <div class="col">
                  <p class="p1">烧伤中心</p>
                  <p class="p2">{{dataList2.num4}}人</p>
                </div>
              </div>
            </div>
          </div>
          <div class="bottom box">
            <Title title="院前救治占比" />
            <EchartsPie />
          </div>
        </div>
        <div class="div5 box">
          <Title title="院前急救接诊量" />
          <dl class="bigTab right">
            <dt>
              <div class="cell_1">序号</div>
              <div class="cell_2">医院名称</div>
              <div class="cell_3">胸痛患者</div>
              <div class="cell_4">卒中患者</div>
              <div class="cell_5">创/烧伤患者</div>
              <div class="cell_6">总计</div>
            </dt>
            <dd
              v-for="(item, index) in dataList7"
              :key="index"
            >
              <div
                class="cell_1"
                :title="index + 1"
              >{{index + 1}}</div>
              <div
                class="cell_2"
                :title="item.hospitalName"
              >{{item.hospitalName}}</div>
              <div
                class="cell_3"
                :title="item.num1"
              >{{item.num1}}</div>
              <div
                class="cell_4"
                :title="item.num2"
              >{{item.num2}}</div>
              <div
                class="cell_5"
                :title="item.num3"
              >{{item.num3}}</div>
              <div
                class="cell_6"
                :title="item.num4"
              >{{item.num4}}</div>
            </dd>
          </dl>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import Title from './components/title.vue'
import EchartsPie from './components/echartsPie.vue'
import EchartsMap from './components/echartsMap.vue'
export default {
  components: {
    Title,
    EchartsPie,
    EchartsMap
  },
  data() {
    return {
      dataList1: [
        { areaName: '硚口区', siteName: '站点1', siteLocation: '解放大道1095号', carCount: 10, hospitalName: '华中科技大学附属同济医院' },
        { areaName: '硚口区', siteName: '站点1', siteLocation: '解放大道1095号', carCount: 10, hospitalName: '华中科技大学附属同济医院' },
        { areaName: '硚口区', siteName: '站点1', siteLocation: '解放大道1095号', carCount: 10, hospitalName: '华中科技大学附属同济医院' },
        { areaName: '硚口区', siteName: '站点1', siteLocation: '解放大道1095号', carCount: 10, hospitalName: '华中科技大学附属同济医院' },
        { areaName: '硚口区', siteName: '站点1', siteLocation: '解放大道1095号', carCount: 10, hospitalName: '华中科技大学附属同济医院' },
        { areaName: '硚口区', siteName: '站点1', siteLocation: '解放大道1095号', carCount: 10, hospitalName: '华中科技大学附属同济医院' },
        { areaName: '硚口区', siteName: '站点1', siteLocation: '解放大道1095号', carCount: 10, hospitalName: '华中科技大学附属同济医院' },
        { areaName: '硚口区', siteName: '站点1', siteLocation: '解放大道1095号', carCount: 10, hospitalName: '华中科技大学附属同济医院' },
        { areaName: '硚口区', siteName: '站点1', siteLocation: '解放大道1095号', carCount: 10, hospitalName: '华中科技大学附属同济医院' },
        { areaName: '硚口区', siteName: '站点1', siteLocation: '解放大道1095号', carCount: 10, hospitalName: '华中科技大学附属同济医院' },
        { areaName: '硚口区', siteName: '站点1', siteLocation: '解放大道1095号', carCount: 10, hospitalName: '华中科技大学附属同济医院' },
        { areaName: '硚口区硚口区硚口区硚口区硚口区硚口区', siteName: '站点1站点1站点1站点1站点1', siteLocation: '解放大道1095号解放大道1095号解放大道1095号', carCount: 10, hospitalName: '华中科技大学附属同济医院华中科技大学附属同济医院华中科技大学附属同济医院华中科技大学附属同济医院' }
      ],
      dataList2: {
        num1: 23548,
        num2: 47945,
        num3: 32237,
        num4: 1920,
      },
      dataList3: {
        num1: 514,
        num2: 29,
        num3: 5
      },
      dataList7: [
        { hospitalName: '华中科技大学附属同济医院', num1: 10, num2: 20, num3: 30, num4: 40, count: 100 },
        { hospitalName: '华中科技大学附属同济医院', num1: 10, num2: 20, num3: 30, num4: 40, count: 100 },
        { hospitalName: '华中科技大学附属同济医院', num1: 10, num2: 20, num3: 30, num4: 40, count: 100 },
        { hospitalName: '华中科技大学附属同济医院', num1: 10, num2: 20, num3: 30, num4: 40, count: 100 },
        { hospitalName: '华中科技大学附属同济医院', num1: 10, num2: 20, num3: 30, num4: 40, count: 100 },
        { hospitalName: '华中科技大学附属同济医院', num1: 10, num2: 20, num3: 30, num4: 40, count: 100 },
        { hospitalName: '华中科技大学附属同济医院', num1: 10, num2: 20, num3: 30, num4: 40, count: 100 },
        { hospitalName: '华中科技大学附属同济医院', num1: 10, num2: 20, num3: 30, num4: 40, count: 100 },
        { hospitalName: '华中科技大学附属同济医院', num1: 10, num2: 20, num3: 30, num4: 40, count: 100 },
        { hospitalName: '华中科技大学附属同济医院', num1: 10, num2: 20, num3: 30, num4: 40, count: 100 },
        { hospitalName: '华中科技大学附属同济医院', num1: 10, num2: 20, num3: 30, num4: 40, count: 100 },
        { hospitalName: '华中科技大学附属同济医院华中科技大学附属同济医院华中科技大学附属同济医院华中科技大学附属同济医院', num1: 10, num2: 20, num3: 30, num4: 40, count: 100 }
      ]
    }
  },
  mounted() {

  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.bigscreen-bg {
  width: 9216px;
  height: 2304px;
  background: url("../../assets/images/bg.png") 100% 100%;
  background-size: 100% 100%;
  .main {
    padding-top: 203px;
    .time {
      color: #6f96fe;
      line-height: 60px;
      font-size: 48px;
      height: 60px;
      margin-left: 182px;
      .fa {
        font-size: 60px;
      }
    }
    .content {
      margin-top: 93px;
      display: flex;
      height: 1776px;
      justify-content: center;
      > div {
        height: 100%;
      }
      .div1,
      .div5 {
        width: 1948px;
      }
      .div2,
      .div4 {
        width: 1200px;
        margin: 0 80px;
        .top,
        .bottom {
          height: 848px;
        }
        .bottom {
          margin-top: 80px;
        }
      }
      .div3 {
        width: 2232px;
        .datalist {
          padding-top: 74px;
          display: flex;
          justify-content: center;
          li {
            height: 192px;
            width: 500px;
            padding: 0 50px;
            img {
              float: left;
              height: 192px;
              width: 192px;
              margin-right: 30px;
            }
            .p1 {
              height: 48px;
              font-size: 48px;
              font-weight: 600;
              color: #6f96fe;
              line-height: 48px;
              margin-bottom: 28px;
              padding-top: 10px;
            }
            .p2 {
              height: 96px;
              font-size: 96px;
              color: #ffffff;
              line-height: 96px;
              span {
                font-size: 56px;
              }
            }
          }
        }
      }
      .box {
        box-shadow: inset 0px 0px 48px 0px #6791ff;
        border-radius: 24px;
        border: 3px solid
          linear-gradient(
            225deg,
            rgba(139, 223, 255, 0.1),
            rgba(125, 178, 255, 1),
            rgba(124, 177, 255, 1),
            rgba(140, 227, 255, 0.1)
          )
          3 3;
      }
      .bigTab {
        margin-top: 110px;
        padding: 0 60px;
        dt {
          color: #6f96fe;
          line-height: 44px;
          font-weight: bold;
          height: 44px;
          font-size: 44px;
          padding-bottom: 70px;
          border-bottom: 2px solid #7cb1ff;
          margin-bottom: 35px;
        }
        dd {
          height: 110px;
          color: #ffffff;
          font-size: 40px;
          line-height: 110px;
          margin: 0;
        }
        > dt,
        > dd {
          > div {
            float: left;
            padding: 0 10px;
            box-sizing: border-box;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        &.left {
          .cell_1 {
            width: 120px;
            text-align: center;
          }
          .cell_2 {
            width: 200px;
          }
          .cell_3 {
            width: 250px;
          }
          .cell_4 {
            width: 500px;
          }
          .cell_5 {
            width: 200px;
          }
          .cell_6 {
            width: 500px;
          }
        }
        &.right {
          .cell_1 {
            width: 120px;
            text-align: center;
          }
          .cell_2 {
            width: 500px;
          }
          .cell_3 {
            width: 300px;
          }
          .cell_4 {
            width: 300px;
          }
          .cell_5 {
            width: 300px;
          }
          .cell_6 {
            width: 200px;
          }
        }
      }
      .bigMsg {
        .row {
          margin-top: 112px;
          height: 176px;
          display: flex;
          .col {
            width: 599px;
            border-right: 1px solid #2a477a;
            &:last-child {
              border-right: 0;
              border-left: 1px solid #2a477a;
            }
            p {
              text-align: center;
            }
            .p1 {
              height: 56px;
              font-size: 56px;
              font-weight: bold;
              color: #6f96fe;
              line-height: 56px;
            }
            .p2 {
              font-size: 72px;
              font-weight: 600;
              color: #ffffff;
              line-height: 72px;
              margin-top: 40px;
            }
          }
        }
      }
    }
  }
}
</style>