Merge pull request '颗粒折线图' (#4) from zjl into master

Reviewed-on: #4

.env.development

@@ -4,4 +4,5 @@ ENV = 'development'
 # base api
 # 这里修改成api服务器地址
 VUE_APP_BASE_API = '/api'
-VUE_APP_VIEW_PIC = 'http://tft.mes.picaiba.com/api/common/attachment/downloadFile?type=0&attachmentId='
+VUE_APP_VIEW_PIC = 'http://tft.mes.picaiba.com/api/common/attachment/downloadFile?type=0&attachmentId='
+VUE_APP_REPORT_DESIGN_URL = 'http://tft.mes.picaiba.com/ureport/designer'

.env.production

@@ -4,4 +4,5 @@ ENV = 'production'
 # base api
 # 这里修改成api服务器地址
 VUE_APP_BASE_API = '/api'
-VUE_APP_VIEW_PIC = 'http://tft.mes.picaiba.com/api/common/attachment/downloadFile?type=0&attachmentId='
+VUE_APP_VIEW_PIC = 'http://tft.mes.picaiba.com/api/common/attachment/downloadFile?type=0&attachmentId='
+VUE_APP_REPORT_DESIGN_URL = 'http://tft.mes.picaiba.com/ureport/designer'

src/api/deviceManagement.js

@@ -16,6 +16,13 @@ export function performanceAnalysisPlan(data) {
     data
   })
 }
