<template>
  <div class="serhome">
    <el-row class="ser_top">
      <el-col :span="24">
        <div class="ser_tit">轻松上手数字化接待指南</div>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="ser_tlist">
              <img  src="@/assets/images/index/topa.png" class="limg"/>
              <div class="ser_txt"><div>创建活动</div><p>灵活便捷创建接待指南</p>
              </div>
              <img  src="@/assets/images/index/rimg.png" class="rimg"/>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="ser_tlist">
              <img  src="@/assets/images/index/topb.png" class="limg"/>
              <div class="ser_txt"><div>设置考察点</div><p>无需编辑考察点，一键添加</p>
              </div>
              <img  src="@/assets/images/index/rimg.png" class="rimg"/>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="ser_tlist">
              <img  src="@/assets/images/index/topc.png" class="limg"/>
              <div class="ser_txt"><div>活动审核<span></span></div><p>快速对活动进行审核</p>
              </div>
              <img  src="@/assets/images/index/rimg.png" class="rimg"/>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row :gutter="16">
      <el-col :span="16">
        <div class="sercount">
            <div class="serc_top">
              <div class="serc_topa">浏览统计<span>（包含所有接待指南数据总览）</span></div>
              <div class="serc_topb">刷新数据<img  src="@/assets/images/index/refresh.png" class="rimg"/></div>
            </div>
            <el-row>
              <el-col :span="6">
                <div class="serc_num">
                  <div class="serc_numa">总浏览人数</div>
                  <div class="serc_numb">1543<span>人</span></div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="serc_num">
                  <div class="serc_numa">总浏览次数</div>
                  <div class="serc_numb">2143<span>次</span></div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="serc_num">
                  <div class="serc_numa">累计浏览终端数</div>
                  <div class="serc_numb">3274<span>次</span></div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="serc_num">
                  <div class="serc_numa">人均停留时长</div>
                  <div class="serc_numb">7.3<span>分钟</span></div>
                </div>
              </el-col>
            </el-row>
            <div class="serc_charts">
              <el-row style="background:#fff;padding:20px 0px 0;position: relative;">
                <div class="serc_day">
                  <div class="act">本年</div>
                  <span></span>
                  <div>本月</div>
                </div>
                <line-bar-chart :chart-data="lineChartData"></line-bar-chart>
              </el-row>
            </div>
        </div>

      </el-col>
      <el-col :span="8">
        <el-row>
          <el-col :span="24">
            <el-row class="serc_ra">
              <el-col :span="18">
                <div style="display: flex;align-items: center;">
                  <div class="serc_rat" style="width: 104px;height: 104px;">
                    <gauge-chart @getTime="getTime"></gauge-chart>
                  </div>
                  <div class="serc_rad">
                    <div style="margin-bottom: 8px;">
                      现在是<span>{{timedata.time}}</span>
                    </div>
                    <p>{{timedata.day}} {{timedata.week}}</p>
                  </div>
                </div>
              </el-col>
              <el-col :span="1"><div class="line"></div></el-col>
              <el-col :span="5"><div class="serc_raw">
                <img  src="@/assets/images/index/topa.png"/>
                <p>多云</p>
              </div></el-col>
            </el-row>
            <!-- <div >



            </div> -->
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="serc_rb">
              <div class="serc_top">
                <div class="serc_topa">人均停留时长统计<span>(2023年10月)</span></div>
                <div class="serc_topb">刷新数据<img  src="@/assets/images/index/refresh.png" class="rimg"/></div>
              </div>
              <!-- 图表 -->
              <div>
                <bold-chart :chart-data="boldChartData"></bold-chart>
                <el-row :gutter="18">
                  <el-col :span="8">
                    <div class="serc_rl">
                      <div>0 ~ 5分</div>
                      <p>31<span>次</span></p>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="serc_rl">
                      <div>5 ~ 10分</div>
                      <p>31<span>次</span></p>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="serc_rl">
                      <div>10 ~ 20分</div>
                      <p>31<span>次</span></p>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="serc_rl">
                      <div>20 ~ 30分</div>
                      <p>31<span>次</span></p>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="serc_rl">
                      <div>30 ~ 60分</div>
                      <p>31<span>次</span></p>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="serc_rl">
                      <div>60分以上</div>
                      <p>31<span>次</span></p>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row class="ser_table">
      <el-col :span="24">
        <div class="serc_top" style="margin-bottom: 21px;">
          <div class="serc_topa">已创建活动列表<span>（(按创建时间倒序排列)</span></div>
          <div class="serc_topb">查看更多<img  src="@/assets/images/index/mring.png" class="rimg"/></div>
        </div>
      </el-col>
      <el-col :span="24">
          <el-table
              :data="tableData"
              stripe >
              <el-table-column
                prop="date"
                label="主题"
                align='center'
                >
              </el-table-column>
              <el-table-column
                prop="name"
                label="活动时间"
                align='center'
                >
              </el-table-column>
              <el-table-column
                prop="province"
                label="活动地点"
                align='center'
                >
              </el-table-column>
              <el-table-column
                prop="city"
                label="接待人"
                align='center'
                >
              </el-table-column>
              <el-table-column
                prop="address"
                label="接待人手机号"
                align='center'
               >
              </el-table-column>
              <el-table-column
                prop="zip"
                label="审核状态"
                align='center'
                >
                <template slot-scope="scope">
                  <div class="tabst" v-if="scope.row.zip==1"><span class="ta"></span>未审核</div>
                  <div class="tabst" v-if="scope.row.zip==2"><span class="tb"></span>已驳回</div>
                  <div class="tabst" v-if="scope.row.zip==3"><span class="tc"></span>已审核</div>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                align='center'
                width="200">
                <template slot-scope="scope">
                  <el-button @click="handleClick(scope.row)" type="success" plain size="small">查看</el-button>
                  <el-button type="danger" plain size="small">编辑</el-button>
                </template>
              </el-table-column>
            </el-table>
      </el-col>
      <el-col :span="24"><pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
            @pagination="getList" />
      </el-col>
    </el-row>
   </div>
