<template>
  <div class="index" style="height: calc(100vh - 200px);overflow-x: hidden;overflow-y: auto;">
    <div class="index_top">

      <div style="flex: 1;">
        <span class="index_top_text" @click="show">数据总览</span>
        <el-date-picker v-model="params.date" type="date" clearable value-format="yyyy-MM-dd" placeholder="选择日期">
        </el-date-picker>
      </div>

      <!-- <div class="index_top_right">{{ info.notice }}</div> -->

    </div>
    <div class="index_bottom">
      <div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;">
        <div style="display: flex;flex-direction: row; justify-content: space-between; align-items: center;">
          <span style="font-weight: 600;">员工变动</span>
          <span style="color: #4386FF; font-size: 13px;  text-decoration: underline;">查看更多</span>
        </div>

        <div style="margin-top: 20px;" v-for="(item, index) in newMessageList" :key="index">
          <div
            style="display: flex;flex-direction: row; justify-content: space-between; align-items: center; padding-top: 20px;"
            @click="companyInfo(item.sid)">
            <span
              style="font-size: 16px;color: #444;overflow: hidden;margin-right:20px;flex: 1;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1 ;-webkit-box-orient: vertical;">{{
                item.name }}</span>
            <span style="font-size: 13px;color: #999;">{{ item.date }}</span>
          </div>
        </div>

      </div>

      <div style="flex: 0.1;"></div>

      <div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;">
        <div style="display: flex;flex-direction: row; justify-content: space-between; align-items: center;">
          <span style="font-weight: 600;">岗位调整</span>
          <span style="color: #4386FF; font-size: 13px;  text-decoration: underline;">查看更多</span>
        </div>

        <div style="margin-top: 20px;" v-for="(item, index) in larmCenterList" :key="index">
          <div
            style="display: flex;flex-direction: row; justify-content: space-between; align-items: center; padding-top: 20px;"
            @click="companyInfo(item.sid)">
            <span style="font-size: 16px;color: #444;overflow: hidden;margin-right:20px;flex: 1;
               text-overflow: ellipsis;
               display: -webkit-box;
               -webkit-line-clamp: 1 ;
               -webkit-box-orient: vertical;">{{ item.name }}</span>
            <span style="font-size: 13px;color: #999;">{{ item.date }}</span>
          </div>
        </div>

      </div>
    </div>

    <div class="index_content">

      <div class="index_content_bottom">

        <div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;">
          <span style="font-weight: 600;">银行数量统计</span>
          <div id="main1" ref="main1" class="middle">
          </div>
        </div>

        <div style="flex: 0.1;"></div>

        <div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;">
          <span style="font-weight: 600;">岗位员工占比</span>
          <div id="main2" ref="main2" class="middle">
          </div>
        </div>

      </div>

    </div>



  </div>
</template>

