统计图表和统计分析界面样式调整

zhuzhuanzhuan

2023-08-22 f6b97ff114dd215852dc92af0ac71e1d893f52df

统计图表和统计分析界面样式调整

 src/views/mdc/base/modules/StatisticalAnalysis/StatisticalAnalysisMain.vue

@@ -41,7 +41,7 @@
        <div  class="PowerOnRate_text" style="width: 8%">
          <table width="85px;" align="center">
            <tr>
              <td align="right"><div style="width: 15px;height: 15px;background-color: #4169E1;position: static;"/></td>
              <td align="right"><div style="width: 15px;height: 15px;background-color: #6496e9;position: static;"/></td>
              <td align="left">开机</td>
            </tr>
            <tr>
@@ -49,7 +49,7 @@
              <td align="left">关机</td>
            </tr>
            <tr>
              <td align="right"><div style="width: 15px;height: 15px;background-color: #00ee00"/></td>
              <td align="right"><div style="width: 15px;height: 15px;background-color: #4ecee1"/></td>
              <td align="left">运行</td>
            </tr>
            <tr>
@@ -169,13 +169,13 @@
            top: 60,
            containLabel: true
          },
          toolbox: {
            show : true,
            padding: 15,
            feature : {
              saveAsImage : {show: true,title:'保存图片',name :'设备效率统计报表'}
            }
          },
          // toolbox: {
          //   show : true,
          //   padding: 15,
          //   feature : {
          //     saveAsImage : {show: true,title:'保存图片',name :'设备效率统计报表'}
          //   }
          // },
          xAxis :{
            type : 'category',
            data:['开机时长','关机时长','运行时长','待机时长'],
@@ -266,6 +266,7 @@
              name:'柱状图',
              type: 'bar',
              data: [this.openingLong, this.closedLong, this.processLong,this.waitingLong],
              // data:[22,3,4,5],
              barWidth: 25,
              label:{
                show:true,
@@ -280,9 +281,10 @@
                  color: function(params) {
                    let colorList = [
                      ["#6496e9","#6bded3"],
                      ["#ffbb65","#fdc68b"],
                      ["#849db8","#b4b8cc"],
                      ["#4fe1c5","#4ecee1"],
                      ["#9978fa","#88a1fa"],
                      // ["#9978fa","#88a1fa"],
                      ["#ffbb65","#fdc68b"],
                    ];
                    // return colorList[params.dataIndex];
                    let colorItem = colorList[params.dataIndex];
@@ -332,7 +334,7 @@
            itemStyle: {
              normal: {
                color: function (params) {
                  let colorList = ['#4169E1', '#A8A8A8'];
                  let colorList = ['#849db8', '#6496e9'];
                  return colorList[params.dataIndex]
                },
                label: {
@@ -374,7 +376,7 @@
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorList = ['#00ee00', '#FCCE10'];
                  var colorList = ['#4ecee1', '#FCCE10'];
                  return colorList[params.dataIndex]
                },
                label: {
@@ -407,6 +409,8 @@
            this.closedLong = this.getTime(res.result.closeLong);
            this.totalLong = parseInt(this.openingLong) + parseInt(this.closedLong);
            this.draw();
          }else{
            this.draw()
          }
        })
      },
@@ -420,9 +424,11 @@
        let _this = this
        getAction(this.url.getBaseTree).then((res) => {
          if (res.success) {
            // console.log(res.result[0].entity.tierName)
            if(res.result[0]){
            _this.$set(this.queryParam, 'tierName', res.result[0].title)
            _this.$set(this.queryParams, 'parentId', res.result[0].key)
              _this.queryStatistical()            }
            // console.log(res.result[0].entity.tierName)
            _this.queryStatistical()
          } else {
            // this.$message.warn(res.message)

 src/views/mdc/base/modules/StatisticsChart/StatisticsLegend.vue

@@ -230,25 +230,25 @@
              containLabel: true
            },
          legend:{
            selected:{
                "曲线":false,
            },
            // selected:{
            //     "曲线":false,
            // },
            top:'0',
            right:'10',
            //设置单选多选模式
            selectedMode:'single',
            // selectedMode:'single',
            icon:"pin",
            data:[
              {
                name:'曲线',
                textStyle:{
                  padding:4,
                  color:'#e957ff',
                  // borderWidth:1,
                  fontSize:16,
                  // borderColor:'#50E6D7'
                }
              },
              // {
              //   name:'曲线',
              //   textStyle:{
              //     padding:4,
              //     color:'#e957ff',
              //     // borderWidth:1,
              //     fontSize:16,
              //     // borderColor:'#50E6D7'
              //   }
              // },
              {
                name:'柱状图',
                textStyle:{
@@ -305,52 +305,53 @@
              }
            },
            series:[
              {
              name:'曲线',
              type: 'line',
              smooth:true,
              symbol: 'circle',
              symbolSize: 8,
              label:{
                show:true,
                position:"top",
                textStyle:{
                  color:'#000',
                },
                formatter:"时长：{c}H"
              },
              itemStyle: {
                color: "rgb(87, 120, 225)",
                borderColor: "#fff",
                borderWidth: 2,
                shadowColor: 'rgba(0, 0, 0, .3)',
              },
              lineStyle: {
                normal: {
                  color:"rgb(87, 120, 225)",
                  shadowColor: 'rgba(87, 120, 225, .4)',
                  shadowBlur: 8,
                  shadowOffsetY: 10,
                  shadowOffsetX: 0,
                },
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(87, 120, 225, .6)'
                  }, {
                    offset: 1,
                    color: 'rgba(87, 120, 225, .3)'
                  }]),
                }
              },
              data: [this.openingLong, this.closedLong, this.processLong,this.waitingLong],
            },
            //   {
            //   name:'曲线',
            //   type: 'line',
            //   smooth:true,
            //   symbol: 'circle',
            //   symbolSize: 8,
            //   label:{
            //     show:true,
            //     position:"top",
            //     textStyle:{
            //       color:'#000',
            //     },
            //     formatter:"时长：{c}H"
            //   },
            //   itemStyle: {
            //     color: "rgb(87, 120, 225)",
            //     borderColor: "#fff",
            //     borderWidth: 2,
            //     shadowColor: 'rgba(0, 0, 0, .3)',
            //   },
            //   lineStyle: {
            //     normal: {
            //       color:"rgb(87, 120, 225)",
            //       shadowColor: 'rgba(87, 120, 225, .4)',
            //       shadowBlur: 8,
            //       shadowOffsetY: 10,
            //       shadowOffsetX: 0,
            //     },
            //   },
            //   areaStyle: {
            //     normal: {
            //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            //         offset: 0,
            //         color: 'rgba(87, 120, 225, .6)'
            //       }, {
            //         offset: 1,
            //         color: 'rgba(87, 120, 225, .3)'
            //       }]),
            //     }
            //   },
            //   data: [this.openingLong, this.closedLong, this.processLong,this.waitingLong],
            // },
              {
                name:'柱状图',
                type: 'bar',
                data: [this.openingLong, this.closedLong, this.processLong,this.waitingLong],
                // data:[22,3,5,6],
                barWidth: 25,
                label:{
                  show:true,
@@ -365,9 +366,10 @@
                    color: function(params) {
                      let colorList = [
                        ["#6496e9","#6bded3"],
                        ["#ffbb65","#fdc68b"],
                        ["#849db8","#b4b8cc"],
                        ["#4fe1c5","#4ecee1"],
                        ["#9978fa","#88a1fa"],
                        // ["#9978fa","#88a1fa"],
                        ["#ffbb65","#fdc68b"],
                      ];
                      // return colorList[params.dataIndex];
                      let colorItem = colorList[params.dataIndex];
@@ -446,13 +448,22 @@
            {
            type: 'bar',
            data: [this.openingLong,this.totalLong],
              // data:[22,22],
            barWidth: 25,
              label:{
                show:true,
                position:"top",
                textStyle:{
                  color:'#000',
                },
                formatter:"时长：{c}H"
              },
            itemStyle: {
              normal: {
                color: function(params) {
                  let colorList = [
                    ["#6496e9","#6bded3"],
                    ["#ffbb65","#fdc68b"],
                    ["#9978fa","#88a1fa"],
                  ];
                  // return colorList[params.dataIndex];
                  let colorItem = colorList[params.dataIndex];
@@ -530,13 +541,22 @@
          series: [{
            type: 'bar',
            data: [this.processLong,this.openingLong],
            // data:[22,22],
            barWidth: 25,
            label:{
              show:true,
              position:"top",
              textStyle:{
                color:'#000',
              },
              formatter:"时长：{c}H"
            },
            itemStyle: {
              normal: {
                color: function(params) {
                  let colorList = [
                    ["#4fe1c5","#4ecee1"],
                    ["#9978fa","#88a1fa"],
                    ["#6496e9","#6bded3"],
                  ];
                  // return colorList[params.dataIndex];
                  let colorItem = colorList[params.dataIndex];
@@ -572,6 +592,9 @@
              this.totalLong = parseInt(this.openingLong) + parseInt(this.closedLong);
              this.draw();
            }
            else{
              this.draw();
            }
          })
      },
      dataChange(val) {
@@ -584,8 +607,11 @@
        let _this = this
        getAction(this.url.getBaseTree).then((res) => {
          if (res.success) {
            // console.log(res.result[0].entity.tierName)
            if(res.result[0]){
            _this.$set(this.queryParam, 'tierName', res.result[0].title)
            }
            // console.log(res.result[0].entity.tierName)

          } else {
            // this.$message.warn(res.message)
            this.$notification.warning({

 src/views/mdc/base/modules/TorqueconfigurationList/TorqueconfigurationModal.Style#Drawer.vue

ÎļþÒÑɾ³ý