<template>
  <div class="out">
    <!-- <index-chart v-if="indexStyle==1"></index-chart>
    <index-bdc v-if="indexStyle==2"></index-bdc>
    <index-task v-if="indexStyle==3"></index-task>
    <div style="width: 100%;text-align: right;margin-top: 20px">
      请选择首页样式：
      <a-radio-group v-model="indexStyle">
        <a-radio :value="1">统计图表</a-radio>
        <a-radio :value="2">统计图表2</a-radio>
        <a-radio :value="3">任务表格</a-radio>
      </a-radio-group>
    </div> -->
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="7" :style="{ marginBottom: '24px' }">
        <div class="card">
          <div class="title">车辆管理</div>
          <div class="tab-box">
            <div class="tab" v-for="item in tabArr" :key="item.text">
              <div class="text">{{ item.text }}</div>
              <div>{{ item.number }}</div>
            </div>
          </div>
          <div>时间段车流分析</div>
          <chart-pie style="width: 350px" :row="false" :data-source="pieData" :height="250" />
        </div>
        <div class="card">
          <div class="title">人员识别分析</div>
          <chart-bar :height="200" yaxisText="访客人数" :dataSource="barData" />
        </div>
        <div class="card">
          <div class="title">建筑设备监控列表</div>
          <table class="table">
            <tr class="th">
              <td>序号</td>
              <td>设备位置</td>
              <td>设备编号</td>
              <td>设备ip</td>
              <td>运行状态</td>
            </tr>
            <tr v-for="(item, index) in table" :key="index">
              <td>{{ index + 1 }}</td>
              <td>{{ item.address }}</td>
              <td>{{ item.number }}</td>
              <td>{{ item.ip }}</td>
              <td>{{ item.status }}</td>
            </tr>
          </table>
        </div>
      </a-col>
      <a-col :sm="24" :md="12" :xl="10" :style="{ marginBottom: '24px' }">
        <div class="card">
          <div class="title">门禁状态</div>
          <div class="center-tab">
            <div class="item blue">
              <div>正常</div>
              <div>34</div>
            </div>
            <div class="item orange">
              <div>告警</div>
              <div>2</div>
            </div>
            <div class="item">
              <div>离线</div>
              <div>1</div>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="title">网络拓扑图</div>
          <div class="radio">暂无数据</div>
        </div>
      </a-col>
      <a-col :sm="24" :md="24" :xl="7" :style="{ marginBottom: '24px' }">
        <div class="card">
          <div class="title">视频安防</div>
          <div class="tab-box">
            <div class="tab" v-for="item in tabArr1" :key="item.text">
              <div class="text">{{ item.text }}</div>
              <div>{{ item.number }}</div>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="title">信息发布列表</div>
          <chart-line :data-source="lineData" :height="492" />
        </div>
        <div class="card">
          <div class="title">入侵管理</div>
          <div>关联监控</div>
          <div class="radio">暂无监控</div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
// import IndexChart from './IndexChart'
// import IndexTask from "./IndexTask"
// import IndexBdc from './IndexBdc'
import ChartPie from './modules/ChartPie'
import ChartBar from './modules/ChartBar'
import ChartLine from './modules/ChartLine'
export default {
  name: 'Analysis',
  components: {
    // IndexChart,
    // IndexTask,
    // IndexBdc
    ChartPie,
    ChartBar,
    ChartLine,
  },
  data() {
    return {
      indexStyle: 1,
      tabArr: [
        {
          text: '剩余车位',
          number: 32,
        },
        {
          text: '驶入车辆',
          number: 302,
        },
        {
          text: '驶出车辆',
          number: 200,
        },
      ],
      tabArr1: [
        {
          text: '告警',
          number: 2,
        },
        {
          text: '正常',
          number: 302,
        },
        {
          text: '离线',
          number: 1,
        },
      ],
      pieData: [
        { item: '深夜（22:00-次日07:00）', count: 10 },
        { item: '晚上（18:00-22:00）', count: 400 },
        { item: '下午（15:00-18:00）', count: 50 },
        { item: '中午（12:00-15:00）', count: 100 },
        { item: '上午（10:00-12:00）', count: 20 },
        { item: '早上（7:00-10:00）', count: 500 },
      ],
      barData: [
        {
          x: '自助访客机',
          y: 100,
        },
        {
          x: '访客一体机',
          y: 140,
        },
        {
          x: '出入口闸机',
          y: 300,
        },
        {
          x: '身份证识别器',
          y: 100,
        },
        {
          x: '人脸识别机',
          y: 100,
        },
      ],
      table: [
        {
          address: '1号楼1层',
          number: 'cx001',
          ip: '192.168.1.1',
          status: '正常',
        },
        {
          address: '1号楼1层',
          number: 'cx001',
          ip: '192.168.1.1',
          status: '离线',
        },
        {
          address: '1号楼1层',
          number: 'cx001',
          ip: '192.168.1.1',
          status: '正常',
        },
        {
          address: '1号楼1层',
          number: 'cx001',
          ip: '192.168.1.1',
          status: '正常',
        },
        {
          address: '1号楼1层',
          number: 'cx001',
          ip: '192.168.1.1',
          status: '正常',
        },
        {
          address: '1号楼1层',
          number: 'cx001',
          ip: '192.168.1.1',
          status: '正常',
        },
      ],
      lineData: [
        { month: '1月', 公告: 100, 通知: 150 },
        { month: '2月', 公告: 140, 通知: 100 },
        { month: '3月', 公告: 230, 通知: 200 },
        { month: '4月', 公告: 100, 通知: 140 },
        { month: '5月', 公告: 130, 通知: 100 },
      ],
    }
  },
  created() {},
  methods: {},
}
</script>
<style lang="less" scoped>
.out {
  padding: 0 10px;
}
.card {
  background: #fff;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 15px;
}
.title {
  font-size: 14px;
  padding-left: 5px;
  border-left: 3px solid #409eff;
  margin-bottom: 20px;
  font-weight: bold;
}

.tab-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  background: rgb(223, 239, 251);
  padding: 10px;
  font-weight: bold;
  margin-bottom: 20px;
}
.table {
  width: 100%;
  text-align: center;
  .th {
    color: #fff;
    background: rgb(93, 173, 249);
  }
  & tr:nth-child(odd) {
    background: rgb(159, 213, 251);
  }
  & tr:nth-child(even) {
    background: rgb(200, 231, 253);
  }
  td {
    padding: 6px 0;
  }
}
.center-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .item {
    width: 180px;
    height: 100px;
    border-radius: 4px;
    background: rgb(117, 115, 115);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    &.blue {
      background: rgb(93, 173, 249);
    }
    &.orange {
      background: rgb(232, 122, 18);
    }
  }
}
.radio {
  width: 100%;
  height: 100px;
  line-height: 100px;
  text-align: center;
  margin-top: 10px;
  background: #ddd;
}
</style>