<template>
  <basic-container>
    <el-row :gutter=24>
      <el-row :gutter=24 v-if="this.permission.departmentSearch" >
        <el-form ref="form" :model="form" label-width="80px">
          <!-- <el-col :span="6">
            <el-form-item label="日期">
              <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期" style="width:100%">
              </el-date-picker>
            </el-form-item>
          </el-col> -->
          <el-col :span="6">
            <el-form-item label="部门">
              <el-select v-model="value" placeholder="请选择部门" style="width:100%">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" @click="onSubmit">搜索</el-button>
            <el-button @click="onSubmit">重置</el-button>
          </el-col>
        </el-form>
      </el-row>
      <el-col :span="12">
        <div class="title">物资申请类别
        </div>
        <div id="echarts1" style="width: 100%;  height:400px"></div>
      </el-col>
      <el-col :span="12">
        <div class="title">物资申请价值
        </div>
        <div id="echarts2" style="width: 100%;  height:400px"></div>
      </el-col>
      <el-col :span="12">
        <div class="title">物资库存
        </div>
        <div id="echarts3" style="width: 100%;  height:400px"></div>
      </el-col>
      <el-col :span="12">
        <div class="title">消耗品价值分析
          <el-select v-model="value2" placeholder="请选择" style="float:right" @change="changeSelect()">
            <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div id="echarts4" style="width: 100%;  height:400px"></div>
      </el-col>
    </el-row>
  </basic-container>
