huatao-spc-ui/src/views/home/Indexbark.vue

<template>
  <div>
    <ContentWrap class="search">
      <el-form
        :inline="true"
        :model="queryParams"
        class="demo-form-inline"
        style="margin-bottom: -17px"
      >
        <el-form-item label="" label-width="0px" style="width: calc(20% - 32px)">
          <el-select
            v-model="queryParams.project"
            placeholder="请选择项目"
            clearable
            style="width: 100%"
          >
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="" label-width="0px" style="width: calc(20% - 32px)">
          <el-input
            v-model="queryParams.code"
            placeholder="请输入物料编号"
            clearable
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="" label-width="0px" style="width: calc(20% - 32px)">
          <el-select
            v-model="queryParams.type"
            placeholder="请选择检测类型"
            clearable
            style="width: 100%"
          >
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="" label-width="0px" style="width: calc(20% - 32px)">
          <el-input
            v-model="queryParams.content"
            placeholder="请输入检测内容"
            clearable
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="" label-width="0px" style="width: calc(20% - 32px)">
          <el-date-picker
            v-model="queryParams.date"
            type="date"
            placeholder="请选择日期"
            clearable
          />
        </el-form-item>
      </el-form>
    </ContentWrap>
    <ContentWrap class="search">
      <div class="title">制程能力指数（CPK）</div>
      <div class="cpk">
        <div class="cpk-item">
          <div class="cpk-item-1">
            <div class="cpk-item-label">CP</div>
            <div class="cpk-item-value">0.25</div>
          </div>
          <div class="cpk-item-1">
            <div class="cpk-item-label">CPK</div>
            <div class="cpk-item-value">0.11</div>
          </div>
        </div>
        <div class="cpk-item">
          <div class="cpk-item-1">
            <div class="cpk-item-label">CP</div>
            <div class="cpk-item-value">0.25</div>
          </div>
          <div class="cpk-item-1">
            <div class="cpk-item-label">CPK</div>
            <div class="cpk-item-value">0.11</div>
          </div>
        </div>
        <div class="cpk-item1">
          <div class="cpk-item-2">
            <div class="cpk-item-label"><span>零件号</span> <span>1662525525</span></div>
            <div class="cpk-item-label"><span>检测内容</span> <span>25+0.6 G10</span></div>
          </div>
          <div class="cpk-item-2">
            <div class="cpk-item-label"><span>公差下限</span> <span>24.4</span></div>
            <div class="cpk-item-label"><span>公差上限</span> <span>25.6</span></div>
          </div>
          <div class="cpk-item-2">
            <div class="cpk-item-label"><span>X中值</span> <span>24.4</span></div>
            <div class="cpk-item-label"><span>R中值</span> <span>1.88</span></div>
          </div>
          <div class="cpk-item-2">
            <div class="cpk-item-label"><span>UCLx</span> <span>25.66666</span></div>
            <div class="cpk-item-label"><span>UCLx</span> <span>23.55555</span></div>
          </div>
          <div class="cpk-item-2">
            <div class="cpk-item-label"><span>LCLrc</span> <span>25.66666</span></div>
            <div class="cpk-item-label"><span>LCLrc</span> <span>0</span></div>
          </div>
        </div>
      </div>
      <table border="1" width="100%" align="center" border-collapse="collapse">
        <tr class="td-bg">
          <td colspan="2">样本</td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
          <td>6</td>
          <td>7</td>
          <td>8</td>
          <td>9</td>
          <td>10</td>
          <td>12</td>
          <td>13</td>
          <td>14</td>
          <td>15</td>
          <td>16</td>
          <td>17</td>
          <td>18</td>
          <td>19</td>
          <td>20</td>
          <td>21</td>
          <td>22</td>
          <td>23</td>
          <td>24</td>
          <td>25</td>
        </tr>
        <tr>
          <td rowspan="8" class="td-bg">检测记录</td>
          <td class="td-bg">1</td>
          <td>24</td>
          <td>25</td>
          <td>24</td>
          <td>24</td>
          <td>24</td>
          <td>24</td>
        </tr>
        <tr>
          <td class="td-bg">2</td>
          <td>24</td>
          <td>25</td>
          <td>24</td>
          <td>24</td>
          <td>24</td>
          <td>24</td>
        </tr>
        <tr>
          <td class="td-bg">3</td>
          <td>24</td>
          <td>25</td>
          <td>24</td>
          <td>24</td>
          <td>24</td>
          <td>24</td>
        </tr>
        <tr>
          <td class="td-bg">4</td>
          <td>24</td>
          <td>25</td>
          <td>24</td>
          <td>24</td>
          <td>24</td>
          <td>24</td>
        </tr>
        <tr>
          <td class="td-bg">5</td>
          <td>24</td>
          <td>25</td>
          <td>24</td>
          <td>24</td>
          <td>24</td>
          <td>24</td>
        </tr>
        <tr>
          <td class="td-bg">合计值</td>
          <td>24</td>
          <td>25</td>
          <td>24</td>
          <td>24</td>
          <td>24</td>
          <td>24</td>
        </tr>
        <tr>
          <td class="td-bg">平均值</td>
          <td>24</td>
          <td>25</td>
          <td>24</td>
          <td>24</td>
          <td>24</td>
          <td>24</td>
        </tr>
        <tr>
          <td class="td-bg">极差值</td>
          <td>24</td>
          <td>25</td>
          <td>24</td>
          <td>24</td>
          <td>24</td>
          <td>24</td>
        </tr>
      </table>
    </ContentWrap>
    <ContentWrap class="search">
      <div class="tabs">
        <div class="title" :class="tabIndex == 0 ? 'active' : ''" @click="tabIndex = 0">控制图</div>
        <div class="title" :class="tabIndex == 1 ? 'active' : ''" @click="tabIndex = 1"
          >CPK分析图</div
        >
        <div class="title" :class="tabIndex == 2 ? 'active' : ''" @click="tabIndex = 2"
          >样本运行图</div
        >
        <div class="title" :class="tabIndex == 3 ? 'active' : ''" @click="tabIndex = 3"
          >均值运行图</div
        >
      </div>
      <div class="charts" v-show="tabIndex == 0">
        <div id="myEcharts1" :style="{ width: '50%', height: '300px' }"></div>
        <div id="myEcharts2" :style="{ width: '50%', height: '300px' }"></div>
      </div>
      <div class="charts" v-show="tabIndex == 1">
        <div id="myEcharts3" :style="{ width: '80vw', height: '300px' }"></div>
      </div>
      <div class="charts" v-show="tabIndex == 2">
        <div id="myEcharts4" :style="{ width: '80vw', height: '300px' }"></div>
      </div>
      <div class="charts" v-show="tabIndex == 3">
        <div id="myEcharts5" :style="{ width: '80vw', height: '300px' }"></div>
      </div>
    </ContentWrap>
  </div>
