su

su1124

2024-01-05 cc2b138c0bd76ca2d7424cac350672f89b1c55f7

su

 src/views/picture/music/index.vue

@@ -334,19 +334,19 @@
          </el-form>
          <div class="data-view">
            <div id="main" style="width: 40%; height: 300px"></div>
            <div id="main1" style="width: 40%; height: 300px"></div>
            <!-- <div id="main1" style="width: 40%; height: 300px"></div> -->
            <!-- <div id="main2" style="width: 40%; height: 300px"></div>
            <div id="main3" style="width: 40%; height: 300px"></div> -->
          </div>
          <div class="tanchuangbox_left1">
            <div>
              <div class="nums">
                <span class="nums_txt">500</span>
                <span class="nums_txt">1000</span>
                <span class="nums_txt">2000</span>
                <span class="nums_txt">3000</span>
                <span class="nums_txt">4000</span>
                <span class="nums_txt">6000</span>
                <span
                  class="nums_txt"
                  v-for="(item, index) in yList"
                  :key="index"
                  >{{ item }}</span
                >
              </div>
              <el-form
                :model="queryParams"
@@ -356,13 +356,37 @@
                v-show="showSearch"
                label-width="90px"
              >
                <el-form-item label="实测气导值:" prop="tjNum">
                  <el-input v-model="queryParams.tjNum" style="width: 50px" />
                  <el-input v-model="queryParams.tjNum" style="width: 50px" />
                  <el-input v-model="queryParams.tjNum" style="width: 50px" />
                  <el-input v-model="queryParams.tjNum" style="width: 50px" />
                  <el-input v-model="queryParams.tjNum" style="width: 50px" />
                  <el-input v-model="queryParams.tjNum" style="width: 50px" />
                <el-form-item label="实测气导值:" >
                  <el-input
                    v-model="bgcoun"
                    style="width: 50px"
                    @input="sels"
                  />
                  <el-input
                    v-model="bgcoun1"
                    style="width: 50px"
                    @input="sels1"
                  />
                  <el-input
                    v-model="bgcoun2"
                    style="width: 50px"
                    @input="sels2"
                  />
                  <el-input
                    v-model="bgcoun3"
                    style="width: 50px"
                    @input="sels3"
                  />
                  <el-input
                    v-model="bgcoun4"
                    style="width: 50px"
                    @input="sels4"
                  />
                  <el-input
                    v-model="bgcoun5"
                    style="width: 50px"
                    @input="sels5"
                  />
                </el-form-item>
                <el-form-item label="实测骨导值:" prop="tjNum">
                  <el-input v-model="queryParams.tjNum" style="width: 50px" />
@@ -377,12 +401,12 @@

            <div>
              <div class="nums">
                <span class="nums_txt">500</span>
                <span class="nums_txt">1000</span>
                <span class="nums_txt">2000</span>
                <span class="nums_txt">3000</span>
                <span class="nums_txt">4000</span>
                <span class="nums_txt">6000</span>
                <span
                  class="nums_txt"
                  v-for="(item, index) in yList"
                  :key="index"
                  >{{ item }}</span
                >
              </div>
              <el-form
                :model="queryParams"