</template>
<script>
import * as echarts from "echarts";
import {mapGetters} from "vuex";
export default {
  computed: {
    ...mapGetters(["userInfo", "permission"]),
  },
  data() {
    return {
      options: [{
        value: '部门一',
        label: '部门一'
      }, {
        value: '部门二',
        label: '部门二'
      }, {
        value: '部门三',
        label: '部门三'
      }, {
        value: '部门四',
        label: '部门四'
      }, {
        value: '部门五',
        label: '部门五'
      }],
      value: '',
      options2: [{
        value: '年度',
        label: '年度'
      }, {
        value: '季度',
        label: '季度'
      }, {
        value: '月份',
        label: '月份'
      }],
      value2: '年度'
    }
  },
  mounted() {
    this.initEcharts1()
    this.initEcharts2()
    this.initEcharts3()
    this.initEcharts4(["2022年", "2023年", "2024年", "2025年"], [23, 78, 87, 90])
  },
  methods: {
    initEcharts1() {
      var myChart = echarts.init(document.getElementById("echarts1"));
      // 指定图表的配置项和数据
      var option = {

        title: {
          text: '',
          x: 'center'
        },
        backgroundColor: '#fff',
        tooltip: {
          trigger: 'item',
        },
        xAxis: {
          data: ["全部", "易耗品", "耐用品"],
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#888'
            },
            margin: 20, //刻度标签与轴线之间的距离。
          },

        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              color: '#eee',
              type: 'solid'
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#888'
            },
          }
        },
        series: [
          {//三个最低下的圆片
            "name": "",
            "type": "pictorialBar",
            "symbolSize": [100, 30],
            "symbolOffset": [0, 18],
            "z": 12,
            "data": [{
              "name": "",
              "value": "100",
              "itemStyle": {
                "normal": {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: "rgba(89,211,255,1)"
                  },
                  {
                    offset: 1,
                    color: "rgba(23,237,194,1)"
                  }
                  ])
                }
              }
            }, {
              "name": "",
              "value": "101",
              "itemStyle": {
                "normal": {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: "rgba(89,211,255,1)"
                  },
                  {
                    offset: 1,
                    color: "rgba(23,237,194,1)"
                  }
                  ])
                }
              }
            }, {
              "name": "",
              "value": "81",
              "itemStyle": {
                "normal": {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: "rgba(89,211,255,1)"
                  },
                  {
                    offset: 1,
                    color: "rgba(23,237,194,1)"
                  }
                  ])
                }
              }
            }]
          },


          //下半截柱状图
          {
            name: '2020',
            type: 'bar',
            barWidth: 100,
            barGap: '-100%',
            itemStyle: {//lenged文本
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: "rgba(55,255,249,1)"
              },
              {
                offset: 1,
                color: "rgba(0,222,215,0.2)"
              }
              ])
            },

            data: [{
              "name": "",
              "value": "100",
              "itemStyle": {
                "normal": {
                  "color": {
                    "x": 0,
                    "y": 0,
                    "x2": 0,
                    "y2": 1,
                    "type": "linear",
                    "global": false,
                    "colorStops": [{//第一节下面
                      "offset": 0,
                      "color": "rgba(0,255,245,0.5)"
                    }, {
                      "offset": 1,
                      "color": "#43bafe"
                    }]
                  }
                }
              }
            }, {
              "name": "",
              "value": "101",
              "itemStyle": {
                "normal": {
                  "color": {
                    "x": 0,
                    "y": 0,
                    "x2": 0,
                    "y2": 1,
                    "type": "linear",
                    "global": false,
                    "colorStops": [{//第二个柱状图下面
                      "offset": 0,
                      "color": "rgba(0,255,245,0.5)"
                    }, {
                      "offset": 1,
                      "color": "#43bafe"
                    }]
                  }
                }
              }
            }, {
              "name": "",
              "value": "81",
              "itemStyle": {
                "normal": {
                  "color": {
                    "x": 0,
                    "y": 0,
                    "x2": 0,
                    "y2": 1,
                    "type": "linear",
                    "global": false,
                    "colorStops": [{//第三个柱状图下半截
                      "offset": 0,
                      "color": "rgba(0,255,245,0.5)"
                    }, {
                      "offset": 1,
                      "color": "#43bafe"
                    }]
                  }
                }
              }
            }]
          },

          { // 替代柱状图 默认不显示颜色，是最下方柱图（邮件营销）的value值 - 20
            type: 'bar',
            barWidth: 100,
            barGap: '-100%',
            stack: '广告',
            itemStyle: {
              color: 'transparent'
            },
            data: [100, 102, 81]
          },

          {
            "name": "", //头部
            "type": "pictorialBar",
            "symbolSize": [100, 45],
            "symbolOffset": [0, -20],
            "z": 12,
            "data": [{
              "name": "",
              "value": "320",
              "symbolPosition": "end",
              "itemStyle": {
                "normal": {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                    [{
                      offset: 0,
                      color: "rgba(54,127,223,1)"
                    },
                    {
                      offset: 1,
                      color: "rgba(94,162,254,1)"
                    }
                    ],
                    false
                  ),
                }
              }
            }, {
              "name": "",
              "value": "283",
              "symbolPosition": "end",
              "itemStyle": {
                "normal": {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                    [{
                      offset: 0,
                      color: "rgba(54,127,223,1)"
                    },
                    {
                      offset: 1,
                      color: "rgba(94,162,254,1)"
                    }
                    ],
                    false
                  ),
                }
              }
            }, {
              "name": "",
              "value": "272",
              "symbolPosition": "end",
              "itemStyle": {
                "normal": {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                    [{
                      offset: 0,
                      color: "rgba(54,127,223,1)"
                    },
                    {
                      offset: 1,
                      color: "rgba(94,162,254,1)"
                    }
                    ],
                    false
                  ),
                }
              }
            }]
          },

          {
            "name": "",
            "type": "pictorialBar",
            "symbolSize": [100, 45],
            "symbolOffset": [0, -20],
            "z": 12,
            "data": [{
              "name": "",
              "value": "103",
              "symbolPosition": "end",
              "itemStyle": {
                "normal": {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                    [{
                      offset: 0,
                      color: "rgba(89,211,255,1)"
                    },
                    {
                      offset: 1,
                      color: "rgba(23,237,194,1)"
                    }
                    ],
                    false
                  ),
                }
              }
            }, {
              "name": "",
              "value": "105",
              "symbolPosition": "end",
              "itemStyle": {
                "normal": {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                    [{
                      offset: 0,
                      color: "rgba(89,211,255,1)"
                    },
                    {
                      offset: 1,
                      color: "rgba(23,237,194,1)"
                    }
                    ],
                    false
                  ),
                }
              }
            }, {
              "name": "",
              "value": "84",
              "symbolPosition": "end",
              "itemStyle": {
                "normal": {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                    [{
                      offset: 0,
                      color: "rgba(89,211,255,1)"
                    },
                    {
                      offset: 1,
                      color: "rgba(23,237,194,1)"
                    }
                    ],
                    false
                  ),
                }
              }
            }]
          },

          {
            name: '2019',
            type: 'bar',
            barWidth: 100,
            barGap: '-100%',
            stack: '广告',
            itemStyle: {
              // barBorderRadius: 20,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 1,
                color: "rgba(0,255,100,0.5)"
              },
              {
                offset: 1,
                color: "rgba(0,255,100,0.5)"
              }
              ])
            },
            //上班截开始
            data: [{
              "name": "关井数",
              "value": "220",
              "trueVal": "22",
              "itemStyle": {
                "normal": {
                  "color": {
                    "x": 0,
                    "y": 0,
                    "x2": 0,
                    "y2": 1,
                    "type": "linear",
                    "global": false,
                    "colorStops": [{
                      offset: 0,
                      color: "rgba(54,127,223,1)"
                    },
                    {
                      offset: 1,
                      color: "rgba(94,162,254,1)"
                    }],
                  }
                }
              }
            }, {
              "name": "开井数",
              "value": "182",
              "trueVal": "18",
              "itemStyle": {
                "normal": {
                  "color": {
                    "x": 0,
                    "y": 0,
                    "x2": 0,
                    "y2": 1,
                    "type": "linear",
                    "global": false,
                    "colorStops": [{
                      offset: 0,
                      color: "rgba(54,127,223,1)"
                    },
                    {
                      offset: 1,
                      color: "rgba(94,162,254,1)"
                    }],
                  }
                }
              }
            }, {
              "name": "不在线",
              "value": "191",
              "trueVal": "19",
              "itemStyle": {
                "normal": {
                  "color": {
                    "x": 0,
                    "y": 0,
                    "x2": 0,
                    "y2": 1,
                    "type": "linear",
                    "global": false,
                    "colorStops": [{
                      offset: 0,
                      color: "rgba(54,127,223,1)"
                    },
                    {
                      offset: 1,
                      color: "rgba(94,162,254,1)"
                    }],
                  }
                }
              }
            }

            ]
          }


        ]
      }
        ;
      myChart.setOption(option);
    },
    initEcharts2() {
      var myChart = echarts.init(document.getElementById("echarts2"));
      let index = 0;
      var colorList = ['#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF']
      function fun() {
        var timer = setInterval(function () {
          myChart.dispatchAction({
            type: 'hideTip',
            seriesIndex: 0,
            dataIndex: index
          });
          // 显示提示框
          myChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: index
          });
          // 取消高亮指定的数据图形
          myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: index == 0 ? 5 : index - 1
          });
          myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: index
          });
          index++;
          if (index > 5) {
            index = 0;
          }
        }, 3000)
      }

      fun()
      setTimeout(function () { fun() }, 5000);
      let option = {
        title: {
          text: '申请价值',
          x: 'center',
          y: 'center',
          textStyle: {
            fontSize: 20
          }
        },
        tooltip: {
          trigger: 'item'
        },
        series: [{
          type: 'pie',
          center: ['50%', '50%'],
          radius: ['24%', '45%'],
          clockwise: true,
          avoidLabelOverlap: true,
          hoverOffset: 15,
          itemStyle: {
            normal: {
              color: function (params) {
                return colorList[params.dataIndex]
              }
            }
          },
          label: {
            show: true,
            position: 'outside',
            formatter: '{a|{b}：{d}%}\n{hr|}',
            rich: {
              hr: {
                backgroundColor: 't',
                borderRadius: 3,
                width: 3,
                height: 3,
                padding: [3, 3, 0, -12]
              },
              a: {
                padding: [-30, 15, -20, 15]
              }
            }
          },
          labelLine: {
            normal: {
              length: 20,
              length2: 30,
              lineStyle: {
                width: 1
              }
            }
          },
          data: [{
            'name': '全部',
            'value': 1.45
          }, {
            'name': '易耗品',
            'value': 2.93
          }, {
            'name': '耐用品',
            'value': 3.15
          },
          ],
        }]
      };
      myChart.setOption(option);
    },
    initEcharts3() {
      var myChart = echarts.init(document.getElementById("echarts3"));
      var data = ["物品1", "物品2", "物品3", "物品4"]

      let option = {
        backgroundColor: '#fff',
        color: [new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
          offset: 0,
          color: "#13ace8"
        }, {
          offset: 1,
          color: "#0167e8"
        }], false)],
        grid: {
          left: '8%',
          right: '10%',
          top: '12%',
          bottom: '18%',
          containLabel: true
        },
        tooltip: {
          show: "true",
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        yAxis: {
          type: 'value',

          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#ccc',
            }
          },
          axisLabel: {
            show: true,
            color: "#ccc",
            fontSize: 18
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          },


        },
        xAxis: [{
          axisTick: {
            show: false
          },

          type: 'category',
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            color: '#ccc',
            interval: 0,
            formatter: function (value) {
              return value.split("").join("\n");
            }
          },


          splitLine: {
            show: false,
            lineStyle: {
              type: 'dashed'
            }
          },
          data: data,
        }],
        series: [{
          name: '违规',
          type: 'bar',
          barWidth: 15,
          label: {
            normal: {
              show: false,
              position: 'right',
              textStyle: {
                color: "#ccc",
                fontSize: 14
              }
            }
          },
          itemStyle: {
            normal: {
              // barBorderRadius: [0, 0, 5, 0],
            }
          },
          data: [50, 60, 70, 80]
        }]
      };
      myChart.setOption(option);
    },
    initEcharts4(xdata, ydata) {
      var myChart = echarts.init(document.getElementById("echarts4"));
      // var data = ["2022年", "2023年", "2024年", "2025年"]
      var data = xdata

      let option = {
        backgroundColor: '#fff',
        color: [new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
          offset: 0,
          color: "#13ace8"
        }, {
          offset: 1,
          color: "#0167e8"
        }], false)],
        grid: {
          left: '8%',
          right: '10%',
          top: '12%',
          bottom: '18%',
          containLabel: true
        },
        tooltip: {
          show: "true",
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        yAxis: {
          type: 'value',

          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#ccc',
            }
          },
          axisLabel: {
            show: true,
            color: "#ccc",
            fontSize: 18
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          },


        },
        xAxis: [{
          axisTick: {
            show: false
          },

          type: 'category',
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            color: '#ccc',
            interval: 0,
            formatter: function (value) {
              return value.split("").join("\n");
            }
          },


          splitLine: {
            show: false,
            lineStyle: {
              type: 'dashed'
            }
          },
          data: data,
        }],
        series: [{
          name: '价值',
          type: 'bar',
          barWidth: 15,
          label: {
            normal: {
              show: false,
              position: 'right',
              textStyle: {
                color: "#ccc",
                fontSize: 14
              }
            }
          },
          itemStyle: {
            normal: {
              // barBorderRadius: [0, 0, 5, 0],
            }
          },
          data: ydata
        }]
      };
      myChart.setOption(option);
    },

    onSubmit() {
      this.$message({
        message: '操作成功',
        type: 'success'
      });
    },
    changeSelect(value) {
      if (this.value2 == '年度') {
        this.initEcharts4(["2022年", "2023年", "2024年", "2025年"], [23, 78, 87, 90])
      }
      if (this.value2 == '季度') {
        this.initEcharts4(["一季度", "二季度", "三季度", "四季度"], [23, 28, 97, 40])
      }
      if (this.value2 == '月份') {
        this.initEcharts4(["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], [23, 28, 97, 40, 32, 56, 78, 69, 45, 32, 98, 84])
      }
    }
  },

}
</script>
<style lang="scss" scoped>
::v-deep .el-card__body {
  // background: #000;
}

.title {
  height: 50px;
  line-height: 50px;
}
</style>