</template>
<script lang="ts" setup>
import * as echarts from 'echarts'
let echart = echarts
const queryParams = reactive({
  project: '',
  code: '',
  type: '',
  content: '',
  date: ''
})
const tabIndex = ref(0)
// 设置延期未交付数据
function setChart1() {
  let chart = echart.init(document.getElementById('myEcharts1'), 'light')
  // 把配置和数据放这里
  chart.setOption({
    title: {
      text: 'RANGE CHART'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['Highest', 'Lowest'],
      top: '0',
      right: '3%'
    },
    grid: {
      left: '3%',
      right: '4%',
      top: '15%',
      bottom: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: 'Highest',
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line',
        markLine: {
          data: [{ type: 'average', name: 'Avg' }]
        }
      },
      {
        name: 'Lowest',
        data: [344, 23, 56, 88, 95, 54, 45],
        type: 'line'
      }
    ]
  })

  window.onresize = function () {
    //自适应大小
    chart.resize()
  }
}
function setChart2() {
  let chart = echart.init(document.getElementById('myEcharts2'), 'light')
  // 把配置和数据放这里
  chart.setOption({
    title: {
      text: 'RANGE CHART'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['Highest', 'Lowest'],
      top: '0',
      right: '3%'
    },
    grid: {
      left: '3%',
      right: '4%',
      top: '15%',
      bottom: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: 'Highest',
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
      },
      {
        name: 'Lowest',
        data: [344, 23, 56, 88, 95, 54, 45],
        type: 'line'
      }
    ]
  })
  window.onresize = function () {
    //自适应大小
    chart.resize()
  }
}
function setChart3() {
  let chart = echart.init(document.getElementById('myEcharts3'), 'light')
  // 把配置和数据放这里
  chart.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    legend: {
      data: ['Evaporation', 'Precipitation', 'Temperature']
    },
    grid: {
      left: '3%',
      right: '4%',
      top: '15%',
      bottom: '10%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: 'Precipitation',
        min: 0,
        max: 250,
        interval: 50,
        axisLabel: {
          formatter: '{value} ml'
        }
      },
      {
        type: 'value',
        name: 'Temperature',
        min: 0,
        max: 25,
        interval: 5,
        axisLabel: {
          formatter: '{value} °C'
        }
      }
    ],
    series: [
      {
        name: '原数据频率',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + ' ml'
          }
        },
        data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
      },
      {
        name: '正态分布',
        type: 'line',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + ' °C'
          }
        },
        data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
      }
    ]
  })
  window.onresize = function () {
    //自适应大小
    chart.resize()
  }
}
function setChart4() {
  let chart = echart.init(document.getElementById('myEcharts4'), 'light')
  // 把配置和数据放这里
  chart.setOption({
    title: {
      text: '样本运行图'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['Highest', 'Lowest'],
      top: '0',
      right: '3%'
    },
    grid: {
      left: '3%',
      right: '4%',
      top: '15%',
      bottom: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: 'Highest',
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
      },
      {
        name: 'Lowest',
        data: [344, 23, 56, 88, 95, 54, 45],
        type: 'line'
      }
    ]
  })
  window.onresize = function () {
    //自适应大小
    chart.resize()
  }
}
function setChart5() {
  let chart = echart.init(document.getElementById('myEcharts5'), 'light')
  // 把配置和数据放这里
  chart.setOption({
    title: {
      text: '均值运行图'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['Highest', 'Lowest'],
      top: '0',
      right: '3%'
    },
    grid: {
      left: '3%',
      right: '4%',
      top: '15%',
      bottom: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: 'Highest',
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
      },
      {
        name: 'Lowest',
        data: [344, 23, 56, 88, 95, 54, 45],
        type: 'line'
      }
    ]
  })
  window.onresize = function () {
    //自适应大小
    chart.resize()
  }
}
onMounted(async () => {
  setChart1()
  setChart2()
  setChart3()
  setChart4()
  setChart5()
})
</script>
<style lang="scss" scoped>
.search {
  background: white;
}
::v-deep.el-form-item--default .el-form-item__label {
  padding: 0px 20px !important;
  background: rgb(53, 158, 256) !important;
  color: white !important;
}
.title {
  margin-bottom: 20px;
  margin-right: 20px;
}
.cpk {
  display: flex;
  align-items: center;
  .cpk-item {
    display: flex;
    align-items: center;
    width: 10%;
    margin-right: 10px;
    background: rgb(235, 243, 255);
    border: 1px solid rgb(44, 135, 255);
    height: 60px;
    justify-content: center;
    .cpk-item-1 {
      text-align: center;
      margin: 0px 10px;
      .cpk-item-label {
        color: #a8a8a8;
        font-size: 12px;
      }
      .cpk-item-value {
        color: #000000;
        font-size: 16px;
      }
    }
  }
  .cpk-item1 {
    background: rgb(245, 245, 245);
    flex: 1;

    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 60px;
    .cpk-item-2 {
      .cpk-item-label {
        color: #a8a8a8;
        font-size: 12px;
        span {
          &:nth-child(1) {
            width: 60px;
            display: inline-block;
            text-align: right;
            margin-right: 6px;
          }
          &:nth-child(2) {
            margin-right: 6px;
            color: #000;
          }
        }
      }
    }
  }
}
table {
  width: 100%;
  /*居中*/
  margin: 20px auto 0px;
  /*边框*/
  /* border: 1px solid black; */

  border-collapse: collapse;
  /*设置背景颜色*/
  /* background-color: #bfa; */
}

/*
       * 设置边框
       */
td,
th {
  border: 1px solid rgb(200, 200, 200);
  text-align: center;
  font-size: 14px;
}

/*
     * 设置隔行变色
     */
// tbody > tr:nth-child(even) {
//   background-color: #bfa;
// }

/*
     * 鼠标移入到tr以后，改变颜色
     */
// tr:hover {
//   background-color: #ff0;
// }
.td-bg {
  background: rgb(231, 244, 248);
}
.tabs {
  display: flex;
  align-items: center;
  > div {
    height: 30px;
    cursor: pointer;
  }
  .active {
    color: rgb(44, 135, 255);
    font-weight: bold;
    border-bottom: 2px solid rgb(44, 135, 255);
  }
}
.charts {
  display: flex;
  align-content: center;
  justify-content: center;
}
</style>