@@ -543,34 +567,36 @@
  components: { Public },
  data() {
    return {
      teamYYNums:[],
      LineCharts:[],
      teamYYNums: [],
      LineCharts: [],
      row: {},
      value1: "",
      zhexianList: [
      yList: [500, 1000, 2000, 3000, 4000, 6000],
      youeryuanshiList: [],
      zuoeryuanshiList: [
        {
          numb: 500,
          bgcoun: 3,
          bgcoun: 1,
        },
        {
          numb: 1000,
          bgcoun: 32,
        },
        {
          numb: 2000,
          bgcoun: 31,
        },
        {
          numb: 3000,
          bgcoun: 43,
        },
        {
          numb: 2000,
          bgcoun: 43,
        },
        {
          numb: 3000,
          bgcoun: 32,
        },
        {
          numb: 4000,
          bgcoun: 13,
          bgcoun: 23,
        },
        {
          numb: 6000,
          bgcoun: 32,
          bgcoun: 13,
        },
      ],
      tableData: [
@@ -599,14 +625,13 @@
      input: "",
      min: "",
      max: "",
      Customer: "",
      Order: "",
      ReportToday: "",
      TobeToday: "",
      LineChart: [],
      youeryuanshi: [],
      personYYNum: [],
      reportNum: [],
      teamYYNum: [],
      youeryuanshi1: [],
      PieChart: [],
      PieChart2: [],
      drawer: false,
@@ -661,6 +686,12 @@
      dataobj: {},
      // 表单校验
      rules: {},
      bgcoun: "",
      bgcoun1: "",
      bgcoun2: "",
      bgcoun3: "",
      bgcoun4: "",
      bgcoun5: "",
    };
  },
  created() {
@@ -672,334 +703,199 @@
    });
  },
  methods: {
    sels(val) {
      this.youeryuanshiList = [];
      this.youeryuanshiList.push({
        bgcoun: val,
        numb: 2000,
      });
      this.getech();
    },
    sels1(val) {
      this.youeryuanshiList = [];
      this.youeryuanshiList.push({
        bgcoun: val,
        numb: 1000,
      });
      this.getech();
    },
    sels2(val) {
      this.youeryuanshiList = [];
      this.youeryuanshiList.push({
        bgcoun: val,
        numb: 2000,
      });
      this.getech();
    },
    sels3(val) {
      this.youeryuanshiList = [];
      this.youeryuanshiList.push({
        bgcoun: val,
        numb: 2000,
      });
      this.getech();
    },
    sels4(val) {
      this.youeryuanshiList = [];
      this.youeryuanshiList.push({
        bgcoun: val,
        numb: 2000,
      });
      this.getech();
    },
    sels5(val) {
      this.youeryuanshiList = [];
      this.youeryuanshiList.push({
        bgcoun: val,
        numb: 2000,
      });
      this.getech();
    },
    handleRowClick(selection) {
      this.row = selection.customer;
      this.row.tjType = Number(selection.customer.tjType);
      this.drawer = true;
      this.getech();
      // this.getech();
    },
    getech() {
      this.loading = true;
      // 查询今日登记
      getCustomer().then((response) => {
        this.Customer = response;
        this.loading = false;
      console.log(this.youeryuanshiList);
      this.youeryuanshiList.forEach((item) => {
        this.youeryuanshi.push(item.numb);
        this.youeryuanshi1.push(item.bgcoun);
      });
      // 查询今日已检
      getOrder().then((response) => {
        this.Order = response;
        this.loading = false;
      });
      // 查询今日报告
      getReportToday().then((response) => {
        this.ReportToday = response;
        this.loading = false;
      });
      // 查询今日待检
      getTobeToday().then((response) => {
        this.TobeToday = response;
        this.loading = false;
      });
      getChart().then((response) => {
        response.data.forEach((item) => {
          this.LineChart.push(item.date);
          this.personYYNum.push(item.tdcoun);
          this.reportNum.push(item.grcoun);
          this.teamYYNum.push(item.bgcoun);
        });
        let myChart = this.$echarts.init(document.getElementById("main"));
      let myChart = this.$echarts.init(document.getElementById("main"));

        myChart.setOption({
          title: {
            text: "左耳原始听力",
      myChart.setOption({
        title: {
          text: "左耳原始听力",
        },
        tooltip: {
          trigger: "axis",
        },
        // legend: {
        //   data: ["每日体检登记数", "每日团体登记数", "每日发布报告数"],
        // },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
          tooltip: {
            trigger: "axis",
          },
          // legend: {
          //   data: ["每日体检登记数", "每日团体登记数", "每日发布报告数"],
        },
        xAxis: {
          data: [500, 1000, 2000, 3000, 4000, 6000],
          // type: "category",
          // boundaryGap: false,
          // axisLine: {
          //   show: true,
          //   lineStyle: {
          //     color: "blue",
          //     size: 12,
          //     width: 0,
          //     tyle: "solid",
          //   },
          // },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          toolbox: {
            feature: {
              saveAsImage: {},
          // data: this.LineChart,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.youeryuanshi1,
            name: "右耳原始听力",
            type: "line",
            symbol: "circle", //拐点的形状
            symbolSize: 10, //拐点大小
            lineStyle: {
              color: "#5470C6",
              width: 2,
            },
          },
          xAxis: [
            {type: "category",
            data: ["250", "750", "1.5k", "3k", "6k", "12k"]},
           { data: ["125", "500", "1k", "2k", "4k", "8k"]},
            // type: "category",
            // boundaryGap: false,
            // axisLine: {
            //   show: true,
            //   lineStyle: {
            //     color: "blue",
            //     size: 12,
            //     width: 0,
            //     tyle: "solid",
            //   },
            // },
            // data: this.LineChart,
          ],
          yAxis: {
             type: 'value'
          },
          series: [
            {
              data: [3, 32, 31, 43, 13, 32],
              type: "line",
              symbol: "circle", //拐点的形状
              symbolSize: 13, //拐点大小
              lineStyle: {
                color: "#5470C6",
                width: 2,
              },
               
              itemStyle: {
                borderWidth: 1,
                borderColor: "black",
                color: "#fff",
              },
            },
          ],
        });
        let sizeFun = function () {
          myChart.resize();
        };
        window.addEventListener("resize", sizeFun);

        this.loading = false;
            itemStyle: {
              borderWidth: 1,
              borderColor: "black",
              color: "#fff",
            },
          },
        ],
      });
      getChart().then((response) => {
        console.log(this.zhexianList);
        this.zhexianList.forEach((item) => {
          console.log(item);
          this.LineCharts.push(item.numb);
          this.teamYYNums.push(item.bgcoun);
        });
        let myChart = this.$echarts.init(document.getElementById("main1"));
      let sizeFun = function () {
        myChart.resize();
      };
      window.addEventListener("resize", sizeFun);

        myChart.setOption({
          title: {
            text: "左耳原始听力",
          },
          tooltip: {
            trigger: "axis",
          },
          // legend: {
          //   data: ["每日体检登记数", "每日团体登记数", "每日发布报告数"],
          // },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          xAxis: {
            // type: "category",
            // boundaryGap: false,
            // axisLine: {
            //   show: true,
            //   lineStyle: {
            //     color: "blue",
            //     size: 12,
            //     width: 0,
            //     tyle: "solid",
            //   },
            // },
            data: this.LineCharts,
          },
          yAxis: {
            type: "value",
            min: 0,
            max: 50,
            interval: 5,
          },
          series: [
            {
              name: "左耳原始听力",
              type: "line",
              stack: "Total",
              data: this.teamYYNums,
            },
          ],
        });
        let sizeFun = function () {
          myChart.resize();
        };
        window.addEventListener("resize", sizeFun);
      this.loading = false;

        this.loading = false;
      });
      // getChart().then((response) => {
      //   this.zuoeryuanshiList.forEach((item) => {
      //     this.LineCharts.push(item.numb);
      //     this.teamYYNums.push(item.bgcoun);
      //   });
      //   let myChart1 = this.$echarts.init(document.getElementById("main1"));

      getChart().then((response) => {
        response.data.forEach((item) => {
          this.LineChart.push(item.date);
          this.personYYNum.push(item.tdcoun);
          this.reportNum.push(item.grcoun);
          this.teamYYNum.push(item.bgcoun);
        });
        let myChart = this.$echarts.init(document.getElementById("main2"));
      //   myChart1.setOption({
      //     title: {
      //       text: "左耳原始听力",
      //     },
      //     tooltip: {
      //       trigger: "axis",
      //     },
      //     // legend: {
      //     //   data: ["每日体检登记数", "每日团体登记数", "每日发布报告数"],
      //     // },
      //     grid: {
      //       left: "3%",
      //       right: "4%",
      //       bottom: "3%",
      //       containLabel: true,
      //     },
      //     toolbox: {
      //       feature: {
      //         saveAsImage: {},
      //       },
      //     },
      //     xAxis: {
      //       // type: "category",
      //       // boundaryGap: false,
      //       // axisLine: {
      //       //   show: true,
      //       //   lineStyle: {
      //       //     color: "blue",
      //       //     size: 12,
      //       //     width: 0,
      //       //     tyle: "solid",
      //       //   },
      //       // },
      //       data: this.LineCharts,
      //     },
      //     yAxis: {
      //       type: "value",
      //       min: 0,
      //       max: 50,
      //       interval: 5,
      //     },
      //     series: [
      //       {
      //         name: "左耳原始听力",
      //         type: "line",
      //         stack: "Total",
      //         data: this.teamYYNums,
      //       },
      //     ],
      //   });
      //   let sizeFun = function () {
      //     myChart1.resize();
      //   };
      //   window.addEventListener("resize", sizeFun);

        myChart.setOption({
          title: {
            text: "右耳矫正听力",
          },
          tooltip: {
            trigger: "axis",
          },
          // legend: {
          //   data: ["每日体检登记数", "每日团体登记数", "每日发布报告数"],
          // },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            axisLine: {
              show: true,
              lineStyle: {
                color: "blue",
                size: 12,
                width: 0,
                tyle: "solid",
              },
            },
            data: this.LineChart,
          },
          yAxis: {
            type: "value",
            min: 0,
            max: 50,
            interval: 5,
          },
          series: [
            {
              name: "每日体检登记数",
              type: "line",
              stack: "Total",
              data: this.personYYNum,
            },
            {
              name: "每日团体登记数",
              type: "line",
              stack: "Total",
              data: this.reportNum,
            },
            {
              name: "每日发布报告数",
              type: "line",
              stack: "Total",
              data: this.teamYYNum,
            },
          ],
        });
        let sizeFun = function () {
          myChart.resize();
        };
        window.addEventListener("resize", sizeFun);

        this.loading = false;
      });

      getChart().then((response) => {
        response.data.forEach((item) => {
          this.LineChart.push(item.date);
          this.personYYNum.push(item.tdcoun);
          this.reportNum.push(item.grcoun);
          this.teamYYNum.push(item.bgcoun);
        });
        let myChart = this.$echarts.init(document.getElementById("main3"));

        myChart.setOption({
          title: {
            text: "左耳矫正听力",
          },
          tooltip: {
            trigger: "axis",
          },
          // legend: {
          //   data: ["每日体检登记数", "每日团体登记数", "每日发布报告数"],
          // },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            axisLine: {
              show: true,
              lineStyle: {
                color: "blue",
                size: 12,
                width: 0,
                tyle: "solid",
              },
            },
            data: this.LineChart,
          },
          yAxis: {
            type: "value",
            min: 0,
            max: 50,
            interval: 5,
          },
          series: [
            {
              name: "每日体检登记数",
              type: "line",
              stack: "Total",
              data: this.personYYNum,
            },
            {
              name: "每日团体登记数",
              type: "line",
              stack: "Total",
              data: this.reportNum,
            },
            {
              name: "每日发布报告数",
              type: "line",
              stack: "Total",
              data: this.teamYYNum,
            },
          ],
        });
        let sizeFun = function () {
          myChart.resize();
        };
        window.addEventListener("resize", sizeFun);

        this.loading = false;
      });
      //   this.loading = false;
      // });
    },
    // 鼠标进入原图空间函数
    enterHandler() {
@@ -1246,7 +1142,7 @@
.tanchuangbox_left {
  margin-top: 20px;
  margin-left: 20px;
  width: 50%;
  width: 60%;
}
.data-view {
  display: flex;
@@ -1262,7 +1158,7 @@
  margin-bottom: 10px;
}
.nums_txt {
  margin-right: 10px;
  margin-right: 18px;
}
.tanchuangbox_left1 {
  display: flex;
@@ -1271,7 +1167,7 @@
  display: flex;
}
.tanchuangbox_right {
  width: 50%;
  width: 40%;
}
.ss {
  display: flex;