</div>
<script>
import * as echarts from 'echarts';
import {
  login1
} from '@/api/system/user/login.js'
export default {
  name: '',
  data() {
    return {
      token: '',
      params: {
        date: null
      },
      info: {
        date: "",
        notice: "通知：请于2023年3月3日16点向***3189帐户回款1231234元。[点击回款]"
      },
      newMessageList: [{
        sid: "1",
        name: "[员工变动]2023年6月12日收到人事通知，对 聂风 进行转正",
        date: "2023-06-12"

      }, {
        sid: "2",
        name: "[员工变动]2023年6月12日收到人事通知，对 冷拧 进行转正",
        date: "2023-06-12"

      }, {
        sid: "3",
        name: "[员工变动]2023年6月12日收到人事通知，对 冷枫 进行转正",
        date: "2023-06-12"

      }, {
        sid: "4",
        name: "[员工变动]2023年6月12日收到人事通知，对 邹好好 进行转正",
        date: "2023-06-12"

      }],
      larmCenterList: [{
        sid: "1",
        name: "[岗位调整]由2023年6月12号起，  聂风 由原岗位调动至采购部岗位工作",
        date: "2023-06-12"

      }, {
        sid: "2",
        name: "[岗位调整]由2023年6月12号起，  冷拧 由原岗位调动至采购部岗位工作",
        date: "2023-06-12"

      }, {
        sid: "3",
        name: "[岗位调整]由2023年6月12号起，  冷枫 由原岗位调动至采购部岗位工作",
        date: "2023-06-12"

      }, {
        sid: "4",
        name: "[岗位调整]由2023年6月12号起，  邹好好 由原岗位调动至采购部岗位工作",
        date: "2023-06-12"
      }

      ]
    }
  },
  mounted() {
    this.drawLine1();
    this.drawLine2();
  },

  methods: {
    show() {
      this.drawLine1();
      this.drawLine2();
    },
    drawLine1() {

      // let mychart = echarts.init(this.$refs.main1)
      var myChart = echarts.init(document.getElementById('main1'));
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: {
              // 数据视图
              show: false,
              readOnly: false
            },
            magicType: {
              // 切换图形
              show: false,
              type: ['line', 'bar']
            },
            // 还原
            restore: {
              show: false
            },
            // 下载
            saveAsImage: {
              show: false
            }

          }
        },
        grid: {
          height: 220
        },
        legend: {
          data: ['银行数量']
        },
        xAxis: [{
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
          axisPointer: {
            type: 'shadow'
          }
        }],
        yAxis: [{
          type: 'value',
          name: '个数/个',
          min: 0,
          max: 100,
          axisLabel: {
            formatter: '{value}'
          }
        }
        ],
        series: [{
          name: '银行数量',
          type: 'bar',
          tooltip: {
            valueFormatter: function (value) {
              return value + ' 个';
            }
          },
          data: [
            20,20,20,20,60,70,90
          ]
        }
        ]
      });
    },

    // 饼状图图初始化
    drawLine2() {
      // 基于准备好的dom，初始化echarts实例
      // let mychart =  echarts.init(this.$refs.main2)
      var myChart = echarts.init(document.getElementById('main2'));
      // 绘制图表
      // console.log('option', obj)
      myChart.setOption({
        legend: {
          top: 'bottom'
        },
        toolbox: {
          show: true,
          feature: {
            mark: {
              show: true
            },
            // 数据图标
            dataView: {
              show: false,
              readOnly: false
            },
            // 刷新图标
            restore: {
              show: false
            },
            // 下载图标
            saveAsImage: {
              show: false
            }
          }
        },
        tooltip: {
          show: true,
          trigger: "item"
        },
        series: [{
          name: '岗位占比',
          type: 'pie',
          radius: [20, 100],
          center: ['50%', '40%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 8
          },
          data: [{
            "value": 20,
            "name": "采购部"
          },
          {
            "value": 15,
            "name": "销售部"
          },
          {
            "value": 30,
            "name": "开发部"
          },
          {
            "value": 20,
            "name": "运维部"
          }
          ]
        }]
      })
    },

    //  	getToken(){
    //  		let params = {
    //  			password: "329653",
    //					roleSid: "",
    //					token: "",
    //					userName: "15097329653",
    //					verifyCode: ""
    //  		}
    //  		login1(params).then(res => {
    //  			this.token = res.data.token
    //  			window.sessionStorage.setItem('token', res.data.token)
    //        })
    //  	}
  }
}
</script>

<style lang="scss" scoped>
.imgDemo {
  width: 100%;
  height: 100%;
  background: radial-gradient(#fff, #f5f7f4, #fff);
}

.middle {
  justify-content: center;
  width: 100%;
  height: 300px;

}

.index {
  padding: 40px 80px;
  background: #FFFFFF;

  .index_top {

    display: flex;
    flex-direction: row;
    align-items: center;

    .index_top_text {
      font-size: 25px;
      font-weight: bold;
      color: #000;
      margin-right: 20px;
    }

    .index_top_right {
      font-size: 14px;
      font-weight: bold;
      color: #FF5046;
    }
  }

  .index_content {
    display: flex;
    flex-direction: column;
    margin-top: 30px;

    .index_content_top {
      display: flex;
      flex-direction: row;
    }

    .index_content_bottom {
      display: flex;
      flex-direction: row;
      margin-top: 30px;
    }

    .item_border {
      border-radius: 10px;
      border: 1px solid #cddbf7;
    }
  }

  .index_bottom {
    margin-top: 20px;
    display: flex;

    .item_border {
      border-radius: 10px;
      border: 1px solid #cddbf7;
    }
  }
}

canvas {}
</style>
