<template>
  <div class="chart-container">
    <el-row class="heard">
      <div class="heardLeft">
        <div class="messageWork">
            <div style="height:30px;line-height:30px">
              工作台
            </div>
            <div style="padding-left:5px">
              <div class="messageBoxChild" style="float:left" v-for="item in workbenchData" :key="item.name">
                <i class="el-icon-plus"></i> <span>{{ item.name }}</span>
              </div>
            </div>
        </div>
      </div>
      <div style="width:650px;float:right">
        <div class="messageNotice">
          <div style="height:30px;line-height:30px">
            公告展示({{ messageNoticeNum }})
            <span style="float:right;color:#999999" @click="noticeMoreFn()">更多>></span>
          </div>
          <div style="height:100px;" class="marquee-wrap" v-if="messageNoticeData">
            <p v-for="item in messageNoticeData" :key="item.title" @click="noticeDetailFn(item)" style="height:33px;line-height:33px;margin:0" class="marquee-list" :class="{ 'animate-up': animateUp }">
              <span v-if="!item.readStatus" class="unread">未读</span>
              <span v-if="item.readStatus" class="read">已读</span>
              <span v-if="item.title.length>27">{{ item.title.slice(0,27) }}...</span>
              <span v-if="item.title.length<28">{{ item.title }}</span>
              <span style="float:right">{{dateFormat(item.publishTime)}}</span>
            </p>
          </div>
        </div>
      </div>
    </el-row>
    <el-row class="neck">
      <div style="padding-left:10px;line-height:50px">
        <p style="display:inline-block;margin:0">您上月活跃度库内排名第2名       全省排名 232名       得分98.2分       工作按时完成：12项      有1项逾期待办任务 </p>
        <span style="float:right;color:#999999">查看全库活跃度排名>></span>
      </div>
    </el-row>
    <el-row class="bodyContent">
      <el-row class="bodyContentTop">
        <p>企业概览</p>
      </el-row>
      <el-row class="bodyContentMiddle">
        <div style="float:left;position:relative">
          <img src="./map.jpg" alt="" width="1015px" height="570px" usemap="#Map">
          <map name="Map" style="background:red">
            <span v-for="item in bodyContentMiddleMapData" :key="item.code">
              <area shape="circle" :coords="item.coordinate" @click="areaClick(item.code)" color='red'>
              <img src="./u929.png" v-if="item.iconCode == '0'" height="20" width="20" alt="" :style="{position:'absolute',top:(Number(item.y) + 8) + 'px',left:(Number(item.x) + 8) + 'px'}">
              <img src="./u925.png" v-if="item.iconCode == '1'" height="20" width="20" alt="" :style="{position:'absolute',top:(Number(item.y) + 8) + 'px',left:(Number(item.x) + 8) + 'px'}">
              <div v-if="item.iconCode == '0'" :style="{position:'absolute',width:'31px',height:'31px',backgroundColor:'red',borderRadius:'50%',opacity:0.4,top:item.y-16+ 'px',left:item.x-16+ 'px'}"></div>
              <div v-if="item.iconCode == '1'" :style="{position:'absolute',width:'31px',height:'31px',backgroundColor:'yellow',borderRadius:'50%',opacity:0.4,top:item.y-16+ 'px',left:item.x-16+ 'px'}"></div>
            </span>
          </map>
        </div>
        <div style="float:right" class="bodyContentMiddleText">
          <p>山西中储粮龙海仓储有限责任公司</p>
          <p style="text-indent:2em;">
            山西中储粮龙海仓储有限责任公司,2003年塘沽区政府划拨土地122000平方米，投资8000余万元兴建的。 库区傍京山铁路并与城市公路相连，距天津港5公里，天津经济技术开发区2公里，天津滨海国际机场25公里。 企业为全民所有制，法人代表：刘学军，经营范围：粮食收购、储存、销售、调销、装卸搬倒服务、劳务服务、房屋租赁，注册资金1119.9万元。承担国家临储粮、市级储备粮、区级储备粮三级储备粮，对各级储备粮的总量、质量和储存安全负总责，确保储备粮应急调的动、用得上。 储备库现已建有仓房23栋，其中高大平房仓18栋，钢结构彩板保温仓5栋，有效仓容12.7140万吨，目前现存国家临储粮、市级储备粮、区级储备粮三级储备粮共计92217吨。其中，市级储备粮68994吨，存储在15幢仓房中，区级储备粮20458吨（国产硬质白小麦），临储粮2765吨（美红软）。 储备库下两科，钢结构彩板保温仓5栋，有效仓容12.7140万吨，目前现存国家临储粮、市级储备粮、区级储备粮三级储备粮共计92217吨。其中，市级储备粮68994吨，存储在15幢仓房中，，钢结构彩板保温仓5栋，有效仓容12.7140万吨，目前现存国家临储粮、市级储备粮、区级储备粮三级储备粮共计92217吨。其中，市级储备粮6899平房仓18栋，钢结构彩板保温仓5栋，有效仓容12.7140万吨，目前现存国家临储粮、市级储备粮、区级储备粮三级储备粮共计92217吨。其中，市级储备粮68994吨，存储在15幢仓房中，区级储备粮20458吨（国产硬质白小麦），临储粮2765吨（美红软）。 储备库下两科，钢结构彩板保温仓5栋，有效仓容12.7140万吨，目前现存国家临储粮、市级储备粮、区级储备粮三级储备粮共计92217吨。其中，市级储备粮68994吨，存储在15幢仓房中，，钢结构彩板保温仓5栋，有效仓容12.7140万吨，目前现存国家临储粮、市级储备粮、区级储备粮三级储备粮共计92217吨。其中，市级储备粮68994吨，存储在15幢仓房中，一室（综合办公室、储运科、安保科），现有在岗职工39人，其中：党员13人，大专以上学历15人，粮食高级保管员2人，高级化验员1人，全部取得国家粮食局颁发的专业技术资格证书。 库内有各类仓储设备188台（套），包括输送、清理、机械通、机械通风
          </p>
        </div>
      </el-row>
      <el-row class="bodyContentFooter">
        <div class="bodyContentFooterOne">
          <div style="height:50px;line-height:50px">
            <p style="margin:0">企业文化</p>
          </div>
          <el-carousel :interval="5000" arrow="always" height="200px" indicator-position="none">
            <el-carousel-item v-for="item in bodyContentFooterOneData" :key="item.imgSrc">
              <img :src="item.imgSrc" alt="" height="200px" width="500px">
              <div class="footerText">
                <span>{{ item.title }}</span>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="bodyContentFooterTTF">
          <div class="bodyContentFooterTwo">
            <div style="height:50px;line-height:50px">
              <p style="margin:0">储存状态</p>
            </div>
            <div id="echartTwo" :style="{width: '100%', height: '200px'}" />
          </div>
          <div class="bodyContentFooterThree">
            <div style="height:50px;line-height:50px">
              <p style="margin:0">粮食种类</p>
            </div>
            <div id="echartThree" :style="{width: '100%', height: '200px'}" />
          </div>
          <div class="bodyContentFooterFour">
            <div style="height:50px;line-height:50px">
              <p style="margin:0">仓房状况</p>
            </div>
            <div id="echartFour" :style="{width: '100%', height: '200px'}" />
          </div>
        </div>
      </el-row>
    </el-row>
  </div>