</template>

<script>
  import LineBarChart from './dashboard/lineBarChart'
  import BoldChart from './dashboard/BoldChart'
  import GaugeChart from './dashboard/GaugeChart'
  const lineChartData = {
    newVisitis: {
      expectedData: [80, 120, 111, 104, 105, 100, 105],
      actualData: [120, 140, 130, 110, 162, 140, 145],
      linedata:[80,110,160,150,110,135,178]
    },
    messages: {
      expectedData: [200, 192, 120, 144, 160, 130, 140],
      actualData: [180, 160, 151, 106, 145, 150, 130]
    },
    purchases: {
      expectedData: [80, 100, 121, 104, 105, 90, 100],
      actualData: [120, 90, 100, 138, 142, 130, 130]
    },
    shoppings: {
      expectedData: [130, 140, 141, 142, 145, 150, 160],
      actualData: [120, 82, 91, 154, 162, 140, 130]
    }
  };
export default {
  name: "Index",
  components:{
   LineBarChart,BoldChart,GaugeChart
  },
  data() {
    return {
      // 版本号
      version: "3.8.6",
      lineChartData: lineChartData.newVisitis,
      boldChartData:lineChartData.messages,
      total:20,
      timedata:'',
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      tableData: [{
                date: '合肥市考察学习代表团前往潜山考察交流',
                name: '2023.11.23 - 11.25',
                province: '潜山XXX大酒店',
                city: '林柏瑞',
                address: '180****8888',
                zip: 1
              }, {
                date: '合肥市考察学习代表团前往潜山考察交流',
                name: '2023.11.23 - 11.25',
                province: '潜山XXX大酒店',
                city: '林柏瑞',
                address: '180****8888',
                zip: 2
              },{
                date: '合肥市考察学习代表团前往潜山考察交流',
                name: '2023.11.23 - 11.25',
                province: '潜山XXX大酒店',
                city: '林柏瑞',
                address: '180****8888',
                zip: 3
              }, {
                date: '合肥市考察学习代表团前往潜山考察交流',
                name: '2023.11.23 - 11.25',
                province: '潜山XXX大酒店',
                city: '林柏瑞',
                address: '180****8888',
                zip: 1
              },]
    };
  },
  mounted(){
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    getTime(e){
      this.timedata=e
    },
    getList(){

    }
  }
};
</script>

