<!--
 * @Description: 交通安全指数
 * @Author: 王晓颖
 * @Date: 2020-09-02 15:38:35
 -->
<template>
  <div>
    <div class="row">
      <panel-title-1>交通安全指数</panel-title-1>
      <!--<title2>交通安全指数</title2>-->
    </div>
    <div class="container">
      <div class="index-box">
        <traffic-index :data="gem">
          <img :src="gemImg">
        </traffic-index>
      </div>
      <div class="index-box">
        <traffic-index :data="trouble">
          <img :src="troubleImg">
        </traffic-index>
      </div>
      <div class="index-box">
        <traffic-index :data="flow">
          <img :src="flowImg">
        </traffic-index>
      </div>
    </div>
    <div class="container">
      <div class="index-box" style="height:0.7rem">
        <road-traffic-index :header="gemConfig.header" :data="gemConfig.data"/>
      </div>
      <div class="index-box" style="height:0.7rem">
        <road-traffic-index :header="gemConfig.header" :data="gemConfig.data"/>
      </div>
      <div class="index-box" style="height:0.7rem">
        <road-traffic-index :header="gemConfig.header" :data="gemConfig.data"/>
      </div>
    </div>
  </div>
</template>

<script>
import Title2 from '@/components/text/title/Title2'
import TrafficIndex from './trafficIndex'
import RoadTrafficIndex from './roadTrafficIndex'
export default {
  name: 'trafficSafety',
  components: {RoadTrafficIndex, TrafficIndex, Title2},
  data () {
    return {
      gem: {
        name: '拥堵指数',
        value: '341',
        valueStatus: 'warning',
        percent: '+12%',
        percentStatus: 'up'
      },
      trouble: {
        name: '违章事故指数',
        value: '112',
        valueStatus: 'danger',
        percent: '0.0%',
        percentStatus: 'fair'
      },
      flow: {
        name: '交通流量',
        value: '131',
        valueStatus: 'normal',
        percent: '-12.1%',
        percentStatus: 'down'
      },
      gemImg: require('@/assets/images/traffic/gem.png'),
      troubleImg: require('@/assets/images/traffic/trouble.png'),
      flowImg: require('@/assets/images/traffic/flow.png'),
      gemConfig: {
        header: ['道路名称', '拥堵指数', '同比'],
        data: [
          // ['紫藤花路', '3', '23%'],
          // ['潇雨路', '5', '23%'],
          // ['赣南大道', '7', '23%'],
          // ['城市公园', '18', '23%'],
          // ['创业路', '4', '23%'],
          // ['文轩路', '3', '23%'],
          // ['景明路', '3', '23%'],
          // ['碧玉南路', '3', '23%'],
          // ['润城河路', '3', '23%'],
          // ['名胜古迹', '2', '23%']
        ]
      },
      troubleConfig: {
        header: ['道路名称', '违章事故指数', '同比'],
        data: [
          // ['紫藤花路', '3', '23%'],
          // ['潇雨路', '5', '23%'],
          // ['赣南大道', '7', '23%'],
          // ['城市公园', '18', '23%'],
          // ['创业路', '4', '23%'],
          // ['文轩路', '3', '23%'],
          // ['景明路', '3', '23%'],
          // ['碧玉南路', '3', '23%'],
          // ['润城河路', '3', '23%'],
          // ['名胜古迹', '2', '23%']
        ]
      },
      flowConfig: {
        header: ['道路名称', '交通流量指数', '同比'],
        data: [
          // ['紫藤花路', '3', '23%'],
          // ['潇雨路', '5', '23%'],
          // ['赣南大道', '7', '23%'],
          // ['城市公园', '18', '23%'],
          // ['创业路', '4', '23%'],
          // ['文轩路', '3', '23%'],
          // ['景明路', '3', '23%'],
          // ['碧玉南路', '3', '23%'],
          // ['润城河路', '3', '23%'],
          // ['名胜古迹', '2', '23%']
        ]
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .container{
    display: flex;
    justify-content: start;
  }
.index-box{
  width:30%;
  display: flex;
  justify-content: center;
}
</style>