zuel-itsm-3.0.2/assets/js/controllers/performance/servicePerformanceCtrl.js

"use strict";
app.controller("servicePerformanceCtrl", [
  "$scope",
  "$rootScope",
  "$state",
  "$timeout",
  "$interval",
  "$http",
  "$cookieStore",
  "moment",
  "SweetAlert",
  "Restangular",
  "api_report",
  "api_statistic",
  "api_bpm_data",
  "api_user_data",
  "$modal",
  function (
    $scope,
    $rootScope,
    $state,
    $timeout,
    $interval,
    $http,
    $cookieStore,
    moment,
    SweetAlert,
    Restangular,
    api_report,
    api_statistic,
    api_bpm_data,
    api_user_data,
    $modal
  ) {
    $scope.parameters = {};
    $scope.category = {};
    $scope.reportName = "计费";
    $scope.allheight = 100;
    $scope.isMaskground = false;
    $scope.open = function ($event) {
      $event.preventDefault();
      $event.stopPropagation();

      $scope.opened = !$scope.opened;
    };
    $scope.endOpen = function ($event) {
      $event.preventDefault();
      $event.stopPropagation();
      $scope.startOpened = false;
      $scope.endOpened = !$scope.endOpened;
    };
    $scope.startOpen = function ($event) {
      $event.preventDefault();
      $event.stopPropagation();
      $scope.endOpened = false;
      $scope.startOpened = !$scope.startOpened;
    };
    $scope.starttimes = moment(
      new Date(moment().startOf("month")).setMonth(new Date().getMonth() - 1)
    ).format("YYYY-MM-DD HH:mm:ss");
    $scope.endtimes = moment(
      new Date(moment().startOf("month")).setMonth(new Date().getMonth()) - 1
    ).format("YYYY-MM-DD HH:mm:ss");
    $scope.parameters.paramDateFrom = $scope.starttimes;
    $scope.parameters.paramDateTo = $scope.endtimes;
    $scope.reshdata = function() {
      api_bpm_data
        .serviceCount({
          type: 'serviceCountList',
          startTime: $scope.starttimes,
          finishTime: $scope.endtimes,
        })
        .then(function (response) {
          if (response) {
            if ((response.status = 200)) {
              $scope.isMaskground = false;
              $scope.charginrow = response.data.sort((a, b) => b.total - a.total);
              // 图表
              barechart6(response.data);
              barechart7(response.data);
              var totalScore = $scope.charginrow.reduce((pre,cur)=>{
                return pre + cur.score;
              },0)
              angular.forEach($scope.charginrow, function(item) {
                if(totalScore){
                  item.percent = (item.score * 100 / totalScore).toFixed(2) + '%';
                }else{
                  item.percent = '0%';
                }
              })
              if (response.list && response.list.length == 0) {
                $scope.shows = true;
                $scope.empty = "数据为空！";
              }
            }
          }
        });
    }
    $scope.reshdata();
    $scope.reset = function () {
      $scope.parameters = {};
      $scope.starttimes = moment(
        new Date(moment().startOf("month")).setMonth(new Date().getMonth() - 1)
      ).format("YYYY-MM-DD HH:mm:ss");
      $scope.endtimes = moment(
        new Date(moment().startOf("month")).setMonth(new Date().getMonth()) - 1
      ).format("YYYY-MM-DD HH:mm:ss");
      $scope.parameters.paramDateFrom = $scope.starttimes;
      $scope.parameters.paramDateTo = $scope.endtimes;
      $scope.mdxquerym();
    };
    $scope.mdxquerym = function () {
      $scope.starttimes = moment($scope.parameters.paramDateFrom).format(
        "YYYY-MM-DD HH:mm:ss"
      );
      $scope.endtimes = moment($scope.parameters.paramDateTo).format(
        "YYYY-MM-DD HH:mm:ss"
      );
      $scope.isMaskground = true;
      $scope.shows = false;
      $scope.reshdata();
    };

    // 弹窗1
    $scope.servicePerformanceDetail = function(data){
      if(!data.incidentId){
        return;
      }
      $modal.open({
        resolve: {
          scope: function () {
            return $scope;
          },
        },
        size: "lg",
        templateUrl: 'assets/views/customform/tpl/servicePerformanceDetail1.html',
        controller: function ($scope, scope, $modalInstance, api_user_data, SweetAlert, api_wechatfile) {
          $scope.title = "提示";
          $scope.reshdata = function() {
            $scope.isMaskground = true;
            api_bpm_data
              .serviceCount({
                type: 'serviceDaysList',
                userId: data.userId,
                startTime: scope.starttimes,
                finishTime: scope.endtimes,
              })
              .then(function (response) {
                if (response) {
                  if ((response.status = 200)) {
                    $scope.isMaskground = false;
                    $scope.charginrow = response.data;
                    if (response.list && response.list.length == 0) {
                      $scope.shows = true;
                      $scope.empty = "数据为空！";
                    }
                  }
                }
              });
          }
          $scope.reshdata();
          $scope.cancel = function () {
            $modalInstance.dismiss('cancel');
          };
          // 弹窗2
          $scope.servicePerformanceDetail = function(data){
            $scope.cancel();
            $modal.open({
              resolve: {
                scope: function () {
                  return scope;
                },
              },
              size: "lg",
              templateUrl: 'assets/views/customform/tpl/servicePerformanceDetail2.html',
              controller: function ($scope, scope, $modalInstance, api_user_data, SweetAlert, api_wechatfile) {
                $scope.title = "提示";
                $scope.reshdata = function() {
                  $scope.isMaskground = true;
                  api_bpm_data
                    .serviceCount({
                      type: 'serviceIncidentList',
                      userId: data.userId,
                      startTime: data.acceptdate,
                      finishTime: data.acceptdate,
                    })
                    .then(function (response) {
                      if (response) {
                        if ((response.status = 200)) {
                          $scope.isMaskground = false;
                          $scope.charginrow = response.data;
                          if (response.list && response.list.length == 0) {
                            $scope.shows = true;
                            $scope.empty = "数据为空！";
                          }
                        }
                      }
                    });
                }
                $scope.reshdata();
                $scope.cancel = function () {
                  $modalInstance.dismiss('cancel');
                };
                // 弹窗3
                $scope.servicePerformanceDetail = function(data){
                  $scope.cancel();
                  $modal.open({
                    resolve: {
                      scope: function () {
                        return scope;
                      },
                    },
                    size: "lg",
                    templateUrl: 'assets/views/customform/tpl/servicePerformanceDetail3.html',
                    controller: function ($scope, scope, $modalInstance, api_user_data, SweetAlert, api_wechatfile) {
                      $scope.title = data.category + "-" + data.score;
                      $scope.reshdata = function() {
                        $scope.isMaskground = true;
                        api_bpm_data
                          .serviceCount({
                            type: 'serviceDetailsList',
                            categoryId: data.categoryId,
                            userId: data.userId,
                            startTime: moment(data.acceptdate).format('YYYY-MM-DD'),
                            finishTime: moment(data.acceptdate).format('YYYY-MM-DD'),
                          })
                          .then(function (response) {
                            if (response) {
                              if ((response.status = 200)) {
                                $scope.isMaskground = false;
                                $scope.charginrow = response.data;
                                if (response.list && response.list.length == 0) {
                                  $scope.shows = true;
                                  $scope.empty = "数据为空！";
                                }
                              }
                            }
                          });
                      }
                      $scope.reshdata();
                      $scope.cancel = function () {
                        $modalInstance.dismiss('cancel');
                      };
                    },
                  });
                }
              },
            });
          }
        },
      });
    }

    // 饼图
    function barechart6(datas) {
      var dom = document.getElementById("XYSJ");
      var option = null;
      var myChart = echarts.init(dom);
      var data = datas.map(v=>({name: v.userName, value: v.score}));
      option = {
        color: ["#91c7ae", "#61a0a8", "#2f4554", "#c23531", "#d48265"],
        title: {
          text: "积分占比",
          // subtext: datas.pieChartSum,
          // textAlign: "center",
          textStyle: {
            color: "#333",
            fontSize: 16,
            align: 'center',
          },
          // subtextStyle: {
          //   fontSize: 14,
          //   color: ["#005395"],
          //   fontWeight: "bolder",
          //   // align: 'center'
          // },
          // x: "34.5%",
          // y: "50%",
        },
        tooltip: {
          trigger: "item",
          formatter: function (a) {
            return a["data"]["name"] + ":" + a["data"]["value"];
          },
          position: ["50%", "30%"],
        },
        grid: {
          bottom: 150,
          left: 100,
          right: "10%",
        },
        legend: {
          orient: "vertical",
          top: "middle",
          right: "5%",
          textStyle: {
            color: "#333",
            fontSize: 12,
          },
          itemWidth: 8,
          itemHeight: 8,
          icon: "roundRect",
          data: data,
        },
        series: [
          // 主要展示层的
          {
            radius: ["50%", "65%"],
            center: ["35%", "60%"],
            type: "pie",
            label: {
              normal: {
                show: true,
                formatter: "{d}%",
                textStyle: {
                  fontSize: 14,
                },
                position: "outside",
              },
              emphasis: {
                show: true,
              },
            },
            labelLine: {
              normal: {
                show: true,
                length: 5,
                length2: 25,
              },
              emphasis: {
                show: true,
              },
            },
            name: "",
            data: data,
          },
        ],
      };
      if (option && typeof option === "object") {
        myChart.setOption(option);
        myChart.hideLoading();
      }
    }
    // 柱形图
    function barechart7(datas) {
      console.log(datas);
      var datas_obj = {name:[], '处理工单总数':[]};
      // 处理数据 start
      datas.forEach(v=>{
        datas_obj.name.push(v.userName);
        datas_obj['处理工单总数'].push(v.total);
      })
      datas = datas_obj;
      console.log(datas);
      // 处理数据 end
      var name = [];
      var series = [];
      for (var key in datas) {
        if (key !== "name") {
          name.push(key);
          series.push({
            name: key,
            type: "bar",
            stack: "1",
            // barWidth: 40,
            itemStyle: {
              normal: {},
            },
            data: datas[key],
          });
        }
      }
      var dom = document.getElementById("jjmyd");
      var myChart = echarts.init(dom);
      var option = null;
      myChart.showLoading({
        text: "数据加载中...",
        color: "#c23531",
        textColor: "#fff",
        maskColor: "rgba(255,255,255,0)",
        zlevel: 0,
      });
      myChart.hideLoading();
      option = {
        title: {
          text: "处理工单总数",
          // subtext: datas.pieChartSum,
          // textAlign: "center",
          textStyle: {
            color: "#333",
            fontSize: 16,
            align: 'center',
          },
          // subtextStyle: {
          //   fontSize: 14,
          //   color: ["#005395"],
          //   fontWeight: "bolder",
          //   // align: 'center'
          // },
          // x: "34.5%",
          // y: "50%",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        // legend: {
        //   data: name,
        //   align: "left",
        //   // itemWidth:10,
        //   // itemHeight:10,
        //   bottom: 0,
        // },
        grid: {
          top: "15%",
          left: "2%",
          right: "1.5%",
          bottom: "5%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
                alignWithLabel: true
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: "#7B7B7B",
                // fontSize: '14',
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#7B7B7B",
                // type: 'dotted'
              },
            },
            data: datas.name,
          },
        ],
        yAxis: [
          {
            type: "value",
            scale: true,
            name: "处理工单总数",
            min: 0,
            boundaryGap: [0.2, 0.2],
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "#7B7B7B",
                // fontSize: '14',
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#7B7B7B",
                // type: 'dotted'
              },
            },
          },
        ],
        series: series,
      };
      if (option && typeof option === "object") {
        myChart.setOption(option);
        myChart.hideLoading();
      }
    }
  },
]);