+export function performanceUpdatePlan(data) {
+  return request({
+    url: '/equipment/PerformanceAnalysis/updatePlan',
+    method: 'post',
+    data
+  })
+}
 // 托盘指标分析
 export function palletIndicatorAnalysisPage(data) {
   return request({
@@ -24,9 +31,7 @@ export function palletIndicatorAnalysisPage(data) {
     data
   })
 }
-
+export function palletIndicatorGetType(data) {
-// 托盘指标分析
-export function palletIndicatorAnalysisType(data) {
   return request({
     url: '/equipment/PalletIndicatorAnalysis/getType',
     method: 'post',

src/router/index.js

@@ -577,6 +577,65 @@ export const routes = [
           title: '设备配置'
         },
         component: () => import('../views/basicConfig/deviceConfig')
+      },
+      {
+        path: 'reportManagement',
+        name: 'reportManagement',
+        meta: {
+          title: '报表管理'
+        },
+        component: () => import('../views/basicConfig/reportManagement'),
+        redirect: '/basicConfig/reportManagement/reportList',
+        children: [
+          {
+            path: 'reportList',
+            name: 'reportList',
+            meta: {
+              title: '报表列表'
+            },
+            component: () =>
+              import('../views/basicConfig/reportManagement/reportList')
+          },
+          {
+            path: 'reportListDetail',
+            name: 'reportListDetail',
+            hidden: true,
+            meta: {
+              title: '报表列表明细'
+            },
+            component: () =>
+              import('../views/basicConfig/reportManagement/reportListDetail')
+          },
+          {
+            path: 'reportView',
+            name: 'reportView',
+            meta: {
+              title: '报表预览'
+            },
+            component: () =>
+              import('../views/basicConfig/reportManagement/reportView')
+          },
+          {
+            path: 'reportDesign',
+            name: 'reportDesign',
+            meta: {
+              title: '报表设计'
+            },
+            component: () =>
+              import('../views/basicConfig/reportManagement/reportDesign')
+          },
+          {
+            path: 'reportClassification',
+            name: 'reportClassification',
+            meta: {
+              title: '报表分类'
+            },
+            component: () =>
+              import(
+                '../views/basicConfig/reportManagement/reportClassification'
+              )
+          }
+        ]
       }
     ]
   },

src/views/basicConfig/components/accountAdd.vue

@@ -3,7 +3,6 @@
     <el-form-item label="用户名" prop="account">
       <el-input
         v-model="form.account"
-        onkeyup="value=value.replace(/[\W]/g,'')"
         placeholder="只能输入字母或数字，不可输入汉字"
         :disabled="isEdit"
       ></el-input>
@@ -109,6 +108,7 @@ export default {
     submitForm() {
       this.$refs['form'].validate((valid) => {
         if (valid) {
+          this.form.account = this.form.account.replace(/[\W]/g, '')
           if (this.isEdit) {
             //编辑
             accountUpdate({ ...this.form }).then((res) => {

src/views/basicConfig/components/reportClassAdd.vue

@@ -0,0 +1,83 @@
+<template>
+  <el-form ref="form" :rules="rules" label-width="100px" :model="form">
+    <el-form-item label="报表分类名" prop="name">
+      <el-input v-model="form.name"></el-input>
+    </el-form-item>
+  </el-form>
+</template>
+<script>
+export default {
+  name: 'ReportClassAdd',
+  data() {
+    return {
+      form: {
+        id: '',
+        name: ''
+      },
+      isEdit: false, //是否是编辑
+      rules: {
+        name: [{ required: true, message: '请输入报表分类名', trigger: 'blur' }]
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      if (id) {
+        this.isEdit = true
+        this.form.id = id
+        // getAccount({ id }).then((res) => {
+        //   if (res.code === 0) {
+        //     this.form.account = res.data.account
+        //     this.form.password = res.data.password
+        //     this.form.name = res.data.name
+        //     this.form.proLineId = res.data.proLineId
+        //     this.form.role = res.data.role
+        //     this.form.enabled = res.data.enabled
+        //   }
+        // })
+      } else {
+        this.isEdit = false
+        this.form.id = ''
+      }
+    },
+    submitForm() {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          if (this.isEdit) {
+            //编辑
+            // accountUpdate({ ...this.form }).then((res) => {
+            //   if (res.code === 0) {
+            //     this.$message({
+            //       message: '操作成功',
+            //       type: 'success',
+            //       duration: 1500
+            //     })
+            //     this.$emit('successSubmit')
+            //   }
+            // })
+            this.$emit('successSubmit')
+          } else {
+            // addAccount({ ...this.form }).then((res) => {
+            //   if (res.code === 0) {
+            //     this.$message({
+            //       message: '操作成功',
+            //       type: 'success',
+            //       duration: 1500
+            //     })
+            //     this.$emit('successSubmit')
+            //   }
+            // })
+            this.$emit('successSubmit')
+          }
+        } else {
+          return false
+        }
+      })
+    },
+    formClear() {
+      this.$refs.form.resetFields()
+      this.isEdit = false
+    }
+  }
+}
+</script>

src/views/basicConfig/components/reportNameEdit.vue

@@ -0,0 +1,82 @@
+<template>
+  <el-form ref="form" :rules="rules" label-width="100px" :model="form">
+    <el-form-item label="报表名称" prop="name">
+      <el-input v-model="form.name"></el-input>
+    </el-form-item>
+    <el-form-item label="报表分类" prop="type">
+      <el-select v-model="form.type" placeholder="报表分类" style="width: 100%">
+        <el-option
+          v-for="(item, i) in typeList"
+          :key="i"
+          :label="item.dataName"
+          :value="item.dataName"
+        ></el-option>
+      </el-select>
+    </el-form-item>
+  </el-form>
+</template>
+<script>
+export default {
+  name: 'ReportNameEdit',
+  data() {
+    return {
+      form: {
+        id: '',
+        name: ''
+      },
+      typeList: [
+        { dataName: '能源', id: 1 },
+        { dataName: '订单', id: 2 },
+        { dataName: '设备', id: 3 },
+        { dataName: '人员', id: 4 }
+      ],
+      rules: {
+        name: [
+          { required: true, message: '请输入报表分类名', trigger: 'blur' }
+        ],
+        type: [{ required: true, message: '请选择分类', trigger: 'change' }]
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      if (id) {
+        this.form.id = id
+        // getAccount({ id }).then((res) => {
+        //   if (res.code === 0) {
+        //     this.form.account = res.data.account
+        //     this.form.password = res.data.password
+        //     this.form.name = res.data.name
+        //     this.form.proLineId = res.data.proLineId
+        //     this.form.role = res.data.role
+        //     this.form.enabled = res.data.enabled
+        //   }
+        // })
+      }
+    },
+    submitForm() {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          //编辑
+          // accountUpdate({ ...this.form }).then((res) => {
+          //   if (res.code === 0) {
+          //     this.$message({
+          //       message: '操作成功',
+          //       type: 'success',
+          //       duration: 1500
+          //     })
+          //     this.$emit('successSubmit')
+          //   }
+          // })
+          this.$emit('successSubmit')
+        } else {
+          return false
+        }
+      })
+    },
+    formClear() {
+      this.$refs.form.resetFields()
+    }
+  }
+}
+</script>

src/views/basicConfig/reportManagement.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="report-management">
+    <el-menu
+      :default-active="activeName"
+      mode="horizontal"
+      @select="handleSelect"
+    >
+      <el-menu-item index="reportList">报表列表</el-menu-item>
+      <el-menu-item index="reportDesign">报表设计</el-menu-item>
+      <el-menu-item index="reportClassification">报表分类</el-menu-item>
+    </el-menu>
+    <section>
+      <router-view />
+    </section>
+  </div>
+</template>
+<script>
+export default {
+  name: 'ReportManagement',
+  data() {
+    return {
+      activeName: ''
+    }
+  },
+  mounted() {
+    this.activeName = this.$route.name
+  },
+  methods: {
+    handleSelect(name) {
+      this.$router.push({ name: name })
+    }
+  },
+  watch: {
+    $route: {
+      handler: function (val) {
+        this.activeName = val.name
+      }
+    }
+  }
+}
+</script>
+<style lang="scss">
+.report-management {
+  .el-menu {
+    background-color: #f2f4f9;
+  }
+  .el-menu.el-menu--horizontal {
+    border-bottom: none;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    padding: 8px 8px;
+    .el-menu-item {
+      height: 48px;
+      line-height: 48px;
+      width: 32.7%;
+      border-radius: 8px;
+      background-color: #fff;
+      font-size: 16px;
+      color: rgba(22, 22, 22, 0.65);
+      text-align: center;
+    }
+  }
+  .el-tabs__active-bar {
+    display: none;
+  }
+}
+</style>

src/views/basicConfig/reportManagement/reportClassification.vue

@@ -0,0 +1,188 @@
+<template>
+  <div class="report-classification">
+    <search-bar
+      :formConfigs="formConfig"
+      ref="searchBarForm"
+      @headBtnClick="buttonClick"
+    />
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-props="tableProps"
+      :table-data="tableData"
+      :max-height="tableH"
+    >
+      <method-btn
+        v-if="tableBtn.length"
+        slot="handleBtn"
+        :width="80"
+        label="操作"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      :total="total"
+      @pagination="getList()"
+    />
+    <!-- 新增 -->
+    <base-dialog
+      :dialogTitle="addOrEditTitle"
+      :dialogVisible="centervisible"
+      @cancel="handleCancel"
+      @confirm="handleConfirm"
+      :before-close="handleCancel"
+    >
+      <report-class-add ref="reportClass" @successSubmit="successSubmit" />
+    </base-dialog>
+  </div>
+</template>
+<script>
+import { tableHeight } from '@/utils/index'
+import ReportClassAdd from './../components/reportClassAdd.vue'
+const tableProps = [
+  {
+    prop: 'name',
+    label: '报表分类名'
+  }
+]
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: '编辑'
+  },
+  {
+    type: 'delete',
+    btnName: '删除'
+  }
+]
+export default {
+  name: 'ReportClassification',
+  components: { ReportClassAdd },
+  data() {
+    return {
+      formConfig: [
+        {
+          type: 'input',
+          label: '关键字',
+          placeholder: '报表分类名',
+          param: 'name',
+          width: 300
+        },
+        {
+          type: 'button',
+          btnName: '查询',
+          name: 'search',
+          color: 'primary'
+        },
+        {
+          type: 'separate'
+        },
+        {
+          type: 'button',
+          btnName: '新增',
+          name: 'add',
+          color: 'success',
+          plain: true
+        }
+      ],
+      tableProps,
+      tableData: [],
+      tableBtn,
+      tableH: tableHeight(330),
+      total: 0,
+      listQuery: {
+        current: 1,
+        size: 20
+      },
+      centervisible: false,
+      addOrEditTitle: '' //新增编辑弹出框的title
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', () => {
+      this.tableH = tableHeight(265)
+    })
+    this.getList()
+  },
+  methods: {
+    getList() {
+      let arr = []
+      for (let i = 0; i < 30; i++) {
+        let obj = {}
+        obj.name = '分类名' + i
+        obj.id = i + 1
+        arr.push(obj)
+      }
+      this.tableData = arr
+      this.total = 30
+    },
+    handleClick(val) {
+      console.log(val)
+      if (val.type === 'edit') {
+        this.addOrEditTitle = '编辑'
+        this.$nextTick(() => {
+          this.$refs.reportClass.init(val.data.id)
+        })
+        this.centervisible = true
+      } else {
+        this.$confirm('确认删除报表分类名"' + val.data.name + '"吗？', {
+          type: 'warning'
+        })
+          .then(() => {
+            // maintainManageDelete({ id: val.data.id }).then((res) => {
+            //   console.log(res)
+            //   this.$message({
+            //     message: '工单删除成功',
+            //     type: 'success',
+            //     duration: 1500,
+            //     onClose: () => {}
+            //   })
+            //   this.listQuery.current = 1
+            //   this.getList()
+            // })
+          })
+          .catch(() => {})
+      }
+    },
+    buttonClick(val) {
+      switch (val.btnName) {
+        case 'search':
+          this.listQuery.name = val.name
+          this.listQuery.current = 1
+          this.getList()
+          break
+        default:
+          this.addOrEditTitle = '新增'
+          this.centervisible = true
+          this.$nextTick(() => {
+            this.$refs.reportClass.init()
+          })
+      }
+    },
+    handleCancel() {
+      this.$refs.reportClass.formClear()
+      this.centervisible = false
+      this.addOrEditTitle = ''
+    },
+    handleConfirm() {
+      this.$refs.reportClass.submitForm()
+    },
+    successSubmit() {
+      this.handleCancel()
+      this.getList()
+    }
+  }
+}
+</script>
+<style lang="scss">
+.report-classification {
+  height: calc(100vh - 203px);
+  padding: 12px 16px;
+  margin: 0px 16px;
+  border-radius: 8px;
+  background-color: #fff;
+}
+</style>

src/views/basicConfig/reportManagement/reportDesign.vue

@@ -0,0 +1,36 @@
+<template>
+  <div id="reportDesign" class="reportDesign">
+    <iframe :src="url" width="100%" height="100%"></iframe>
+  </div>
+</template>
+<script>
+export default {
+  name: 'ReportDesign',
+  data() {
+    return {
+      url: process.env.VUE_APP_REPORT_DESIGN_URL
+    }
+  },
+  mounted() {
+    const vm = this
+    // const { name } = this.$route.query
+    // this.url += name ? '?_u=db:' + this.$route.query.name : ''
+    const ifream = document.getElementById('reportDesign')
+    ifream.onload = function () {
+      console.log('加载完成')
+      vm.loading = false
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.reportDesign {
+  margin: 0px 16px 0 16px;
+  width: 98.5%;
+  height: calc(100vh - 205px);
+  .mainIframe {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/views/basicConfig/reportManagement/reportList.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="reoprtManager">
+    <div class="report">
+      <div class="imgBox">
+        <img
+          src="./../../../assets/basic/report.png"
+          alt=""
+          width="355px"
+          height="314px"
+        />
+      </div>
+      <div class="numBox">
+        <div>
+          <div class="reportNum">
+            <div class="num">6</div>
+            <div class="text">
+              <p class="font">全部报表</p>
+              <p class="letter">Reports</p>
+            </div>
+          </div>
+          <div class="detail" @click="toDetail">了解详情</div>
+        </div>
+      </div>
+    </div>
+    <div class="reportDesc" v-for="(item, i) in reportList" :key="i">
+      <div>
+        <div class="reportNum">
+          <div class="num">{{ item.num }}</div>
+          <div class="text">
+            <p class="font">{{ item.name }}</p>
+            <p class="letter">Reports</p>
+          </div>
+        </div>
+        <div class="detail" @click="bbb">了解详情</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'ReportList',
+  data() {
+    return {
+      totalReports: 6,
+      reportList: [
+        { num: 2, name: '能源报表' },
+        { num: 2, name: '订单报表' },
+        { num: 1, name: '设备报表' },
+        { num: 1, name: '人员报表' },
+        { num: 1, name: '质量报表' },
+        { num: 0, name: '产线报表' }
+      ]
+    }
+  },
+  methods: {
+    toDetail() {
+      this.$router.push({
+        path: '/basicConfig/reportManagement/reportListDetail'
+      })
+    },
+    bbb() {
+      this.$router.push({ path: '/basicConfig/reportManagement/reportDesign' })
+    }
+  }
+}
+</script>
+<style lang="scss">
+.reoprtManager {
+  padding-left: 16px;
+  padding-top: 8px;
+  display: flex;
+  flex-flow: row wrap;
+  height: calc(100vh - 210px);
+  align-content: flex-start;
+  overflow: auto;
+  .report {
+    width: 768px;
+    height: 456px;
+    background: #fff;
+    border-radius: 4px;
+    margin: 0 16px 16px 0;
+    position: relative;
+    .imgBox {
+      display: inline-block;
+      width: 480px;
+      height: 100%;
+      padding: 80px 0 0 80px;
+    }
+    .numBox {
+      position: absolute;
+      display: inline-block;
+      height: 100%;
+      top: 120px;
+    }
+  }
+  .reportDesc {
+    width: 376px;
+    height: 456px;
+    background: #fff;
+    border-radius: 4px;
+    text-align: center;
+    padding-top: 120px;
+    margin: 0 16px 16px 0;
+  }
+  .reportNum {
+    .num {
+      display: inline-block;
+      font-size: 80px;
+      font-weight: 600;
+      color: #161616;
+      margin-right: 36px;
+    }
+    .text {
+      display: inline-block;
+      .font {
+        font-size: 18px;
+        letter-spacing: 2px;
+        margin-bottom: 5px;
+      }
+      .letter {
+        font-size: 32px;
+        font-weight: 300;
+      }
+    }
+  }
+  .detail {
+    width: 200px;
+    height: 30px;
+    font-size: 14px;
+    line-height: 30px;
+    text-align: center;
+    color: #fff;
+    background: #0b58ff;
+    border-radius: 4px;
+    margin: 139px auto 0;
+    cursor: pointer;
+  }
+}
+</style>

src/views/basicConfig/reportManagement/reportListDetail.vue

@@ -0,0 +1,215 @@
+<template>
+  <div class="report-classification">
+    <search-bar
+      :formConfigs="formConfig"
+      ref="searchBarForm"
+      @headBtnClick="buttonClick"
+    />
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-props="tableProps"
+      :table-data="tableData"
+      :max-height="tableH"
+    >
+      <method-btn
+        v-if="tableBtn.length"
+        slot="handleBtn"
+        :width="180"
+        label="操作"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      :total="total"
+      @pagination="getList()"
+    />
+    <!-- 编辑 -->
+    <base-dialog
+      :dialogTitle="addOrEditTitle"
+      :dialogVisible="centervisible"
+      @cancel="handleCancel"
+      @confirm="handleConfirm"
+      :before-close="handleCancel"
+    >
+      <report-name-edit ref="reportNameEdit" @successSubmit="successSubmit" />
+    </base-dialog>
+  </div>
+</template>
+<script>
+import { tableHeight } from '@/utils/index'
+import ReportNameEdit from './../components/reportNameEdit.vue'
+const tableProps = [
+  {
+    prop: 'name',
+    label: '报表名称'
+  },
+  {
+    prop: 'type',
+    label: '报表分类'
+  },
+  {
+    prop: 'time',
+    label: '添加时间'
+  }
+]
+const tableBtn = [
+  {
+    type: 'view',
+    btnName: '预览'
+  },
+  {
+    type: 'design',
+    btnName: '设计'
+  },
+  {
+    type: 'edit',
+    btnName: '编辑'
+  },
+  {
+    type: 'delete',
+    btnName: '删除'
+  }
+]
+export default {
+  name: 'ReportListDetail',
+  components: { ReportNameEdit },
+  data() {
+    return {
+      formConfig: [
+        {
+          type: 'input',
+          label: '关键字',
+          placeholder: '报表名称',
+          param: 'name',
+          width: 300
+        },
+        {
+          type: 'button',
+          btnName: '查询',
+          name: 'search',
+          color: 'primary'
+        },
+        {
+          type: 'separate'
+        },
+        {
+          type: 'button',
+          btnName: '新增',
+          name: 'add',
+          color: 'success',
+          plain: true
+        }
+      ],
+      tableProps,
+      tableData: [],
+      tableBtn,
+      tableH: tableHeight(330),
+      total: 0,
+      listQuery: {
+        current: 1,
+        size: 20
+      },
+      centervisible: false,
+      addOrEditTitle: '' //新增编辑弹出框的title
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', () => {
+      this.tableH = tableHeight(265)
+    })
+    this.getList()
+  },
+  methods: {
+    getList() {
+      let arr = []
+      for (let i = 0; i < 30; i++) {
+        let obj = {}
+        obj.name = '名称' + i
+        obj.type = '分类' + i
+        obj.time = '2023-2-8 13:59:59'
+        obj.id = i + 1
+        arr.push(obj)
+      }
+      this.tableData = arr
+      this.total = 30
+    },
+    handleClick(val) {
+      switch (val.type) {
+        case 'view':
+          this.$router.push({
+            path: '/basicConfig/reportManagement/reportView'
+          })
+          break
+        case 'design':
+          this.$router.push({
+            path: '/basicConfig/reportManagement/reportDesign'
+          })
+          break
+        case 'edit':
+          this.addOrEditTitle = '编辑'
+          this.centervisible = true
+          this.$nextTick(() => {
+            this.$refs.reportNameEdit.init(val.data.id)
+          })
+          break
+        default:
+          this.$confirm('确认删除报表"' + val.data.name + '"吗？', {
+            type: 'warning'
+          })
+            .then(() => {
+              // maintainManageDelete({ id: val.data.id }).then((res) => {
+              //   console.log(res)
+              //   this.$message({
+              //     message: '工单删除成功',
+              //     type: 'success',
+              //     duration: 1500,
+              //     onClose: () => {}
+              //   })
+              //   this.listQuery.current = 1
+              //   this.getList()
+              // })
+            })
+            .catch(() => {})
+      }
+    },
+    buttonClick(val) {
+      switch (val.btnName) {
+        case 'search':
+          this.listQuery.name = val.name
+          this.listQuery.current = 1
+          this.getList()
+          break
+        default:
+          this.$router.push({
+            path: '/basicConfig/reportManagement/reportDesign'
+          })
+      }
+    },
+    handleCancel() {
+      this.$refs.reportNameEdit.formClear()
+      this.centervisible = false
+      this.addOrEditTitle = ''
+    },
+    handleConfirm() {
+      this.$refs.reportNameEdit.submitForm()
+    },
+    successSubmit() {
+      this.handleCancel()
+      this.getList()
+    }
+  }
+}
+</script>
+<style lang="scss">
+.report-classification {
+  height: calc(100vh - 203px);
+  padding: 12px 16px;
+  margin: 0px 16px;
+  border-radius: 8px;
+  background-color: #fff;
+}
+</style>

src/views/basicConfig/reportManagement/reportView.vue

@@ -0,0 +1,8 @@
+<template>
+  <div>预览</div>
+</template>
+<script>
+export default {
+  name: 'reportView'
+}
+</script>

src/views/consumablesManagement/components/alarmAdd.vue

@@ -64,18 +64,20 @@ export default {
     }
   },
   methods: {
-    init() {
-      console.log('init')
-    },
     selectLine(val) {
       this.form.proLineId = val
       setAlarmValueGet({ id: val }).then((res) => {
-        this.form.adsorptionPadCeiling = res.data.adsorptionPadCeiling
+        if (res.code === 0 && res.data) {
-          ? res.data.adsorptionPadCeiling
+          this.form.adsorptionPadCeiling = res.data.adsorptionPadCeiling
-          : null
+            ? res.data.adsorptionPadCeiling
-        this.form.auxiliaryFrameCeiling = res.data.auxiliaryFrameCeiling
+            : 0
-          ? res.data.auxiliaryFrameCeiling
+          this.form.auxiliaryFrameCeiling = res.data.auxiliaryFrameCeiling
-          : null
+            ? res.data.auxiliaryFrameCeiling
+            : 0
+        } else {
+          this.form.adsorptionPadCeiling = 0
+          this.form.auxiliaryFrameCeiling = 0
+        }
       })
     },
     submitForm() {

src/views/consumablesManagement/inAndOutManagement.vue

@@ -12,6 +12,7 @@
       :table-props="tableProps"
       :table-data="tableData"
       :max-height="tableH"
+      :row-class-name="tableRowClassName"
     >
       <method-btn
         v-if="tableBtn.length"
@@ -297,6 +298,12 @@ export default {
           })
       }
     },
+    tableRowClassName({ row }) {
+      if (row.flag && row.flag > 0) {
+        return 'danger-row'
+      }
+      return ''
+    },
     handleCancel() {
       this.$refs.inAndOutManagementAdd.formClear()
       this.addAndEdit = ''

src/views/consumablesManagement/materialTracking.vue

@@ -141,9 +141,6 @@ export default {
         this.getList()
       } else {
         this.centervisible = true
-        this.$nextTick(() => {
-          this.$refs.alarmAdd.init()
-        })
       }
     },
     tableRowClassName({ row }) {

src/views/deviceManagement/components/deviceOeeLine.vue

@@ -14,6 +14,15 @@ import resize from '@/utils/chartMixins/resize'
 export default {
   name: 'deviceOeeLine',
   mixins: [resize],
+  props: {
+    chartMsg: {
+      type: Array,
+      required: true,
+      default: () => {
+        return []
+      }
+    }
+  },
   data() {
     return {
       chartDom: '',
@@ -22,15 +31,48 @@ export default {
     }
   },
   mounted() {
-    this.chartDom = document.getElementById('main')
+    this.$nextTick(() => {
-    this.chart = echarts.init(this.chartDom)
+      this.getChart()
-    this.getChart()
+    })
     window.addEventListener('resize', () => {
       this.chartHeight = tableHeight(214) / 2 - 35
     })
   },
+  watch: {
+    chartMsg: function () {
+      this.getChart()
+    }
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
   methods: {
     getChart() {
+      if (
+        this.chart !== null &&
+        this.chart !== '' &&
+        this.chart !== undefined
+      ) {
+        this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
+      }
+      this.chartDom = document.getElementById('main')
+      this.chart = echarts.init(this.chartDom)
+      let dateList = []
+      let activationList = []
+      let performanceList = []
+      let failurePercentList = []
+      let combinedEfficiencyList = []
+      for (let i = 0; i < this.chartMsg.length; i++) {
+        dateList.push(new Date(this.chartMsg[i].date).getDate())
+        activationList.push(this.chartMsg[i].activation)
+        performanceList.push(this.chartMsg[i].performance)
+        failurePercentList.push(this.chartMsg[i].failurePercent)
+        combinedEfficiencyList.push(this.chartMsg[i].combinedEfficiency)
+      }
       var option = {
         color: ['#5B8FF9', '#5AD8A6', '#5D7092', '#F6BD16'],
         tooltip: {
@@ -49,7 +91,7 @@ export default {
         xAxis: {
           type: 'category',
           boundaryGap: false,
-          data: ['1', '2', '3', '4', '5', '6', '7']
+          data: dateList
         },
         yAxis: {
           type: 'value'
@@ -59,25 +101,25 @@ export default {
             name: '时间开动率',
             type: 'line',
             stack: 'Total',
-            data: [120, 132, 101, 134, 90, 230, 210]
+            data: activationList
           },
           {
             name: '性能开动率',
             type: 'line',
             stack: 'Total',
-            data: [220, 182, 191, 234, 290, 330, 310]
+            data: performanceList
           },
           {
             name: '设备故障率',
             type: 'line',
             stack: 'Total',
-            data: [150, 232, 201, 154, 190, 330, 410]
+            data: failurePercentList
           },
           {
             name: '综合效率',
             type: 'line',
             stack: 'Total',
-            data: [320, 332, 301, 334, 390, 330, 320]
+            data: combinedEfficiencyList
           }
         ]
       }

src/views/deviceManagement/components/productPowerEdit.vue

@@ -1,98 +1,168 @@
 <template>
-  <el-form ref="form" :rules="rules" label-width="110px" :model="form">
+  <el-form ref="form" label-width="110px" :model="form">
     <el-row :gutter="20">
       <el-col :span="12">
-        <el-form-item label="1月" prop="a">
+        <el-form-item label="1月" prop="january">
-          <el-input v-model="form.a" placeholder="请输入计划产能"></el-input>
+          <el-input-number
+            v-model="form.january"
+            :min="0"
+            style="width: 300px"
+          ></el-input-number>
         </el-form-item>
       </el-col>
       <el-col :span="12">
-        <el-form-item label="2月" prop="b">
+        <el-form-item label="2月" prop="february">
-          <el-input v-model="form.b" placeholder="请输入计划产能"></el-input>
+          <el-input-number
+            v-model="form.february"
+            :min="0"
+            style="width: 300px"
+          ></el-input-number>
         </el-form-item>
       </el-col>
     </el-row>
     <el-row :gutter="20">
       <el-col :span="12">
-        <el-form-item label="3月" prop="c">
+        <el-form-item label="3月" prop="march">
-          <el-input v-model="form.c" placeholder="请输入计划产能"></el-input>
+          <el-input-number
+            v-model="form.march"
+            :min="0"
+            style="width: 300px"
+          ></el-input-number>
         </el-form-item>
       </el-col>
       <el-col :span="12">
-        <el-form-item label="4月" prop="d">
+        <el-form-item label="4月" prop="april">
-          <el-input v-model="form.d" placeholder="请输入计划产能"></el-input>
+          <el-input-number
+            v-model="form.april"
+            :min="0"
+            style="width: 300px"
+          ></el-input-number>
         </el-form-item>
       </el-col>
     </el-row>
     <el-row :gutter="20">
       <el-col :span="12">
-        <el-form-item label="5月" prop="e">
+        <el-form-item label="5月" prop="may">
-          <el-input v-model="form.e" placeholder="请输入计划产能"></el-input>
+          <el-input-number
+            v-model="form.may"
+            :min="0"
+            style="width: 300px"
+          ></el-input-number>
         </el-form-item>
       </el-col>
       <el-col :span="12">
-        <el-form-item label="6月" prop="f">
+        <el-form-item label="6月" prop="june">
-          <el-input v-model="form.f" placeholder="请输入计划产能"></el-input>
+          <el-input-number
+            v-model="form.june"
+            :min="0"
+            style="width: 300px"
+          ></el-input-number>
         </el-form-item>
       </el-col>
     </el-row>
     <el-row :gutter="20">
       <el-col :span="12">
-        <el-form-item label="7月" prop="g">
+        <el-form-item label="7月" prop="july">
-          <el-input v-model="form.g" placeholder="请输入计划产能"></el-input>
+          <el-input-number
+            v-model="form.july"
+            :min="0"
+            style="width: 300px"
+          ></el-input-number>
         </el-form-item>
       </el-col>
       <el-col :span="12">
-        <el-form-item label="8月" prop="h">
+        <el-form-item label="8月" prop="august">
-          <el-input v-model="form.h" placeholder="请输入计划产能"></el-input>
+          <el-input-number
+            v-model="form.august"
+            :min="0"
+            style="width: 300px"
+          ></el-input-number>
         </el-form-item>
       </el-col>
     </el-row>
     <el-row :gutter="20">
       <el-col :span="12">
-        <el-form-item label="9月" prop="i">
+        <el-form-item label="9月" prop="september">
-          <el-input v-model="form.i" placeholder="请输入计划产能"></el-input>
+          <el-input-number
+            v-model="form.september"
+            :min="0"
+            style="width: 300px"
+          ></el-input-number>
         </el-form-item>
       </el-col>
       <el-col :span="12">
-        <el-form-item label="10月" prop="j">
+        <el-form-item label="10月" prop="october">
-          <el-input v-model="form.j" placeholder="请输入计划产能"></el-input>
+          <el-input-number
+            v-model="form.october"
+            :min="0"
+            style="width: 300px"
+          ></el-input-number>
         </el-form-item>
       </el-col>
     </el-row>
     <el-row :gutter="20">
       <el-col :span="12">
-        <el-form-item label="11月" prop="k">
+        <el-form-item label="11月" prop="november">
-          <el-input v-model="form.k" placeholder="请输入计划产能"></el-input>
+          <el-input-number
+            v-model="form.november"
+            :min="0"
+            style="width: 300px"
+          ></el-input-number>
         </el-form-item>
       </el-col>
       <el-col :span="12">
-        <el-form-item label="12月" prop="l">
+        <el-form-item label="12月" prop="december">
-          <el-input v-model="form.l" placeholder="请输入计划产能"></el-input>
+          <el-input-number
+            v-model="form.december"
+            :min="0"
+            style="width: 300px"
+          ></el-input-number>
         </el-form-item>
       </el-col>
     </el-row>
   </el-form>
 </template>
 <script>
+import {
+  performanceAnalysisPlan,
+  performanceUpdatePlan
+} from '@/api/deviceManagement'
 export default {
   name: 'productPowerEdit',
   data() {
     return {
-      form: {
+      form: {}
-        a: '',
+    }
-        b: '',
+  },
-        c: '',
+  mounted() {},
-        d: '',
+  methods: {
-        e: '',
+    init(param) {
-        f: '',
+      let date = new Date(param.timePosition)
-        g: '',
+      let year = date.getFullYear()
-        h: '',
+      performanceAnalysisPlan({
-        i: '',
+        name: param.name,
-        j: '',
+        year: year
-        k: '',
+      }).then((res) => {
-        l: ''
+        console.log(res)
-      }
+        if (res.code === 0 && !!res.data) {
+          this.form = res.data
+        }
+      })
+    },
+    submitForm() {
+      performanceUpdatePlan({ ...this.form }).then((res) => {
+        if (res.code === 0) {
+          this.$message({
+            message: '操作成功',
+            type: 'success',
+            duration: 1500
+          })
+          this.$emit('successSubmit')
+        }
+      })
+    },
+    formClear() {
+      this.$refs.form.resetFields()
     }
   }
 }

src/views/deviceManagement/performanceAnalysis/analysisOfPallet.vue

@@ -55,7 +55,7 @@ import { tableHeight } from '@/utils/index'
 import palletLevelChart from './../components/palletLevelChart.vue'
 import {
   palletIndicatorAnalysisPage,
-  palletIndicatorAnalysisType
+  palletIndicatorGetType
 } from '@/api/deviceManagement'
 import { timeFormatter } from '@/utils'
 const tableProps = [
@@ -159,7 +159,8 @@ export default {
       ],
       listQuery: {
         current: 1,
-        size: 20
+        size: 20,
+        palletId: ''
       },
       total: 0,
       tableProps,
@@ -200,7 +201,7 @@ export default {
     },
     getLevel() {
       // 需要修改ID
-      palletIndicatorAnalysisType({ id: 1 }).then((res) => {
+      palletIndicatorGetType({ id: 1 }).then((res) => {
         this.tableData2 = []
         if (res.code === 0) {
           const data = res.data

src/views/deviceManagement/performanceAnalysis/devicePage.vue

@@ -5,10 +5,12 @@
         <div class="left-box">
           <el-tree
             :data="treeData"
-            node-key="id"
+            node-key="name"
             :props="defaultTime"
             default-expand-all
+            :highlight-current="true"
             @node-click="clickDevice"
+            ref="deviceTree"
           >
           </el-tree>
         </div>
@@ -38,7 +40,7 @@
               <el-col :span="6">
                 <div class="top-right">
                   <div>
-                    <span class="title">xx单元计划产能</span>
+                    <span class="title">{{ unitName }}单元计划产能</span>
                     <svg-icon
                       icon-class="device_edit"
                       class="icon-style"
@@ -69,7 +71,7 @@
         <el-row :gutter="10">
           <el-col :span="24">
             <div class="right-bottom">
-              <device-oee-line />
+              <device-oee-line ref="oeeLine" :chartMsg="tableData" />
             </div>
           </el-col>
         </el-row>
@@ -83,13 +85,13 @@
       @confirm="handleConfirm"
       :before-close="handleCancel"
     >
-      <product-power-edit ref="product-power" @successSubmit="successSubmit" />
+      <product-power-edit ref="productPower" @successSubmit="successSubmit" />
     </base-dialog>
   </div>
 </template>
 <script>
 import { getTreeData } from '@/api/app'
-import { tableHeight } from '@/utils/index'
+import { tableHeight, timeFormatter } from '@/utils/index'
 import {
   performanceAnalysisGet,
   performanceAnalysisPlan
@@ -98,64 +100,65 @@ import productPowerEdit from './../components/productPowerEdit.vue'
 import deviceOeeLine from './../components/deviceOeeLine.vue'
 const tableProps = [
   {
-    prop: 'startTime',
+    prop: 'date',
     label: '时间',
-    minWidth: 90
+    minWidth: 160,
+    filter: timeFormatter
   },
   {
-    prop: 'endTime',
+    prop: 'operationHours',
     label: '开动时长(h)',
     minWidth: 100
   },
   {
-    prop: 'inputNum',
+    prop: 'loadHours',
     label: '负荷时长(h)',
     minWidth: 100
   },
   {
-    prop: 'outputNum7',
+    prop: 'actualCapacity',
     label: '实际产能',
     minWidth: 90
   },
   {
-    prop: 'lossesNum6',
+    prop: 'planCountDay',
     label: '设计产能',
     minWidth: 90
   },
   {
-    prop: 'lossesNum5',
+    prop: 'activation',
     label: '时间开动率',
     minWidth: 100
   },
   {
-    prop: 'lossesNum4',
+    prop: 'performance',
     label: '性能开动率',
     minWidth: 100
   },
   {
-    prop: 'lossesNum3',
+    prop: 'combinedEfficiency',
     label: '综合效率OEE',
     minWidth: 110
   },
   {
-    prop: 'lossesNum2',
+    prop: 'failureHours',
     label: '故障时长',
     minWidth: 90
   },
   {
-    prop: 'lossesNum1',
+    prop: 'failurePercent',
     label: '设备故障率',
     minWidth: 100
   }
 ]
 const tableProps2 = [
   {
-    prop: 'startTime',
+    prop: 'month',
     label: '月份',
-    width: 50
+    width: 60
   },
   {
-    prop: 'endTime',
+    prop: 'value',
     label: '设计产能',
     minWidth: 80
   }
@@ -169,6 +172,7 @@ export default {
         children: 'children',
         label: 'name'
       },
+      unitName: '',
       chooseMonth: '',
       formConfig: [
         {
@@ -178,7 +182,8 @@ export default {
           format: 'yyyy-MM',
           valueFormat: 'yyyy-MM',
           placeholder: '月份选择',
-          param: 'testTime',
+          param: 'timePosition',
+          defaultSelect: '',
           width: 200
         },
         {
@@ -190,7 +195,9 @@ export default {
       ],
       listQuery: {
         current: 1,
-        size: 500
+        size: 500,
+        timePosition: '',
+        name: ''
       },
       tableProps,
       tableData: [],
@@ -206,61 +213,106 @@ export default {
     window.addEventListener('resize', () => {
       this.tableH = tableHeight(214) / 2 - 75
     })
+    this.setDefaultVal()
     this.getTree()
-    this.getList()
-    for (let i = 0; i < 30; i++) {
-      let obj = {}
-      obj.startTime = i
-      this.tableData.push(obj)
-    }
-    let arr = []
-    for (let i = 1; i < 13; i++) {
-      let obj = {}
-      obj.endTime = i
-      arr.push(obj)
-    }
-    this.tableData2 = arr.slice(0, 6)
-    this.tableData3 = arr.slice(6, 12)
   },
   methods: {
+    setDefaultVal() {
+      let date = new Date()
+      let year = date.getFullYear()
+      let month =
+        date.getMonth() + 1 < 10
+          ? '0' + (date.getMonth() + 1)
+          : date.getMonth() + 1
+      this.formConfig[0].defaultSelect = year + '-' + month
+      this.listQuery.timePosition = year + '-' + month
+    },
     getTree() {
       getTreeData().then((res) => {
         this.treeData = res.data
+        this.unitName = res.data[0].children[0].name
+        this.listQuery.name = this.unitName
+        setTimeout(() => {
+          this.$refs.deviceTree.setCurrentKey(this.unitName)
+        }, 100)
+        this.getList()
+        this.getPlan()
       })
     },
     getList() {
       // 获取设备OEE
       performanceAnalysisGet({ ...this.listQuery }).then((res) => {
-        console.log(res)
+        if (res.code === 0) {
+          this.tableData = res.data
+        }
       })
+      this.$refs.oeeLine.getChart()
     },
     buttonClick(val) {
-      console.log(val)
+      if (val.btnName === 'search') {
+        this.listQuery.timePosition = val.timePosition
+        this.getList()
+        this.getPlan()
+      }
     },
     getPlan() {
       // 获取计划产能
-      performanceAnalysisPlan({ name: '精切磨边', year: '2022' }).then(
+      let date = new Date(this.listQuery.timePosition)
+      let year = date.getFullYear()
+      performanceAnalysisPlan({ name: this.unitName, year: year }).then(
         (res) => {
           console.log(res)
+          if (res.code === 0 && !!res.data) {
+            let obj = res.data
+            let arr = [
+              { month: '1月', value: '', type: 'january' },
+              { month: '2月', value: '', type: 'february' },
+              { month: '3月', value: '', type: 'march' },
+              { month: '4月', value: '', type: 'april' },
+              { month: '5月', value: '', type: 'may' },
+              { month: '6月', value: '', type: 'june' },
+              { month: '7月', value: '', type: 'july' },
+              { month: '8月', value: '', type: 'august' },
+              { month: '9月', value: '', type: 'september' },
+              { month: '10月', value: '', type: 'october' },
+              { month: '11月', value: '', type: 'november' },
+              { month: '12月', value: '', type: 'december' }
+            ]
+            for (let i = 0; i < arr.length; i++) {
+              arr[i].value = obj[arr[i].type]
+            }
+            this.tableData2 = arr.slice(0, 6)
+            this.tableData3 = arr.slice(6, 12)
+          }
         }
       )
     },
     clickDevice(val) {
-      console.log(val)
+      if (val.children && val.parent) {
-      if (!val.children) {
+        // 单元
-        console.log(val.children)
+        this.listQuery.name = val.name
+        this.unitName = val.name
+        this.getList()
+        this.getPlan()
       }
     },
     editPower() {
       this.centervisible = true
+      this.$nextTick(() => {
+        this.$refs.productPower.init(this.listQuery)
+      })
     },
     handleCancel() {
+      this.$refs.productPower.formClear()
       this.centervisible = false
     },
     handleConfirm() {
-      this.centervisible = false
+      this.$refs.productPower.submitForm()
     },
-    successSubmit() {}
+    successSubmit() {
+      this.handleCancel()
+      this.getPlan()
+    }
   }
 }
 </script>
@@ -268,7 +320,11 @@ export default {
 .main-box {
   width: 100%;
   padding: 0px 6px 0 16px;
-  .left-box,
+  .left-box {
+    padding-top: 16px;
+    border-radius: 8px;
+    background-color: #fff;
+  }
   .top-left,
   .top-right,
   .right-bottom {

src/views/qualityManagement/processFullInspection/particleLineChart.vue

@@ -14,7 +14,7 @@
 import * as echarts from 'echarts'
 import { tableHeight } from '@/utils/index'
 import resize from '@/utils/chartMixins/resize'
-import { getProcessFull } from '@/api/qualityManagement'
+// import { getProcessFull } from '@/api/qualityManagement'
 import moment from 'moment'
 export default {
   name: 'particleLineChart',
@@ -49,12 +49,8 @@ export default {
       chartDom: '',
       chart: '',
       chartHeight: tableHeight(320),
-      listQuery: {
+      checkOutTime: '',
-        size: 1000,
+      maxLine: ''
-        current: 1,
-        checkOutTime: '',
-        maxLine: ''
-      }
     }
   },
   mounted() {
@@ -63,15 +59,15 @@ export default {
     window.addEventListener('resize', () => {
       this.chartHeight = tableHeight(320)
     })
-    this.formConfig[0].defaultSelect = moment().format('YYYY-MM-DDTHH:mm:ss')
+    this.formConfig[0].defaultSelect = moment().format('YYYY-MM-DD HH:mm:ss')
     this.getMsg()
   },
   methods: {
     buttonClick(val) {
       console.log(val)
       if (val.btnName === 'search') {
-        this.listQuery.checkOutTime = val.checkOutTime
+        this.checkOutTime = val.checkOutTime
-        this.listQuery.maxLine = val.maxLine
+        this.maxLine = val.maxLine
         this.getMsg()
       }
     },
@@ -83,29 +79,44 @@ export default {
       let xlList = []
       let sumList = []
       let msg = {}
-      getProcessFull({ ...this.listQuery }).then((res) => {
+      for (let i = 0; i < 1000; i++) {
-        console.log(res)
+        time.push(moment().add(i, 'days').format('YYYY-MM-DD HH:mm:ss'))
-        if (res.code === 0 && res.data.length > 0) {
+        sList.push(Math.floor(Math.random() * 80 + 10))
-          res.data.map((item) => {
+        mList.push(Math.floor(Math.random() * 100 + 20))
-            console.log(item)
+        lList.push(Math.floor(Math.random() * 130 + 30))
-            time.push(moment(item.hour).format('MM-DD HH:mm:ss'))
+        xlList.push(Math.floor(Math.random() * 150 + 40))
-            sList.push(item.s)
+        sumList.push(sList[i] + mList[i] + lList[i] + xlList[i])
-            mList.push(item.m)
+      }
-            lList.push(item.l)
+      msg.time = time
-            xlList.push(item.xl)
+      msg.sList = sList
-            sumList.push(item.sum)
+      msg.mList = mList
-          })
+      msg.lList = lList
-          msg.time = time
+      msg.xlList = xlList
-          msg.sList = sList
+      msg.sumList = sumList
-          msg.mList = mList
+      this.getChart(msg)
-          msg.lList = lList
+      // getProcessFull({ checkOutTime: this.checkOutTime }).then((res) => {
-          msg.xlList = xlList
+      //   console.log(res)
-          msg.sumList = sumList
+      //   if (res.code === 0 && res.data.length > 0) {
-          this.getChart(msg)
+      //     res.data.map((item) => {
-        }
+      //       console.log(item)
-      })
+      //       time.push(moment(item.hour).format('MM-DD HH:mm:ss'))
+      //       sList.push(item.s)
+      //       mList.push(item.m)
+      //       lList.push(item.l)
+      //       xlList.push(item.xl)
+      //       sumList.push(item.sum)
+      //     })
+      //     msg.time = time
+      //     msg.sList = sList
+      //     msg.mList = mList
+      //     msg.lList = lList
+      //     msg.xlList = xlList
+      //     msg.sumList = sumList
+      //     this.getChart(msg)
+      //   }
+      // })
     },
-    getChart(msg) {
+    getChart1(msg) {
       var option = {
         color: ['#5AD8A6', '#5B8FF9', '#5D7092', '#F6BD16', '#E8684A'],
         title: {
@@ -141,7 +152,7 @@ export default {
               Symbol: 'none',
               label: {
                 position: 'end',
-                formatter: '合格线\n' + this.listQuery.maxLine
+                formatter: '合格线\n' + this.maxLine
               },
               data: [
                 {
@@ -150,7 +161,92 @@ export default {
                     type: 'dashed',
                     color: '#0B58FF'
                   },
-                  yAxis: this.listQuery.maxLine
+                  yAxis: this.maxLine
+                }
+              ]
+            }
+          },
+          {
+            name: 'M',
+            type: 'line',
+            data: msg.mList
+          },
+          {
+            name: 'L',
+            type: 'line',
+            data: msg.lList
+          },
+          {
+            name: 'S',
+            type: 'line',
+            data: msg.sList
+          },
+          {
+            name: 'XL',
+            type: 'line',
+            data: msg.xlList
+          }
+        ]
+      }
+
+      option && this.chart.setOption(option)
+    },
+    getChart(msg) {
+      console.log(msg)
+      var option = {
+        color: ['#5AD8A6', '#5B8FF9', '#5D7092', '#F6BD16', '#E8684A'],
+        title: {
+          text: '时间段玻璃颗粒数',
+          left: '1%'
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          data: ['Total', 'M', 'L', 'S', 'XL'],
+          right: '4%'
+        },
+        grid: {
+          left: '4%',
+          right: '4%',
+          bottom: '10%'
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: msg.time
+        },
+        yAxis: {
+          type: 'value'
+        },
+        dataZoom: [
+          {
+            startValue: '2023-02-014'
+          },
+          {
+            type: 'inside'
+          }
+        ],
+        series: [
+          {
+            name: 'Total',
+            type: 'line',
+            data: msg.sumList,
+            markLine: {
+              show: false,
+              Symbol: 'none',
+              label: {
+                position: 'end',
+                formatter: '合格线\n' + this.maxLine
+              },
+              data: [
+                {
+                  silent: false,
+                  lineStyle: {
+                    type: 'dashed',
+                    color: '#0B58FF'
+                  },
+                  yAxis: this.maxLine
                 }
               ]
             }

vue.config.js

@@ -11,7 +11,7 @@ module.exports = defineConfig({
     proxy: {
       '/api': {
         target: 'http://tft.mes.picaiba.com/api',
-        // target: 'http://192.168.1.94:8080/api',
+        // target: 'http://192.168.1.22:8080/api',
         ws: true,
         changeOrigin: true,
         pathRewrite: {