<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :span="18">
        <div class="content-left">
          <div class="task-wrap">
            <div class="item">
              <img class="left" src="@/assets/images/index/icon1.png"/>
              <div class="right">
                <p class="title">即将开标项目</p>
                <p class="number">36</p>
                <p class="compare">较上月 <span class="up">+3<img src="@/assets/images/index/up.png"/></span></p>
              </div>
            </div>
            <div class="item">
              <img class="left" src="@/assets/images/index/icon2.png"/>
              <div class="right">
                <p class="title">重点关注项目</p>
                <p class="number">36</p>
                <p class="compare">较上月 <span class="up">+3<img src="@/assets/images/index/up.png"/></span></p>
              </div>
            </div>
            <div class="item">
              <img class="left" src="@/assets/images/index/icon3.png"/>
              <div class="right">
                <p class="title">重点关注客户</p>
                <p class="number">36</p>
                <p class="compare">较上月 <span class="down">-3<img src="@/assets/images/index/down.png"/></span></p>
              </div>
            </div>
            <div class="item">
              <img class="left" src="@/assets/images/index/icon4.png"/>
              <div class="right">
                <p class="title">储备合作客户</p>
                <p class="number">36</p>
                <p class="compare">较上月 <span class="up">+3<img src="@/assets/images/index/up.png"/></span></p>
              </div>
            </div>
            <div class="item add">
              <span class="yd"><i></i><i></i><i></i><i></i><i></i><i></i></span>
              <div class="btn"><i class="el-icon-plus"></i>新建待办任务</div>
            </div>
          </div>
          <!--经理视角-->
          <div v-if="user === 1" class="content-wrap">
            <el-col :span="12">
              <div class="record">
                <div class="flex-box query-box">
                  <div class="flex-box query-params">
                    <span class="common-title">跟进记录</span>
                  </div>
                  <div class="flex-box query-ability">
                    <div class="select-popper">
                      <div class="area">{{area}}<i class="sjx"></i></div>
                      <el-select v-model="area" class="select-multiple" placeholder="请选择">
                        <el-option v-for="(item,index) in areaList" :key="index" :label="item.name" :value="item.name"></el-option>
                      </el-select>
                    </div>
                    <div class="select-popper">
                      <div class="month">{{date}}<i class="sjx"></i></div>
                      <el-select v-model="date" class="select-multiple" placeholder="请选择">
                        <el-option v-for="(item,index) in dateList" :key="index" :label="item" :value="item"></el-option>
                      </el-select>
                    </div>
                  </div>
                </div>
                <div class="list">
                  <div class="item" v-for="(item,index) in gjjlData" :key="index">
                    <h3>{{item.title}}</h3>
                    <p>
                      <span>跟进人：{{item.user}}</span>
                      <span>关联企业：{{item.name}}</span>
                    </p>
                  </div>
                </div>
                <p class="more">更多跟进记录 ></p>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="ranking">
                <div class="flex-box query-box">
                  <div class="flex-box query-params">
                    <span class="common-title">业绩排名</span>
                  </div>
                  <div class="flex-box query-ability">
                    <div class="select-popper">
                      <div class="area">{{area}}<i class="sjx"></i></div>
                      <el-select v-model="area" class="select-multiple" placeholder="请选择">
                        <el-option v-for="(item,index) in areaList" :key="index" :label="item.name" :value="item.name"></el-option>
                      </el-select>
                    </div>
                    <div class="select-popper">
                      <div class="month">{{date}}<i class="sjx"></i></div>
                      <el-select v-model="date" class="select-multiple" placeholder="请选择">
                        <el-option v-for="(item,index) in dateList" :key="index" :label="item" :value="item"></el-option>
                      </el-select>
                    </div>
                  </div>
                </div>
                <div class="main">
                  <div class="amount">
                    <p>
                      <span>产值目标（万元）</span>
                      <span>实际已完成(万元)</span>
                    </p>
                    <p>
                      <span class="money">359,800.00</span>
                      <span class="money">359,800.00</span>
                    </p>
                    <el-progress :text-inside="true" :stroke-width="10" :percentage="70"></el-progress>
                  </div>
                  <div style="background: #ffffff;margin: 0 12px 12px 12px;">
                    <div id="pm-echarts" style="height: 288px;"></div>
                  </div>
                </div>
              </div>
            </el-col>
          </div>
          <div v-if="user === 1" class="analysis">
            <div class="flex-box query-box">
              <div class="flex-box query-params">
                <span class="common-title">经营分析</span>
              </div>
              <div class="flex-box query-ability">
                <div class="tabs">
                  <!--<div class="label" v-for="(item,index) in typeList" :class="typeIndex === index ? 'color':''" @click="handleClick(index)">{{item.name}}</div>-->
                </div>
                <div class="select-popper">
                  <div class="area">{{area}}<i class="sjx"></i></div>
                  <el-select v-model="area" class="select-multiple" placeholder="请选择">
                    <el-option v-for="(item,index) in areaList" :key="index" :label="item.name" :value="item.name"></el-option>
                  </el-select>
                </div>
              </div>
            </div>
            <div>
              <div id="fx-echarts" style="height: 200px;"></div>
            </div>
          </div>

          <!--员工视角-->
          <div v-if="user === 2" class="content-db">
            <div class="flex-box query-box">
              <div class="flex-box query-params">
                <span class="common-title">待办</span>
              </div>
              <div class="flex-box query-ability"><span>9</span>全部待办 ></div>
            </div>
            <div class="list">
              <div class="item" v-for="(item,index) in gjjlData" :key="index">
                <h3>{{item.title}}</h3>
                <p>
                  <span>拜访时间：{{item.time}}</span>
                  <span>关联企业：{{item.name}}</span>
                </p>
                <div class="btn">写跟进<i class="el-icon-edit"></i></div>
              </div>
            </div>
          </div>
          <div v-if="user === 2" class="trends">
            <el-tabs v-model="activeName" @tab-click="handleClickTab">
              <el-tab-pane label="甲方舆情" name="first">
                <div class="main-box">
                  <el-timeline>
                    <el-timeline-item
                      v-for="(item, index) in trendsList"
                      :key="index"
                      icon="el-icon-time">
                      <div class="time">{{item.time}}<span class="company">{{item.name}}</span></div>
                      <div class="cont">{{item.main}}</div>
                    </el-timeline-item>
                  </el-timeline>
                </div>
                <!--<div class="check">全部甲方舆情 ></div>-->
              </el-tab-pane>
              <el-tab-pane label="监控动态" name="second">
                <div class="main-box">
                  <el-timeline>
                    <el-timeline-item
                      v-for="(item, index) in trendsList"
                      :key="index"
                      icon="el-icon-time">
                      <div class="time">{{item.time}}<span class="company">{{item.name}}</span></div>
                      <div class="cont">{{item.main}}</div>
                    </el-timeline-item>
                  </el-timeline>
                </div>
                <!--<div class="check">全部监控动态 ></div>-->
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="content-right">
          <div class="user" @click="handleChange">
            <h3 v-if="user === 1">刘毅<span>总经理</span></h3>
            <h3 v-if="user === 2">李婷婷<span>营销员</span></h3>
            <p>您好，祝您工作顺利每一天</p>
          </div>
          <div class="search">
            <span class="common-title">快捷搜索</span>
            <el-input placeholder="找客户/找项目/找甲方">
              <i slot="prefix" class="el-icon-search"></i>
            </el-input>
            <span class="common-title">储备项目类</span>
            <div class="list" style="margin-top: 8px;">
              <div class="item">
                <img src="@/assets/images/index/cb_icon1.png"/>
                <p>EPC项目</p>
              </div>
              <div class="item">
                <img src="@/assets/images/index/cb_icon2.png"/>
                <p>投资项目</p>
              </div>
              <div class="item">
                <img src="@/assets/images/index/cb_icon3.png"/>
                <p>房建项目</p>
              </div>
            </div>
            <div class="list">
              <div class="item">
                <img src="@/assets/images/index/cb_icon4.png"/>
                <p>电力项目</p>
              </div>
              <div class="item">
                <img src="@/assets/images/index/cb_icon5.png"/>
                <p>市政项目</p>
              </div>
              <div class="item">
                <img src="@/assets/images/index/cb_icon6.png"/>
                <p>水利项目</p>
              </div>
            </div>
          </div>
          <div class="zbgg" v-if="user === 1">
            <span class="common-title">中标公告</span>
            <div class="list">
              <div class="item">
                <h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
                <p>
                  <span>中标金额：4754.34</span>
                  <span>中标单位：中铁十二局集团</span>
                </p>
              </div>
              <div class="item">
                <h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
                <p>
                  <span>中标金额：4754.34</span>
                  <span>中标单位：中铁十二局集团</span>
                </p>
              </div>
              <div class="item">
                <h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
                <p>
                  <span>中标金额：4754.34</span>
                  <span>中标单位：中铁十二局集团</span>
                </p>
              </div>
              <div class="item">
                <h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
                <p>
                  <span>中标金额：4754.34</span>
                  <span>中标单位：中铁十二局集团</span>
                </p>
              </div>
              <div class="item">
                <h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
                <p>
                  <span>中标金额：4754.34</span>
                  <span>中标单位：中铁十二局集团</span>
                </p>
              </div>
            </div>
          </div>
          <div v-if="user === 2" class="zbhxr">
            <span class="common-title">竞争对手中标候选人公告</span>
            <div class="list">
              <div class="item">
                <h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
                <p>
                  <span>中标金额：4754.34</span>
                </p>
              </div>
              <div class="item">
                <h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
                <p>
                  <span>中标金额：4754.34</span>
                </p>
              </div>
              <div class="item">
                <h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
                <p>
                  <span>中标金额：4754.34</span>
                </p>
              </div>
              <div class="item">
                <h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
                <p>
                  <span>中标金额：4754.34</span>
                </p>
              </div>
              <div class="item">
                <h3>太原市万柏林区2023年兴华街道老旧小区改造项目</h3>
                <p>
                  <span>中标金额：4754.34</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  import "@/assets/styles/public.css";