</template>
<script>
import { noticeList,noticeDetail } from '@/api/home'
import echarts from 'echarts'
export default {
  name: 'Home',
  data() {
    return {
      workbenchData: [
        {
          name: '新增通风记录'
        }, {
          name: '新增熏蒸记录'
        }, {
          name: '新增仓房设施记录'
        }, {
          name: '新增每周保管员检查记录'
        }, {
          name: '新增机械通风记录'
        }, {
          name: '新增仓房信息'
        }
      ],
      messageNoticeData: [],
      messageNoticeNum: 0,
      bodyContentMiddleMapData: [
        {
          coordinate: '526,448,20',
          x:'526',
          y:'448',
          r:'20',
          iconCode:'0',
          code: '1'
        },
        {
          coordinate: '566,424,20',
          x:'566',
          y:'424',
          r:'20',
          iconCode:'1',
          code: '2'
        },
        // {
        //   coordinate: '508,118,20',
        //   x:'508',
        //   y:'118',
        //   r:'20',
        //   iconCode:'1',
        //   code: '2'
        // }
      ],
      bodyContentFooterOneData: [
        {
          imgSrc: 'http://picture.youth.cn/qtdb/202012/W020201205337465221885.jpg',
          title: '标题1'
        },
        {
          imgSrc: 'http://picture.youth.cn/qtdb/202012/W020201205337465202376.jpg',
          title: '标题2'
        },
        {
          imgSrc: 'http://picture.youth.cn/qtdb/202012/W020201205337465157090.jpg',
          title: '标题3'
        }
      ],
      animateUp: false,
      timer: null
    }
  },
  mounted() {
    this.getNoticeList()
    if(this.messageNoticeData.length>3){
      this.timer = setInterval(this.scrollAnimate, 2000)
    }
    this.initChartA('echartTwo')
    this.initChartB('echartThree')
    this.initChartC('echartFour')
  },
  destroyed() {
    clearInterval(this.timer)
  },
  methods: {
    getNoticeList() {
      let data = {
        pageIndex:'1',
        pageSize:'5'
      }
      noticeList(data).then(res => {
        this.messageNoticeData = res.data.records
        this.messageNoticeNum = 0
        res.data.records.forEach(item => {
          if(!item.readStatus){
            this.messageNoticeNum = this.messageNoticeNum + 1
          }
        })
      })
    },
    scrollAnimate() {
      this.animateUp = true
      setTimeout(() => {
        this.messageNoticeData.push(this.messageNoticeData[0])
        this.messageNoticeData.shift()
        this.animateUp = false
      }, 500)
    },
    areaClick(code) {
     
    },
    initChartA(id) {
      const chart = echarts.init(document.getElementById(id))
      chart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'horizontal',
          left: '25%',
          bottom: '1%',
          data: ['半仓', '满仓', '空仓']
        },
        series: [
          {
            name: '储存状态',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 335, name: '半仓' },
              { value: 310, name: '满仓' },
              { value: 234, name: '空仓' }
            ]
          }
        ]
      })
    },
    initChartB(id) {
      const chart = echarts.init(document.getElementById(id))
      chart.setOption({
        xAxis: {
          type: 'category',
          data: ['玉米', '稻谷', '小麦', '大豆', '高粱', '花生', '土豆']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
          }
        }]
      })
    },
    initChartC(id) {
      const chart = echarts.init(document.getElementById(id))
      chart.setOption({
        // title: {
        //     text: '',
        //     subtext: '',
        //     left: 'center'
        // },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
          {
            name: '仓房状况',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              { value: 335, name: '通风' },
              { value: 310, name: '熏蒸' },
              { value: 234, name: '出库' },
              { value: 135, name: '入库' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    },
    noticeMoreFn() {
      this.$router.push({ path: '/notice' })
    },
    noticeDetailFn(data) {
      this.$router.push({ path: '/notice/noticeDetail',query: {id: data.id} })
    },
    dateFormat(timedate) {
      if (timedate === null || timedate === undefined) {
        return ''
      } else {
        let arr
        // 首先对日期进行拆解，获得日期字符串
        if (timedate.indexOf('T') > -1) {
          arr = timedate.split('T')
        } else {
          arr = timedate.split(' ')
        }
        var d = arr[0]
        var darr = d.split('-')
        var t = arr[1]
        var tarr = t.split('.000')
        var marr = tarr[0].split(':')
        var dd = parseInt(darr[0]) + '/' + parseInt(darr[1]) + '/' + parseInt(darr[2]) + ' ' + parseInt(marr[0]) + ':' + parseInt(marr[1]) + ':' + parseInt(marr[2])

        const date = new Date(Date.parse(dd))
        date.setTime(date.setHours(date.getHours() + 8))

        var year = date.getFullYear()
        /* 在日期格式中，月份是从0开始的，因此要加0
        * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
        * */
        var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
        var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
        var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
        var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
        var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
        // 拼接
        return (year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds)
        // return (year + '-' + month + '-' + day)
      }
    }
  }

}
</script>
<style scoped>
.chart-container{
  position: relative;
  width: 100%;
  /* height: calc(100vh - 84px); */
  /* overflow-y: scroll; */
  height: 1090px;
}

.heard {
    height: 130px;
    border-bottom: 1px solid #d8dce5;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
}
.heardLeft {
    float:left;
    width: calc(100% - 650px);
    margin:0 auto;
    padding: 0 10px;
}
.neck {
    height: 50px;
    border-bottom: 1px solid #d8dce5;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
}
.bodyContent {
    height: 890px;
    margin-bottom:50px
}
.bodyContentTop {
    height: 50px;
    padding-left: 10px;
    border-bottom: 1px solid #d8dce5;
}
.bodyContentMiddle {
    height: 590px;
    padding: 10px;
    border-bottom: 1px solid #d8dce5;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
}
.bodyContentMiddleText {
    width: calc(100% - 1025px);
    height: 570px;
    max-height: 570px;
    padding: 10px;
    overflow-y: auto;
    background-color: rgba(242, 242, 242, 1);
}
.bodyContentFooter {
    height: 250px;
    padding:0 10px
}
.bodyContentFooterOne {
    width: 500px;
    float:left
}
.footText {
    width:500px;
    height:30px;
    line-height:30px;
    position:absolute;
    bottom:0;
    background-color:rgba(242, 242, 242, 0.5)
}
.bodyContentFooterTTF {
    float:left;
    width: calc(100% - 500px);
    height: 250px;
}
.bodyContentFooterTwo {
    width: 30%;
    height: 250px;
    padding-left:10px;
    float:left
}
.bodyContentFooterThree {
    width: 40%;
    height: 250px;
    float:left
}
.bodyContentFooterFour {
    width: 30%;
    height: 250px;
    float:left
}
.messageBox {
    border:1px solid #cccccc;
    width: 170px;
    height:80px;
    margin-top:25px;
    float: left;
    background-color:#cccccc
}


.messageBox:hover{
    cursor:pointer
}
p:hover{
    cursor:pointer
}

.messageWork {
    height:80px;
}
.messageBoxChild {
    height:40px;
    line-height: 30px;
    padding: 5px 10px;
    border-radius:5px;
    border:1px solid #cccccc;
    margin:3px 15px 5px 0;
}
.messageNotice {
    height:130px;
}
.messageNotice span:hover{
    cursor:pointer
} 
.unread {
    display: inline-block;
    width:40px;
    height:25px;
    line-height:25px;
    text-align: center;
    background-color: #cccccc;
    border-radius: 5px;
    margin-right: 5px
}
.read {
    display: inline-block;
    width:40px;
    height:20px;
    line-height:20px;
    text-align: center;
    background-color: #008000;
    border-radius: 5px;
    margin-right: 5px
}
</style>

<style lang="scss" scoped>
.marquee-wrap {
  width: 650px;
  height: 100px;
  overflow: hidden;
  .marquee-list {
    p {
      width: 100%;
      height: 100%;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      list-style: none;
      text-align: center;
    }
  }
  .animate-up {
    transition: all 0.5s ease-in-out;
    transform: translateY(-33px);
  }
}
</style>
