{"remainingRequest":"D:\\jenkins\\workspace\\xq-web-fvue\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\jenkins\\workspace\\xq-web-fvue\\src\\components\\home\\customChart.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\jenkins\\workspace\\xq-web-fvue\\src\\components\\home\\customChart.vue","mtime":1667327529512},{"path":"D:\\jenkins\\workspace\\xq-web-fvue\\node_modules\\babel-loader\\lib\\index.js","mtime":315532800000},{"path":"D:\\jenkins\\workspace\\xq-web-fvue\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\xq-web-fvue\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\r\nimport { mapState } from \"vuex\";\r\nimport utils from \"@/utils.js\";\r\n\r\nexport default {\r\n  props: [\"id\"],\r\n  data() {\r\n    return {\r\n      queryOpTransObj: {\r\n        EQ: \"equal\",\r\n        BETWEEN: \"between\",\r\n        GE: \"great_equal\",\r\n        LE: \"less_equal\",\r\n        LK: \"like\",\r\n        IN: \"in\"\r\n      },\r\n      fullscreenLoading: false,\r\n      dialogVisible: false,\r\n      customChart: \"\",\r\n      conditions: [],\r\n      showFiled: [],\r\n      pagination: { page: 1, pageSize: 20, showTotal: true },\r\n      chartData: {},\r\n      conditionValue: {}\r\n    };\r\n  },\r\n  created() {\r\n    let this_ = this;\r\n    this.$store.dispatch(\"form/getCustomChart\", this.id).then(function(data) {\r\n      if (data) {\r\n        data.conditionfield = JSON.parse(data.conditionfield);\r\n        data.displayfield = JSON.parse(data.displayfield);\r\n        data.xaxisField = JSON.parse(data.xaxisField);\r\n        data.sortfield = JSON.parse(data.sortfield);\r\n        for (var i = 0, c; (c = data.conditionfield[i++]); ) {\r\n          c.condition = this_.queryOpTransObj[c.condition].toUpperCase();\r\n        }\r\n        this_.conditions = data.conditionfield;\r\n        this_.customChart = data;\r\n        this_.showFiled = JSON.parse(\r\n          JSON.stringify(\r\n            this_.customChart.xaxisField.concat(this_.customChart.displayfield)\r\n          )\r\n        );\r\n        setTimeout(function() {\r\n          var chartHeight = document.getElementById(\"chartCard\").offsetHeight;\r\n          var selectArea =\r\n            document.getElementById(\"conditionArea\") &&\r\n            document.getElementById(\"conditionArea\").offsetHeight\r\n              ? document.getElementById(\"conditionArea\").offsetHeight\r\n              : 0;\r\n          document.getElementById(\"chartDiv\").style.height =\r\n            chartHeight - selectArea - 65 + \"px\";\r\n          document.getElementById(\"chartDataTable\").style.height =\r\n            chartHeight - selectArea - 95 + \"px\";\r\n          this_.search();\r\n        }, 20);\r\n      }\r\n    });\r\n  },\r\n  methods: {\r\n    buildQuerys() {\r\n      let queryFilter = { pageBean: this.pagination, querys: [], sorter: [] };\r\n      for (var i = 0, c; (c = this.conditions[i++]); ) {\r\n        let queryValue = \"\";\r\n        if (c.defaultType != \"1\" && c.defaultValue) {\r\n          queryValue = c.defaultValue;\r\n        } else if (c.defaultType == \"1\" && this.conditionValue[c.field]) {\r\n          queryValue = this.conditionValue[c.field];\r\n        }\r\n        if (queryValue) {\r\n          queryFilter.querys.push({\r\n            property: c.field,\r\n            operation: c.condition,\r\n            value: queryValue\r\n          });\r\n        }\r\n      }\r\n\r\n      for (var i = 0, s; (s = this.customChart.sortfield[i++]); ) {\r\n        queryFilter.sorter.push({\r\n          property: s.field,\r\n          direction: s.sortType.toUpperCase()\r\n        });\r\n      }\r\n      return queryFilter;\r\n    },\r\n    getValue(r, s) {\r\n      var value = r[s.field.toUpperCase()];\r\n      if (s.dbType == \"date\") {\r\n        var filter = this.$options.filters[\"dateformat\"];\r\n        value = filter(value, \"YYYY-MM-DD HH:mm:ss\");\r\n      }\r\n      return value;\r\n    },\r\n    //重置\r\n    reset() {\r\n      this.conditionValue = {};\r\n      this.search();\r\n    },\r\n    handleSizeChange: function(size) {\r\n      //每页下拉显示数据\r\n      this.pagination.pageSize = size;\r\n      this.search();\r\n    },\r\n    handleCurrentChange: function(currentPage) {\r\n      //点击第几页\r\n      this.pagination.page = currentPage;\r\n      this.search();\r\n    },\r\n\r\n    //查询\r\n    search() {\r\n      let queryFilter = this.buildQuerys(); //查询条件\r\n      let param = { id: this.id, filter: queryFilter };\r\n      let this_ = this;\r\n      this.$store.dispatch(\"form/getChartData\", param).then(function(data) {\r\n        if (data) {\r\n          this_.chartData = data;\r\n          this_.pagination = {\r\n            pageSize: data.pageSize,\r\n            page: data.page,\r\n            total: data.total\r\n          };\r\n          this_.buildChart(data.rows);\r\n        }\r\n      });\r\n    },\r\n    //根据自定义图表的相关设置以及数据生产图表\r\n    buildChart(data) {\r\n      const echarts = require(\"echarts\");\r\n      var myChart = echarts.init(document.getElementById(\"chartDiv\"));\r\n      this.$root.$on(\"resize\", () => {\r\n        myChart.resize(); //监测图表自适应\r\n      });\r\n      myChart.clear();\r\n      var displayfield = this.customChart.displayfield;\r\n      var legendData = [];\r\n      var xAxisData = [];\r\n      var seriesData = [];\r\n      var xaxisField = this.customChart.xaxisField;\r\n      if (xaxisField) xaxisField = xaxisField[0];\r\n      for (var i = 0, d; (d = displayfield[i++]); ) {\r\n        if (d) {\r\n          var arr = [];\r\n          if (this.customChart.style == 3) {\r\n            for (var j = 0, res; (res = data[j++]); ) {\r\n              if (res) {\r\n                var value = res[xaxisField.field.toUpperCase()];\r\n                if (\r\n                  xaxisField.dbType == \"date\" &&\r\n                  value &&\r\n                  typeof value == \"number\"\r\n                )\r\n                  value = new Date(value).format(\"yyyy-MM-dd HH:mm:dd\");\r\n                legendData.push(value);\r\n                arr.push({\r\n                  value: res[d.field.toUpperCase()],\r\n                  name: value\r\n                });\r\n              }\r\n            }\r\n            seriesData.push({\r\n              name: d.comment,\r\n              type: \"pie\",\r\n              radius: \"75%\",\r\n              center: [\"50%\", \"55%\"],\r\n              data: arr,\r\n              itemStyle: {\r\n                emphasis: {\r\n                  shadowBlur: 10,\r\n                  shadowOffsetX: 0,\r\n                  shadowColor: \"rgba(0, 0, 0, 0.5)\"\r\n                }\r\n              }\r\n            });\r\n          } else {\r\n            var type = this.customChart.style == 1 ? \"line\" : \"bar\";\r\n            legendData.push(d.comment);\r\n            for (var j = 0, res; (res = data[j++]); ) {\r\n              if (i == 1) {\r\n                var value = res[xaxisField.field.toUpperCase()];\r\n                if (\r\n                  xaxisField.dbType == \"date\" &&\r\n                  value &&\r\n                  typeof value == \"number\"\r\n                )\r\n                  value = new Date(value).format(defaultFmt);\r\n                xAxisData.push(value);\r\n              }\r\n              if (res) {\r\n                var value = res[d.field.toUpperCase()];\r\n                /*if(d.dbType=='date' && value && (typeof value==\"number\")) value=new Date(value).format(defaultFmt);*/\r\n                arr.push(value);\r\n              }\r\n            }\r\n            seriesData.push({\r\n              name: d.comment,\r\n              type: type,\r\n              areaStyle: { normal: {} },\r\n              data: arr\r\n            });\r\n          }\r\n        }\r\n      }\r\n      var option = {};\r\n      if (this.customChart.style == 3) {\r\n        option = {\r\n          title: {\r\n            text: this.customChart.name,\r\n            x: \"center\",\r\n            y: 10,\r\n            textStyle: {\r\n              fontSize: 24\r\n            }\r\n          },\r\n          tooltip: {\r\n            trigger: \"item\",\r\n            formatter: \"{a} <br/>{b} : {c} ({d}%)\"\r\n          },\r\n          toolbox: {\r\n            feature: {\r\n              saveAsImage: {}\r\n            }\r\n          },\r\n          legend: {\r\n            orient: \"vertical\",\r\n            left: \"left\",\r\n            data: legendData\r\n          },\r\n          series: seriesData\r\n        };\r\n      } else {\r\n        option = {\r\n          title: {\r\n            text: this.customChart.name,\r\n            x: \"center\",\r\n            y: 10,\r\n            textStyle: {\r\n              fontSize: 24\r\n            }\r\n          },\r\n          tooltip: {\r\n            trigger: \"axis\"\r\n          },\r\n          legend: {\r\n            data: legendData,\r\n            y: 50\r\n          },\r\n          toolbox: {\r\n            feature: {\r\n              saveAsImage: {}\r\n            }\r\n          },\r\n          grid: {\r\n            y: 110,\r\n            left: \"3%\",\r\n            right: \"4%\",\r\n            bottom: \"3%\",\r\n            containLabel: true\r\n          },\r\n          xAxis: [\r\n            {\r\n              type: \"category\",\r\n              boundaryGap: false, //类目起始和结束两端空白策略，默认为true留空，false则顶头\r\n              data: xAxisData\r\n            }\r\n          ],\r\n          yAxis: [\r\n            {\r\n              type: \"value\"\r\n            }\r\n          ],\r\n          series: seriesData\r\n        };\r\n        //柱状图的时候两端留空。避免柱状图挡住y轴。折线图则不留空，\r\n        if (this.customChart.style == 2) option.xAxis[0][\"boundaryGap\"] = true;\r\n        if (this.customChart.conf) {\r\n          var obj = JSON.parse(this.customChart.conf);\r\n          if (obj.yMin == 2) option.yAxis[0][\"min\"] = \"dataMin\";\r\n          if (obj.xShowAll == 2)\r\n            option.xAxis[0][\"axisLabel\"] = {\r\n              interval: 0, //横轴信息全部显示\r\n              rotate: 30\r\n            };\r\n        }\r\n        if (\r\n          (this.customChart.style == 2 || this.customChart.style == 1) &&\r\n          data.length > 20\r\n        ) {\r\n          option.dataZoom = [\r\n            {\r\n              type: \"inside\",\r\n              start: 0,\r\n              end: 10\r\n            },\r\n            {\r\n              start: 0,\r\n              end: 10,\r\n              handleIcon:\r\n                \"M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z\",\r\n              handleSize: \"80%\",\r\n              handleStyle: {\r\n                color: \"#fff\",\r\n                shadowBlur: 3,\r\n                shadowColor: \"rgba(0, 0, 0, 0.6)\",\r\n                shadowOffsetX: 2,\r\n                shadowOffsetY: 2\r\n              }\r\n            }\r\n          ];\r\n          option.grid.bottom = 50;\r\n        } else {\r\n          option.grid.bottom = \"3%\";\r\n          delete option.dataZoom;\r\n        }\r\n      }\r\n      myChart.setOption(option);\r\n    },\r\n    //回车查询\r\n    searchEnterFun: function(e) {\r\n      var keyCode = window.event ? e.keyCode : e.which;\r\n      if (keyCode == 13) {\r\n        this.search();\r\n      }\r\n    }\r\n  }\r\n};\r\n",null]}