export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.8.5",
      typeList:[
        {name:'待成交项目数'},
        {name:'待成交总金额'},
        {name:'成交项目金额'},
        {name:'成交项目总数'},
        {name:'储备项目总数'},
        {name:'储备项目总金额'},
      ],
      typeIndex:0,
      jyfxData:['1月','2月','3月','4月','5月','6月'],
      jyfxData1:[
        {
          dcjxm:'103',
          dcjzje:'123',
          cjxmje:'153',
          cjxmzs:'113',
          cbxmzs:'93',
          cbxmzje:'193',
        },
        {
          dcjxm:'256',
          dcjzje:'223',
          cjxmje:'113',
          cjxmzs:'163',
          cbxmzs:'193',
          cbxmzje:'123',
        },
        {
          dcjxm:'103',
          dcjzje:'123',
          cjxmje:'153',
          cjxmzs:'113',
          cbxmzs:'93',
          cbxmzje:'193',
        },
        {
          dcjxm:'256',
          dcjzje:'223',
          cjxmje:'113',
          cjxmzs:'163',
          cbxmzs:'193',
          cbxmzje:'123',
        },
        {
          dcjxm:'103',
          dcjzje:'123',
          cjxmje:'153',
          cjxmzs:'113',
          cbxmzs:'93',
          cbxmzje:'193',
        },
        {
          dcjxm:'256',
          dcjzje:'223',
          cjxmje:'113',
          cjxmzs:'163',
          cbxmzs:'193',
          cbxmzje:'123',
        },

      ],
      gjjlData:[
        {
          title:'今天拜访了重庆交通局杨科长，洽谈比较愉快，预计下月有项目招标，希望能有机会合作。',
          user:'李婷婷',
          name:'重庆机场集团',
          time:'2023-04-12  14: 00'
        },
        {
          title:'今天拜访了重庆机场集团董事长，下个月招标项目预计1.2个亿。争取能拿到项目。',
          user:'李婷婷',
          name:'重庆机场集团',
          time:'2023-04-12  14: 00'
        },
        {
          title:'5月27日早上劳动局去杨局长说希望我们把项目预算清单做出来看一下。',
          user:'李婷婷',
          name:'重庆机场集团',
          time:'2023-04-12  14: 00'
        },
        {
          title:'拜访了重庆交通局杨科长，洽谈比较愉快，预计下月有项目招标，希望能有机会合作。',
          user:'李婷婷',
          name:'重庆机场集团',
          time:'2023-04-12  14: 00'
        },
        {
          title:'5月27日早上劳动局去杨局长说希望我们把项目预算清单做出来看一下。',
          user:'李婷婷',
          name:'重庆机场集团',
          time:'2023-04-12  14: 00'
        },
        {
          title:'拜访了重庆交通局杨科长，洽谈比较愉快，预计下月有项目招标，希望能有机会合作。',
          user:'李婷婷',
          name:'重庆机场集团',
          time:'2023-04-12  14: 00'
        },
      ],
      pmData:[
        {
          name:'朱博',
          value:334,
          value1:164,
        },
        {
          name:'陈伟',
          value:230,
          value1:130,
        },
        {
          name:'张天翼',
          value:156,
          value1:150,
        },
        {
          name:'李晨旭',
          value:112,
          value1:130,
        },
        {
          name:'徐阳',
          value:110,
          value1:90,
        },
      ],
      rankIconsSize:'24',
      rankIcons:[// 排序图标
        require('@/assets/images/index/1.png'),
        require('@/assets/images/index/2.png'),
        require('@/assets/images/index/3.png'),
        require('@/assets/images/index/4.png'),
        require('@/assets/images/index/5.png'),
      ],
      user:1,
      activeName:'first',
      trendsList:[
        {
          time:'2018-04-03 10:20',
          name:'重庆轨道交通集团有限公司',
          main:'发布招标公告 重庆轨道交通环线鹅公岩轨道专用桥增设防船撞设施项目，项目地区是重庆市-江北区，项目类型为工程建设。'
        },
        {
          time:'2018-04-03 10:20',
          name:'重庆轨道交通集团有限公司',
          main:'发布招标公告 重庆轨道交通环线鹅公岩轨道专用桥增设防船撞设施项目，项目地区是重庆市-江北区，项目类型为工程建设。'
        },
        {
          time:'2018-04-03 10:20',
          name:'重庆轨道交通集团有限公司',
          main:'发布招标公告 重庆轨道交通环线鹅公岩轨道专用桥增设防船撞设施项目，项目地区是重庆市-江北区，项目类型为工程建设。'
        },
        {
          time:'2018-04-03 10:20',
          name:'重庆轨道交通集团有限公司',
          main:'发布招标公告 重庆轨道交通环线鹅公岩轨道专用桥增设防船撞设施项目，项目地区是重庆市-江北区，项目类型为工程建设。'
        },
        {
          time:'2018-04-03 10:20',
          name:'重庆轨道交通集团有限公司',
          main:'发布招标公告 重庆轨道交通环线鹅公岩轨道专用桥增设防船撞设施项目，项目地区是重庆市-江北区，项目类型为工程建设。'
        },
        {
          time:'2018-04-03 10:20',
          name:'重庆轨道交通集团有限公司',
          main:'发布招标公告 重庆轨道交通环线鹅公岩轨道专用桥增设防船撞设施项目，项目地区是重庆市-江北区，项目类型为工程建设。'
        },
        {
          time:'2018-04-03 10:20',
          name:'重庆轨道交通集团有限公司',
          main:'发布招标公告 重庆轨道交通环线鹅公岩轨道专用桥增设防船撞设施项目，项目地区是重庆市-江北区，项目类型为工程建设。'
        },
        {
          time:'2018-04-03 10:20',
          name:'重庆轨道交通集团有限公司',
          main:'发布招标公告 重庆轨道交通环线鹅公岩轨道专用桥增设防船撞设施项目，项目地区是重庆市-江北区，项目类型为工程建设。'
        },
      ],
      area:'西南地区',
      areaList:[
        {
          name:'西南地区'
        },
        {
          name:'华中地区'
        },
        {
          name:'华南地区'
        },
        {
          name:'华东地区'
        },
        {
          name:'华北地区'
        },
        {
          name:'东北地区'
        },
        {
          name:'西北地区'
        },
      ],
      date:'不限',
      dateList:['不限','今日','昨日','近三天','近七天']
  };
  },
  created() {
    if(this.user === 1){
      this.$nextTick(()=>{
        this.initChart()
        this.initChart1()
      })
    }

  },
  methods: {
    handleClick(index){
      this.typeIndex=index;
    },
    initChart() {
      let myChart = echarts.init(document.getElementById("fx-echarts"))
      let option ={
        legend: {
          x:'right',
          padding:[0,120,0,0],
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            label: {
              backgroundColor: '#FFFFFF'
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.jyfxData,
        },
        yAxis: {
          type: 'value',
        },
        grid: {
          top:35,
          left:30,
          right:10,
          bottom:20,
        },
        // dcjxm:'256',
        // dcjzje:'223',
        // cjxmje:'113',
        // cjxmzs:'163',
        // cbxmzs:'193',
        // cbxmzje:'123',
        series: [
          {
            data: this.jyfxData1.map(item => item.dcjxm),
            name:'待成交项目数',
            type: 'line',
            smooth: true,
            emphasis: {
              disabled: true,
              focus: 'none'
            },
            //设置折线颜色和粗细
            lineStyle: {
              width: 2,
              color: "#0CBC6D",
            },
            itemStyle:{
              color: "#0CBC6D",
            },
            //设置面积区域为渐变效果
            areaStyle: {
              opacity:0.8,
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0.2,
                  color: "#EFFAF6",
                },
                {
                  offset: 1,
                  color: "#0CBC6D",
                },
              ]),
            },
          },
          {
            data: this.jyfxData1.map(item => item.dcjzje),
            name:'待成交总金额',
            type: 'line',
            smooth: true,
            emphasis: {
              disabled: true,
              focus: 'none'
            },
            //设置折线颜色和粗细
            lineStyle: {
              width: 2,
              color: "#0081FF",
            },
            itemStyle:{
              color: "#4E8EFF",
            },
            //设置面积区域为渐变效果
            areaStyle: {
              opacity:0.8,
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0.2,
                  color: "#DFEAFF",
                },
                {
                  offset: 1,
                  color: "#5895FF",
                },
              ]),
            },
          },
          {
            data: this.jyfxData1.map(item => item.cjxmje),
            name:'成交项目金额',
            type: 'line',
            smooth: true,
            emphasis: {
              disabled: true,
              focus: 'none'
            },
            //设置折线颜色和粗细
            lineStyle: {
              width: 2,
              color: "#8077F2",
            },
            itemStyle:{
              color: "#8077F2",
            },
            //设置面积区域为渐变效果
            areaStyle: {
              opacity:0.8,
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0.2,
                  color: "#ECE8FF",
                },
                {
                  offset: 1,
                  color: "#BCC0FF",
                },
              ]),
            },
          },
          {
            data: this.jyfxData1.map(item => item.cjxmzs),
            name:'成交项目总数',
            type: 'line',
            smooth: true,
            emphasis: {
              disabled: true,
              focus: 'none'
            },
            //设置折线颜色和粗细
            lineStyle: {
              width: 2,
              color: "#FA6C6C",
            },
            itemStyle:{
              color: "#FA6C6C",
            },
            //设置面积区域为渐变效果
            areaStyle: {
              opacity:0.8,
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0.2,
                  color: "#FDEAE8",
                },
                {
                  offset: 1,
                  color: "#FDB2AE",
                },
              ]),
            },
          },
          {
            data: this.jyfxData1.map(item => item.cbxmzs),
            name:'储备项目总数',
            type: 'line',
            smooth: true,
            emphasis: {
              disabled: true,
              focus: 'none'
            },
            //设置折线颜色和粗细
            lineStyle: {
              width: 2,
              color: "#FA936C",
            },
            itemStyle:{
              color: "#FA936C",
            },
            //设置面积区域为渐变效果
            areaStyle: {
              opacity:0.8,
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0.2,
                  color: "#FCE8E0",
                },
                {
                  offset: 1,
                  color: "#FBC4AF",
                },
              ]),
            },
          },
          {
            data: this.jyfxData1.map(item => item.cbxmzje),
            name:'储备项目总金额',
            type: 'line',
            smooth: true,
            emphasis: {
              disabled: true,
              focus: 'none'
            },
            //设置折线颜色和粗细
            lineStyle: {
              width: 2,
              color: "#FDD85E",
            },
            itemStyle:{
              color: "#FDD85E",
            },
            //设置面积区域为渐变效果
            areaStyle: {
              opacity:0.8,
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0.2,
                  color: "#FCF8EF",
                },
                {
                  offset: 1,
                  color: "#FEEBAA",
                },
              ]),
            },
          },
        ]
      }
      myChart.setOption(option);
    },
    initChart1(){
      var rankPic = [
        require('@/assets/images/index/1.png'),
        require('@/assets/images/index/2.png'),
        require('@/assets/images/index/3.png'),
        require('@/assets/images/index/4.png'),
        require('@/assets/images/index/5.png'),
      ]
      let myChart = echarts.init(document.getElementById("pm-echarts"))

      let option ={
        legend: {
          show: true,
          x:'center',
          y:'bottom',
          padding:[0,0,10,0],
        },
        yAxis: {
          type: 'category',
          inverse: true, // 反向坐标
          data: this.pmData.map(item => item.name),
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisPointer: {
            label: {
              show: true,
              margin: 30
            }
          },
          axisLabel: {
            margin: 80,
            textStyle: {
              align: 'left',
            },
            formatter: function (value,index) {
              let idx=index+1;
              return '{' + idx + '|} {s|' + value + '}'
            },
            rich: {
              1: {
                height: 24,
                width: 24,
                align: 'center',
                backgroundColor: {
                  image: rankPic[0]
                },
              },
              2: {
                height: 24,
                width: 24,
                align: 'center',
                backgroundColor: {
                  image: rankPic[1]
                }
              },
              3: {
                height: 24,
                width: 24,
                align: 'center',
                backgroundColor: {
                  image: rankPic[2]
                }
              },
              4: {
                height: 24,
                width: 24,
                align: 'center',
                backgroundColor: {
                  image: rankPic[3]
                }
              },
              5: {
                height: 24,
                width: 24,
                align: 'center',
                backgroundColor: {
                  image: rankPic[4]
                }
              },
            }
          },
        },
        xAxis: {
          type: 'value',
        },
        grid: {
          left: '16%',
          top: 20,
          right: 20,
          bottom: 60,
        },
        tooltip: {
          show: true,
          backgroundColor: 'rgba(0,0,0,.7)',
          borderWidth: 0,
          textStyle: {
            color: '#fff',
          },
        },
        series: [
          {
            // realtimeSort: true,
            name:'目标产值',
            data: this.pmData.map(item => item.value),
            type: 'bar',
            stack: 'total',
            emphasis: {
              focus: 'series'
            },
            itemStyle:{
              color: '#14C9C9',
            },
            barWidth: 16,
          },
          {
            // realtimeSort: true,
            name:'已完成产值',
            data: this.pmData.map(item => item.value1),
            type: 'bar',
            stack: 'total',
            emphasis: {
              focus: 'series'
            },
            itemStyle:{
              color: '#C3F6F6',
            },
            barWidth: 16,
          },
        ],
      }
      myChart.setOption(option);
    },
    handleClickTab(){

    },
    handleChange(){
      this.user = this.user === 1 ? 2 : 1;
      if(this.user === 1){
        this.$nextTick(()=>{
          this.initChart()
          this.initChart1()
        })
      }
    }
  }
};
</script>

