1、设备日志页面列表及状态横向分布图新增故障状态颜色区分以及增加故障日志列表页签 2、设备日志页面历史记录弹窗中状态横向分布图新增故障状态颜色区分

zhaowei

2025-06-18 8c610945469c4a4a0b0ff2b868e87f25fe01792d

 src/views/mdc/base/modules/DeviceLog/WorkChartModel.vue

@@ -4,67 +4,63 @@
             :footer="null" :visible="visible"
             @cancel="handleCancel" cancelText="关闭">
      <div>
        <div>
          <a-row :gutter="24">
            <a-col :span="6">
              <a-form-item label="设备编号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input placeholder="输入设备编号查询" :readOnly="readOnly" v-model="queryParams.equipmentId"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-date-picker v-model="queryParams.paramDate" :disabledDate="disabledDate" format='YYYY-MM-DD'/>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="采样周期" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input-number v-model="queryParams.period"/>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="6">
              <a-form-item label="设备名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input placeholder="输入设备名称查询" :readOnly="readOnly" v-model="queryParams.equipmentName"></a-input>
              </a-form-item>
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-item label="设备编号" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input placeholder="输入设备编号查询" :readOnly="readOnly" v-model="queryParams.equipmentId"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-date-picker v-model="queryParams.paramDate" :disabledDate="disabledDate" format='YYYY-MM-DD'/>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="采样周期" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number v-model="queryParams.period"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-item label="设备名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input placeholder="输入设备名称查询" :readOnly="readOnly" v-model="queryParams.equipmentName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <div class="params_time">
                <a-time-picker :open="stratOpen" format="HH:mm" @openChange="timeHandleChange('start')"
                               v-model="queryParams.start">
                  <a-button slot="addon" size="small" type="primary" @click="timeHandleClose('start')">
                    确定
                  </a-button>
                </a-time-picker>
                <a-time-picker :open="endOpen" format="HH:mm" @openChange="timeHandleChange('end')"
                               v-model="queryParams.end">
                  <a-button slot="addon" size="small" type="primary" @click="timeHandleClose('end')">
                    确定
                  </a-button>
                </a-time-picker>
              </div>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
          </a-col>
        </a-row>

            </a-col>
            <a-col :span="10">
              <a-form-item label="时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <div class="params_time">
                  <a-time-picker :open="stratOpen" format="HH:mm" @openChange="timeHandleChange('start')"
                                 v-model="queryParams.start">
                    <a-button slot="addon" size="small" type="primary" @click="timeHandleClose('start')">
                      确定
                    </a-button>
                  </a-time-picker>
                  <a-time-picker :open="endOpen" format="HH:mm" @openChange="timeHandleChange('end')"
                                 v-model="queryParams.end">
                    <a-button slot="addon" size="small" type="primary" @click="timeHandleClose('end')">
                      确定
                    </a-button>
                  </a-time-picker>
                </div>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
            </a-col>
          </a-row>

        </div>
        <div class="checkboxgroup">
          <p>统计参数</p>
          <div class="checkboxgroup_con">
            <a-checkbox-group name="checkboxgroup" :value="option" :options="plainOptions" @change="checkboxOnChange"/>
          </div>
        </div>


        <a-spin :spinning="spinning">
          <div id="workChart" style="width:85%;height: 500px;"/>
        </a-spin>
      </div>
      <div class="checkboxgroup">
        <p>统计参数</p>
        <div class="checkboxgroup_con">
          <a-checkbox-group name="checkboxgroup" :value="option" :options="plainOptions" @change="checkboxOnChange"/>
        </div>
      </div>

      <a-spin :spinning="spinning">
        <div id="workChart" style="width:85%;height: 500px;"/>
      </a-spin>
    </a-modal>
  </div>
</template>
@@ -312,8 +308,8 @@
              boundaryGap: [0, '15%'],
              axisLine: {
                show: true,
                lineStyle:{
                  color:'#5470C6'
                lineStyle: {
                  color: '#5470C6'
                }
              }
            },
@@ -325,8 +321,8 @@
              boundaryGap: [0, '15%'],
              axisLine: {
                show: true,
                lineStyle:{
                  color:'#91CC75'
                lineStyle: {
                  color: '#91CC75'
                }
              }
            },
@@ -338,8 +334,8 @@
              boundaryGap: [0, '15%'],
              axisLine: {
                show: true,
                lineStyle:{
                  color:'#FAC858'
                lineStyle: {
                  color: '#FAC858'
                }
              }
            }
@@ -376,7 +372,7 @@
            temp.push(item)
          }
        }
        console.log('temp',temp)
        console.log('temp', temp)
        getAction(this.url.workChart, param).then((res) => {
          if (JSON.stringify(res.result) == '[]' || res.result == null) {
            // this.$message.warning('无数据！')
@@ -428,8 +424,8 @@
              result.push(line)

            }
            console.log('result===========',result)
            console.log('legend=============',lengenddata)
            console.log('result===========', result)
            console.log('legend=============', lengenddata)
            // option.yAxis = Yarr;
            option.series = result
            option.legend = lengenddata
@@ -476,51 +472,8 @@
    }
  }

  /deep/ .ant-modal {
    /*background-color: #000;*/
    /*color: #fff;*/
  }

  /deep/ .ant-modal-header {
    /*background-color: #000;*/
  }

  /deep/ .ant-modal-title {
    /*color: #fff;*/
  }

  /deep/ .ant-modal-close {
    color: #1191b0;
    font-size: 24px;
  }

  /deep/ .ant-modal-content {
    /*background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.27) 100%);*/
    /*background: -webkit-gradient(linear, left left, right right, color-stop(0%, rgba(0, 0, 0, 0.66)), color-stop(100%, rgba(0, 0, 0, 0.4)));*/
    /*background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);*/
    /*background: -o-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);*/
    /*background: -ms-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);*/
    /*background: linear-gradient(to right, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);*/
    /*background-color: #000;*/
    /*color: #fff;*/
    position: relative;
  }

  /deep/ .ant-modal-header {
    /*border-bottom: none!important;*/
  }

  /deep/ .ant-checkbox-wrapper {
    /*color: #fff;*/
  }

  /deep/ .ant-form-item-label label {
    /*color: #fff;*/
  }

  /deep/ .ant-btn {
    /*position: absolute;*/

  }

  .checkboxgroup {