<style  lang="scss">
.serhome{
  p{margin: 0;padding: 0;}
   background-color: #f0f2f5;overflow: hidden;
   .ser_top{background: #FFFFFF;border-radius: 6px;padding:22px 23px;margin-bottom: 16px;
      .ser_tit{font-size: 17px;font-weight: bold;color: #161616;margin-bottom: 22px;}
      .ser_tlist{background: #F5F6F8;border-radius: 5px;padding: 18px 29px;display: flex;align-items: center;
        .limg{width: 23px;height: 25px;flex: 0 0 auto;margin-right: 18px;}
        .rimg{width: 8px;height: 13px;flex: 0 0 auto;margin-left: 18px;}
        .ser_txt{flex: 1;
            div{font-size: 15px;font-weight: bold;color: #161616;position: relative;display: inline-block;}
            p{font-size: 15px;font-weight: 500;color: #AAAAAA;margin-top: 6px;}
            span{width: 10px;height: 10px;background: #F64144;border-radius: 50%;position: absolute;right: -5px;top: 0;}
        }
      }
   }
  .sercount{background: #FFFFFF;border-radius: 6px;padding:20px 24px 35px;

    .serc_num{padding: 15px;
      .serc_numa{font-size: 15px;font-weight: 500;color: #AAAAAA;margin-bottom: 16px;}
      .serc_numb{font-size: 23px;color: #161616;
        span{font-size: 15px;padding-left: 6px;}
      }
    }
    .serc_charts{
      .serc_day{position: absolute;right: 0;top: 16px;display: flex;align-items: center;z-index: 2;cursor: pointer;
        div{padding: 0 14px;font-size: 15px;font-weight: bold;color: #AAAAAA;
          &.act{color: #04BFA1;}
        }
        span{width: 1px;height: 13px;background: #DADADA;display: block;flex: 0 0 auto;}
      }
    }
  }
  .serc_ra{
    background: #FFFFFF;border-radius: 6px;padding:0 10px 0 0;margin-bottom: 16px;display: flex;align-items: center;
    .serc_rat{width: 85px;height: 80px;}
    .line{width: 1px;height: 19px;background: #DADADA;
    }
    .serc_rad{margin-left: 9px;flex: 1;
      div{font-size: 15px;font-weight: 500;color: #161616;
        span{font-family: BankGothicBT-Medium;}
      }
      p{font-size: 15px;font-weight: 500;color: #666666;}
    }
    .serc_raw{display: flex;flex-direction: column;align-items: center;padding: 0 4px;min-width: 64px;box-sizing:border-box;flex:0 0 auto;
      img{width: 44px;height: 35px;margin-bottom: 7px;}
      p{font-size: 13px;font-weight: 500;color: #161616;}
    }
  }
  .serc_rb{
    background: #FFFFFF;border-radius: 6px;padding: 20px 22px 3px;
    .serc_rl{background: #F5F6F8;
border-radius: 8px;padding: 15px 18px 10px;margin-bottom: 17px;
      div{font-size: 15px;font-weight: 500;color: #666666;margin-bottom: 5px;}
      p{font-size: 23px;font-weight: bold;
color: #000000;
        span{font-size: 15px;}
}
    }
  }
  // 头
  .serc_top{display: flex;align-items: center;margin-bottom: 15px;
    .serc_topa{font-size: 17px;font-weight: bold;color: #161616;flex: 1;margin-right: 4px;
      span{font-size: 13px;color: #666666;}
    }
    .serc_topb{font-size: 13px;font-weight: 500;color: #161616;flex: 0 0 auto;cursor: pointer;
      img{width: 13px;height: 13px;margin-left: 10px;}
    }
  }
  .ser_table{background: #FFFFFF;border-radius: 6px;padding:20px 23px;margin-top: 16px;
    .tabst{font-size: 13px;color: #161616;
      span{width: 9px;height: 9px;border-radius: 50%;display: inline-block;margin-right: 5px;
        &.ta{background: #AAAAAA;}
        &.tb{background: #F64144;}
        &.tc{background: #04BFA1;}
      }
    }
    .el-table{
      .el-table__cell{border-bottom: none !important;}
      th{color: #161616 !important;}
    }

    .el-button{height: 23px;padding: 0 15px;line-height: 21px;}
    // .el-button--success{border-color: #04BFA1;color: #04BFA1;background-color: rgba(4, 191, 161, 0.06);
    // &.is-plain{background-color: #04BFA1;color: #ffffff;}
    // }
  }
}












.home {

  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>