<style scoped lang="scss">
  .app-container{
    padding: 0;
  }
  p{
    padding: 0;
    margin: 0;
  }
  .home {
    ::v-deep .el-row{
      .el-col:nth-child(1){
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
      .el-col:nth-child(2){
        padding-left: 16px !important;
        padding-right: 0 !important;
      }
    }
    .content-left{
      .task-wrap{
        height: 88px;
        background: #FFFFFF;
        border-radius: 4px;
        margin-bottom: 12px;
        display: flex;
        justify-content: space-between;
        .item{
          width: 20%;
          display: flex;
          padding-left: 16px;
          margin-right: 9px;
          margin-top: 14px;
          margin-bottom: 14px;
          border-right: 1px solid #EFEFEF;
          cursor: pointer;
          .left{
            width: 48px;
            height: 48px;
            margin-right: 8px;
          }
          .right{
            .title{
              font-size: 12px;
              color: #3D3D3D;
            }
            .number{
              font-weight: bold;
              color: #3D3D3D;
              font-size: 18px;
              padding: 4px 0;
            }
            .compare{
              color: rgba(35,35,35,0.4);
              font-size: 12px;
              img{
                width: 8px;
                height: 10px;
                margin-left: 4px;
                margin-bottom: -1px;
              }
              .down{
                color:#FF3C3C;
              }
              .up{
                color:#0CBC6D;
              }
            }
          }
        }
        .item:nth-child(4){
          border-right: 0;
        }
        .item:last-child{
          border-right: 0;
        }
        .item:hover{
          .right{
            .title{
              color: #0081FF;
            }
            .number{
              color: #0081FF;
            }
          }
        }
        .add{
          padding-left: 0;
          .yd{
            display: inline-block;
            width: 5px;
            margin-right: 10%;
            i{
              width: 5px;
              height: 5px;
              border-radius: 2px;
              background: #E6E6E9;
              margin-bottom: 6px;
              display: block;
            }
          }
          .btn{
            width: 80%;
            height: 64px;
            background: #FFFFFF;
            border-radius: 4px;
            border: 1px solid #E6E6E9;
            color:#0081FF;
            line-height: 64px;
            font-size: 14px;
            margin-left: 0;
            i{
              margin-right: 4px;
            }
          }
          .btn:hover{
            background: #F6F9FC;
          }
        }
      }
      .content-wrap{
        margin-bottom: 12px;
        height: 460px;
        .select-popper{
          margin-right:0;
        }
        .record{
          height: 460px;
          background: #FFFFFF;
          border-radius: 4px;
          padding: 16px;
          position: relative;
          .list{
            height: 375px;
            overflow: hidden;
            .item{
              border-bottom: 1px solid #EEEEEE;
              padding: 16px 0;
              h3{
                color: #232323;
                font-size: 14px;
                font-weight: 400;
                margin: 0;
              }
              p{
                color: rgba(35,35,35,0.4);
                font-size: 14px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                margin-top: 8px;
                span{
                  margin-right: 15px;
                }
              }
            }
            .item:last-child{
              border-bottom: 0;
            }
          }
          .more{
            text-align: center;
            color: #0081FF;
            font-size: 14px;
            margin-top: 4px;
            cursor: pointer;
            position: absolute;
            bottom:16px;
            left: 50%;
            margin-left: -48px;
          }
        }
        .ranking{
          height: 460px;
          background: #FFFFFF;
          border-radius: 4px;
          padding: 16px;
          .main{
            background: url("../assets/images/index/yjpm_bg.png");
            background-size: 100% 100%;
            height: 399px;
            margin-top: 10px;
          }
          .amount{
            padding: 16px 24px;
            p{
              display: flex;
              justify-content: space-between;
            }
            span{
              font-weight: 400;
              color: #184280;
              font-size: 14px;
            }
            .money{
              font-weight: 700;
              color: #184280;
              font-size: 18px;
              margin-top: 8px;
            }
            ::v-deep .el-progress-bar__outer{
              border: 1px solid #A2E8E8;
              background-color:#ffffff !important;
              border-radius: 2px;
              .el-progress-bar__inner{
                background: linear-gradient(-270deg, #C3F6F6 0%, #14C9C9 100%);
                border-radius:0;
                .el-progress-bar__innerText{
                  color: #ffffff;
                  opacity: 0;
                }
              }
            }

          }
        }
        .select-popper{
          .area{
            font-size: 14px;
            color: #232323;
            cursor: pointer;
            i{
              background: url("../assets/images/index/sjx.png");
              background-size: 100% 100%;
              width: 10px;
              height: 6px;
              display: inline-block;
              margin-bottom: 2px;
              margin-left: 4px;
            }
          }
          .month{
            font-size: 14px;
            color: #232323;
            margin-left: 16px;
            cursor: pointer;
            i{
              background: url("../assets/images/index/sjx.png");
              background-size: 100% 100%;
              width: 10px;
              height: 6px;
              display: inline-block;
              margin-bottom: 2px;
              margin-left: 4px;
            }
          }
          .color{
            color: #0081FF;
            i{
              background: url("../assets/images/index/sjx2.png");
              background-size: 100% 100%;
            }
          }
        }
        .select-popper:hover{
          .area,.month{
            color: #0081FF;
            i{
              background: url("../assets/images/index/sjx1.png");
              background-size: 100% 100%;
            }
          }
        }

      }
      .content-db{
        height: 263px;
        background: #FFFFFF;
        border-radius: 4px;
        margin-bottom: 12px;
        padding: 16px;
        overflow: hidden;
        .query-ability{
          color: #0081FF;
          font-size: 14px;
          cursor: pointer;
          span{
            width: 16px;
            height: 16px;
            background: #FF3C3C;
            display: inline-block;
            color:#ffffff;
            font-size: 12px;
            border-radius: 50%;
            line-height: 16px;
            text-align: center;
            margin-right: 4px;
          }
        }
        .list{
          margin-top: 16px;
        }
        .item{
          min-height: 62px;
          background: #F6F9FD;
          border-radius: 6px;
          margin-bottom: 8px;
          position: relative;
          padding: 10px 16px;
          h3{
            font-weight: 400;
            color: #232323;
            font-size: 14px;
            margin: 0;
            padding-bottom: 6px;
            width: 85%;
          }
          p{
            color: rgba(35,35,35,0.4);
            font-size: 14px;
            span{
              margin-right: 24px;
            }
          }
          .btn{
            position: absolute;
            right: 50px;
            top:22px;
            color: #0CBC6D;
            font-size: 12px;
          }
        }
      }
      .analysis{
        height: 242px;
        background: #FFFFFF;
        border-radius: 4px;
        padding: 16px;
        position: relative;
        .tabs{
          .label{
            display: inline-block;
            padding: 0 14px;
            height: 22px;
            color: rgba(35,35,35,0.8);
            font-size: 12px;
            line-height: 22px;
            border-top: 1px solid #EFEFEF;
            border-bottom: 1px solid #EFEFEF;
            border-left: 1px solid #EFEFEF;
            cursor: pointer;
          }
          .label:first-child{
            border-radius: 2px 0px 0px 2px;
          }
          .label:last-child{
            border-radius: 0px 2px 2px 0px;
            border-right: 1px solid #EFEFEF;
          }
          .color{
            background: #0081FF;
            color: #FFFFFF;
          }
        }
        .select-popper{
          position: absolute;
          right: 0;
          top: 27px;
          z-index: 99;
          .area{
            font-size: 14px;
            color: #232323;
            margin-left: 16px;
            cursor: pointer;
            i{
              background: url("../assets/images/index/sjx.png");
              background-size: 100% 100%;
              width: 10px;
              height: 6px;
              display: inline-block;
              margin-bottom: 2px;
              margin-left: 4px;
            }
          }
        }
        .select-popper:hover{
          .area,.month{
            color: #0081FF;
            i{
              background: url("../assets/images/index/sjx1.png");
              background-size: 100% 100%;
            }
          }
        }
      }
      .trends{
        background: #FFFFFF;
        border-radius: 4px;
        padding: 16px;
        height: 440px;
        overflow: hidden;
        position: relative;
        ::v-deep .el-tabs__header{
          margin: 0 0 18px;
        }
        ::v-deep .el-tabs__content{
          overflow-y: auto;
          height: 368px;
        }
        ::v-deep .el-timeline{
          .el-timeline-item{
            padding-bottom: 18px;
          }
          .el-timeline-item__tail{
            left: 7px;
            border-left: 2px dotted rgba(0,129,255,0.5);
          }
          .el-timeline-item__node{
            background-color:#ffffff;
            .el-timeline-item__icon{
              color:#0081FF;
              font-size: 14px;
            }
          }
          .el-timeline-item__node--normal{
            left: 0px;
            width: 16px;
            height: 16px;
          }
        }
        .time{
          font-size: 14px;
          color: rgba(35,35,35,0.8);
          .company{
            color: #0081FF;
            margin-left: 16px;
          }
        }
        .cont{
          background: #F6F9FD;
          border-radius: 6px;
          padding: 16px;
          margin-top: 8px;
          font-size: 14px;
          color: rgba(35,35,35,0.8);
          margin-right: 16px;
        }
        .check{
          height: 60px;
          background: linear-gradient(360deg, #FFFFFF 0%, #FFFFFF 17%, rgba(255,255,255,0.6) 100%);
          font-size: 16px;
          color: #0CBC6D;
          line-height: 60px;
          text-align: center;
          width: 100%;
          position: absolute;
          bottom: 46px;
          cursor: pointer;
        }

      }
    }
    .content-right{
      .user{
        height: 88px;
        border-radius: 4px;
        margin-bottom: 12px;
        background-image: url("../assets/images/index/user_bg.png");
        background-size: cover;
        padding-left: 24px;
        h3{
          font-weight: 700;
          color: #1C1C28;
          font-size: 18px;
          padding-top: 16px;
          padding-bottom: 8px;
          margin: 0px;
          span{
            height: 20px;
            background: #FFF2E2;
            display: inline-block;
            border-radius: 11px;
            border: 1px solid #FFB010;
            color: #FFB010;
            font-size: 12px;
            line-height: 20px;
            padding: 0 10px;
            margin-left: 12px;
            font-weight: 400;
          }
        }
        p{
          color: #666666;
          font-size: 16px;
        }
      }
      .search{
        height: 322px;
        background: #FFFFFF;
        border-radius: 4px;
        margin-bottom: 12px;
        padding: 16px;
        ::v-deep .el-input{
          height: 32px;
          border-radius: 2px;
          margin-bottom: 20px;
          margin-top: 14px;
          .el-input__inner{
            height: 32px;
            line-height: 32px;
            background: #F3F3F4;
            padding-left: 37px;
          }
          .el-icon-search{
            font-size: 16px;
            line-height: 32px;
            color:#0081FF;
            margin-left: 10px;
            margin-right: 10px;
          }
        }
        .list{
          display: flex;
          justify-content: space-between;
          .item{
            margin: 0 auto;
            width: 33.3%;
            height: 94px;
            text-align: center;
            cursor: pointer;
            img{
              width: 40px;
              height: 40px;
              margin-top: 16px;
            }
            p{
              color: #3D3D3D;
              font-size: 12px;
            }
          }
          .item:hover{
            background: #F6F9FC;
          }
        }
      }
      .zbgg{
        height: 382px;
        background: #FFFFFF;
        border-radius: 4px;
        padding: 16px;
        .list{
          margin-top: 16px;
        }
        .item{
          border-bottom: 1px solid #EEEEEE;
          padding: 10px 0;
          h3{
            font-weight: 400;
            color: rgba(35,35,35,0.8);
            font-size: 14px;
            padding-bottom: 8px;
            margin: 0;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          p{
            color: rgba(35,35,35,0.4);
            font-size: 14px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            span{
              margin-right: 15px;
            }
          }
        }
        .item:last-child{
          border-bottom: 0;
        }
      }
      .zbhxr{
        height: 382px;
        background: #FFFFFF;
        border-radius: 4px;
        padding: 16px;
        .list{
          margin-top: 16px;
        }
        .item{
          border-bottom: 1px solid #EEEEEE;
          padding: 10px 0;
          h3{
            font-weight: 400;
            color: rgba(35,35,35,0.8);
            font-size: 14px;
            padding-bottom: 8px;
            margin: 0;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          p{
            color: rgba(35,35,35,0.4);
            font-size: 14px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            span{
              margin-right: 15px;
            }
          }
        }
        .item:last-child{
          border-bottom: 0;
        }
      }
    }
  }
</style>

