zkPCproject/src/views/Statistics/trend.vue

<template>
  <div class="box-center">
    <!-- 头 -->
    <div class="app-top">
      <div class="app-titel" style="margin-left: 15px">
          <el-select
          v-model="houseTypes"
          @change="sysChange"
          style="width: 100px; margin-right: 10px"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="selValue"
          @change="selChange"
          style="width: 100px"
          placeholder="请选择"
        >
          <el-option label="代理商" v-if="orgType == 0" value="0"></el-option>
          <el-option label="公司" v-if="orgType != 2" value="1"></el-option>
          <el-option label="楼盘" value="2"></el-option>
        </el-select>
        <!--  -->
        <div style="margin-left: 26px" v-if="selValue == 1">
          <el-select
            v-model="choicValue"
            @change="valuechange"
            placeholder="默认为全部"
            clearable
            filterable
          >
            <el-option
              v-for="item in houseList"
              :key="item.orgCode"
              :label="item.name"
              :value="item.orgCode"
            >
            </el-option>
          </el-select>
        </div>
        <!-- 楼盘 -->
        <div style="margin-left: 26px" v-else-if="selValue == 2">
          <el-select
            v-model="choicValue"
            @change="valuechange"
            placeholder="默认为全部"
            clearable
            filterable
          >
            <el-option
              v-for="item in houseList"
              :key="item.id"
              :label="item.propertyName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div style="margin-left: 26px" v-else>
          <el-select
            v-model="choicValue"
            @change="valuechange"
            clearable
            filterable
            placeholder="默认为全部"
          >
            <el-option
              v-for="item in houseList"
              :key="item.id"
              :label="item.agentName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
      </div>
    </div>

    <div class="app-box-er" >
      <div class="app-titel" style="margin-bottom: 10px">
        <div class="titel-text" style="text-indent: 0; min-width: 64px">
          楼盘趋势
        </div>
        <div class="toptimeqhuan">
          <div :class="{ tophove: dateType == 4 }" @click="tabtimetap(4)">
            近7天
          </div>
          <div :class="{ tophove: dateType == 5 }" @click="tabtimetap(5)">
            近15天
          </div>
          <div :class="{ tophove: dateType == 6 }" @click="tabtimetap(6)">
            近30天
          </div>
        </div>
        <div style="margin-left: 20px">
          <el-date-picker
            @change="confirmtime"
            v-model="customtime"
            :clearable="false"
            type="daterange"
            range-separator="-"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </div>
        <div style="margin-left: 20px">
          <el-checkbox v-model="checked" @change="radioChange"
            >对比时间段</el-checkbox
          >
        </div>
        <div
          v-if="checked"
          style="
            margin-left: 20px;
            border: 1px solid #dcdfe6;
            min-width: 220px;
            height: 30px;
            border-radius: 4px;
            max-width: 360px;
            font-size: 13px;
            line-height: 30px;
            text-indent: 8px;
            cursor: pointer;
          "
          @click="show"
        >
          <!-- {{ selectTime1 ? "时段二： " : "请选择： " }}
          <span v-if="selectTime1">{{ selectTime + "-" + selectTime1 }}</span> -->
          <div style="display: flex">
            <div style="min-width: 60px">
              {{ selectTime1 ? "时段二： " : "请选择： " }}
            </div>
            <div v-if="selectTime1" style="display: flex">
              <!-- {{ selectTime+ "-" + selectTime1}} -->
              <div style="min-width: 120px; text-align: center">
                {{ selectTime }}
              </div>
              <span>-</span>
              <div
                style="min-width: 120px; text-align: center; margin-right: 32px"
              >
                {{ selectTime1 }}
              </div>
            </div>
          </div>
          <el-date-picker
            style="opacity: 0"
            v-model="time"
            @change="timeChange"
            ref="time"
            type="date"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </div>
      </div>

      <div class="container">
        <div
          class="grid-content"
          @click="secondChange('receptionCount', '接待客户/个')"
          style="height: auto; padding-bottom: 10px"
        >
          <div
            class="text1"
            :class="{ tophovese: secindex == 'receptionCount' }"
          >
            接待量
          </div>
          <div
            class="text2"
            :class="{ tophovese: secindex == 'receptionCount' }"
          >
            {{ compare.receptionCount || 0 }}
          </div>
          <div class="text33" v-if="selectTime1">
            <div>
              对比时段:
              <span style="text-indent: 20px">{{
                compare1.receptionCount || 0
              }}</span>
            </div>
            <div
              :style="
                compare2.receptionCount >= 0 ? 'color:green;' : 'color:red;'
              "
            >
              {{ compare2.receptionCount || 0 }}
            </div>
          </div>
        </div>
        <div
          class="grid-content"
          @click="secondChange('avgDuration', '平均接待时长/分钟')"
          style="height: auto"
        >
          <div class="text1" :class="{ tophovese: secindex == 'avgDuration' }">
            平均接待时长(分钟)
          </div>
          <div class="text2" :class="{ tophovese: secindex == 'avgDuration' }">
            {{ compare.avgDuration || 0 }}
          </div>
          <div class="text33" v-if="selectTime1">
            <div>
              对比时段:
              <span style="text-indent: 20px">{{
                compare1.avgDuration || 0
              }}</span>
            </div>
            <div
              :style="compare2.avgDuration >= 0 ? 'color:green;' : 'color:red;'"
            >
              {{ compare2.avgDuration || 0 }}
            </div>
          </div>
        </div>
        <div
          class="grid-content"
          @click="secondChange('prohibitedCustomer', '违禁接待次数/次')"
          style="height: auto; padding-bottom: 10px"
        >
          <div
            class="text1"
            :class="{ tophovese: secindex == 'prohibitedCustomer' }"
          >
            违禁接待次数
          </div>
          <div
            class="text2"
            :class="{ tophovese: secindex == 'prohibitedCustomer' }"
          >
            {{ compare.prohibitedCustomer || 0 }}
          </div>
          <div class="text33" v-if="selectTime1">
            <div>
              对比时段:
              <span style="text-indent: 20px">{{
                compare1.prohibitedCustomer || 0
              }}</span>
            </div>
            <div
              :style="
                compare2.prohibitedCustomer >= 0 ? 'color:green;' : 'color:red;'
              "
            >
              {{ compare2.prohibitedCustomer || 0 }}
            </div>
          </div>
        </div>
        <div
          class="grid-content"
          @click="secondChange('activeCustomer', '有效接待/次')"
          style="height: auto; padding-bottom: 10px"
        >
          <div
            class="text1"
            :class="{ tophovese: secindex == 'activeCustomer' }"
          >
            有效接待
          </div>
          <div
            class="text2"
            :class="{ tophovese: secindex == 'activeCustomer' }"
          >
            {{ compare.activeCustomer || 0 }}
          </div>
          <div class="text33" v-if="selectTime1">
            <div>
              对比时段:
              <span style="text-indent: 20px">{{
                compare1.activeCustomer || 0
              }}</span>
            </div>
            <div
              :style="
                compare2.activeCustomer >= 0 ? 'color:green;' : 'color:red;'
              "
            >
              {{ compare2.activeCustomer || 0 }}
            </div>
          </div>
        </div>
        <div
          class="grid-content"
          @click="secondChange('activeCustomerRate', '有效接待占比/%')"
          style="height: auto; padding-bottom: 10px"
        >
          <div
            class="text1"
            :class="{ tophovese: secindex == 'activeCustomerRate' }"
          >
            有效接待占比/%
          </div>
          <div
            class="text2"
            :class="{ tophovese: secindex == 'activeCustomerRate' }"
          >
            {{ compare.activeCustomerRate || 0 }}
          </div>
          <div class="text33" v-if="selectTime1">
            <div>
              对比时段:
              <span style="text-indent: 20px">{{
                compare1.activeCustomerRate || 0
              }}</span>
            </div>
            <div
              :style="
                compare2.activeCustomerRate >= 0 ? 'color:green;' : 'color:red;'
              "
            >
              {{ compare2.activeCustomerRate || 0 }}%
            </div>
          </div>
        </div>
        <div
          class="grid-content"
          @click="secondChange('fraction', '平均执行率/%')"
          style="height: auto; padding-bottom: 10px"
        >
          <div class="text1" :class="{ tophovese: secindex == 'fraction' }">
            平均执行率/%
          </div>
          <div class="text2" :class="{ tophovese: secindex == 'fraction' }">
            {{ compare.fraction || 0 }}
          </div>
          <div class="text33" v-if="selectTime1">
            <div>
              对比时段:
              <span style="text-indent: 20px">{{
                compare1.fraction || 0
              }}</span>
            </div>
            <div
              :style="compare2.fraction >= 0 ? 'color:green;' : 'color:red;'"
            >
              {{ compare2.fraction || 0 }}%
            </div>
          </div>
        </div>
      </div>
      <div id="main"></div>
    </div>

    <div class="app-box-er" v-if="selectTime1">
      <template>
        <el-table :data="tableData" style="width: 100%" height="320">
          <el-table-column prop="time" label="时间" align="center">
          </el-table-column>
          <el-table-column prop="data1" label="时段一" align="center">
            <template slot-scope="{ row }">
              <span
                v-if="
                  secindex == 'fraction' || secindex == 'activeCustomerRate'
                "
              >
                {{ row.data1 }}%</span
              >
              <span v-else> {{ row.data1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="data2" label="时段二" align="center">
            <template slot-scope="{ row }">
              <span
                v-if="
                  secindex == 'fraction' || secindex == 'activeCustomerRate'
                "
              >
                {{ row.data2 }}%</span
              >
              <span v-else> {{ row.data2 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="data3" label="变化" align="center">
            <template slot-scope="scope">
              <span
                v-if="
                  secindex == 'fraction' || secindex == 'activeCustomerRate'
                "
                :style="scope.row.data3 >= 0 ? 'color:green;' : 'color:red;'"
                >{{ scope.row.data3 }}%</span
              >
              <span
                v-else
                :style="scope.row.data3 >= 0 ? 'color:green;' : 'color:red;'"
                >{{ scope.row.data3 }}</span
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import topLogsVue from "../../page/index/top/top-logs.vue";
export default {
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          //根据当前日期 --- 禁止选中之后的日期
          // return time.getTime() > Date.now();
        },
      },
      firstTab: {},
      tableData: [],
      secondTab: {},
      thirdTab: {},
      selValue:
        localStorage.getItem("orgType") == 0
          ? "0"
          : localStorage.getItem("orgType") == 1
          ? "1"
          : "2",
      checked: false,
      selectTime1: "", //对比时间
      selectTime: "", //对比时间
      choicValue: "",
      orgType: localStorage.getItem("orgType"),
      houseList: [],
      secindex: "receptionCount",
      dateType: 4,
      compare: {},
      compare1: {},
      compare2: {},
      time: [],
      customtime: [],
      Confirmthecontrast: false,
      cardindex: "1",
      options: [
        {
          label: "代理商",
          value: "0",
        },
        {
          label: "公司",
          value: "1",
        },
        {
          label: "楼盘",
          value: "2",
        },
      ],
      options2: [
        {
          label: "正式数据",
          value: "0,1",
        },
        {
          label: "测试数据",
          value: "2,3",
        },
      ],
      houseTypes:'0,1'
    };
  },
  mounted() {
    this.getList();
    this.tabtimetap(4);
  },
  methods: {
    sysChange(){
      this.choicValue=''
      this.selValue='0'
      this.getList()
    },
    // 获取tab2
    receptionOverviewOfSystem() {
      let obj = {
        startDate: this.dateType ? "" : this.customtime[0],
        endDate: this.dateType ? "" : this.customtime[1],
        contrastStartDate: this.selectTime,
        contrastEndDate: this.selectTime1,
        dateType: this.dateType,
        agentId: this.selValue == 0 ? this.choicValue : null,
        orgCode: this.selValue == 1 ? this.choicValue : null,
        houseId: this.selValue == 2 ? this.choicValue : null,
        orgType: localStorage.getItem("orgType"),
        queryOrgType:this.selValue/1+1,
        houseTypes: this.houseTypes,
      };
      if (obj.orgType == 1) {
        obj.agentId = localStorage.getItem("agentId");
      }
      if (obj.orgType == 2) {
        obj.orgCode = localStorage.getItem("orgCode");
      }
      this.$api.api.receptionOverviewOfSystem(obj).then((res) => {
        this.compare = res.data.firstData;
        if (this.selectTime1) {
          // 有对比
          this.compare1 = res.data.secondData;
          // 将得到的三者的数据进行组装为一个数组
          this.compare2 = res.data.thirdData;
        }
        this.getChars("receptionCount", "接待客户/个");
      });
    },
    async getChars(str, str1) {
      let obj = {
        startDate: this.dateType ? "" : this.customtime[0],
        endDate: this.dateType ? "" : this.customtime[1],
        contrastStartDate: this.selectTime,
        contrastEndDate: this.selectTime1,
        dateType: this.dateType,
        agentId: this.selValue == 0 ? this.choicValue : null,
        orgCode: this.selValue == 1 ? this.choicValue : null,
        houseId: this.selValue == 2 ? this.choicValue : null,
        orgType: localStorage.getItem("orgType"),
        queryOrgType:this.selValue/1+1,
        houseTypes: this.houseTypes,
      };
      if (obj.orgType == 1) {
        obj.agentId = localStorage.getItem("agentId");
      }
      if (obj.orgType == 2) {
        obj.orgCode = localStorage.getItem("orgCode");
      }
      if (!this.selectTime1) {
        let res = await this.$api.api.receptionDataOfSystem(obj);
        // console.log(res, str);
        // return
        // console.log(idx);
        let Strname = [str1];
        let timeDate = [];
        let arr1 = [];
        // 判断是第几个然后对数据进行渲染
        // 先处理时间
        // console.log(timeDate);
        res.data.firstValue.map((item) => {
          timeDate.push(item.statDate.substring(5, 10));
          arr1.push(item[str] || 0);
        });

        let arr = [
          {
            name: Strname[0],
            data: arr1,
            type: "line",
            smooth: true,
          },
        ];
        this.SwitchCARDS(arr, "main", timeDate, Strname);
      } else {
        let res = await this.$api.api.receptionDataOfSystem(obj);
        // console.log(res, str);
        // return
        let Strname = ["时段一", "时段二"];
        let timeDate = [];
        // 判断是第几个然后对数据进行渲染
        // 先处理时间
        let arr1 = [];
        let arr2 = [];
        let arr3 = [];
        res.data.firstValue.map((item, idx) => {
          timeDate.push(
            item.statDate.substring(5, 10) +
              "VS" +
              res.data.secondValue[idx].statDate.substring(5, 10)
          );
          arr1.push(item[str]);
          arr2.push(res.data.secondValue[idx][str]);
          arr3.push(res.data.thirdData[idx][str]);
        });
        let arr = [
          {
            name: Strname[0],
            data: arr1,
            type: "line",
            smooth: true,
          },
          {
            name: Strname[1],
            data: arr2,
            type: "line",
            smooth: true,
          },
        ];
        this.SwitchCARDS(arr, "main", timeDate, Strname);
        let tableData = [];
        timeDate.map((item, idx) => {
          let obj = {
            time: item,
            data1: arr1[idx],
            data2: arr2[idx],
            data3: arr3[idx],
          };
          tableData.push(obj);
        });
        this.tableData = tableData;
        // console.log(tableData);
      }
    },
    //时间tab切换
    tabtimetap(i) {
      this.dateType = i;
      this.checked = false;
      this.selectTime = "";
      this.selectTime1 = "";
      //给时间选择器赋值
      let num = 24 * 3600 * 1000;
      //	获取当前时间戳转换为日期格式
      if (this.dateType == 4) {
        num = 24 * 3600 * 1000 * 6;
      }
      if (this.dateType == 5) {
        num = 24 * 3600 * 1000 * 14;
      }
      if (this.dateType == 6) {
        num = 24 * 3600 * 1000 * 29;
      }
      this.customtime = [
        this.timestampToTime(new Date().getTime() - num),
        this.timestampToTime(new Date().getTime()),
      ];
      this.$set(this, "time", null);
      this.Confirmthecontrast = false;
      this.receptionOverviewOfSystem();
    },
    show() {
      this.$refs.time.pickerVisible = true;
    },
    timeChange(e) {
      //	对数据进行处理
      //	当当前选择的为自定义时间时
      this.selectTime = "";
      this.selectTime1 = "";
      this.timeSelect(e);
    },
    timeSelect(e) {
      if (this.dateType == null) {
        this.selectTime = e;
        this.selectTime1 = this.timestampToTime(
          new Date(e).getTime() +
            new Date(this.customtime[1]).getTime() -
            new Date(this.customtime[0]).getTime()
        );
      } else {
        let num = 24 * 3600 * 1000;
        if (this.dateType == 4) {
          num = 24 * 3600 * 1000 * 6;
        }
        if (this.dateType == 5) {
          num = 24 * 3600 * 1000 * 14;
        }
        if (this.dateType == 6) {
          num = 24 * 3600 * 1000 * 29;
        }
        this.selectTime = e;
        this.selectTime1 = this.timestampToTime(new Date(e).getTime() + num);
      }
      console.log(this.selectTime, this.selectTime1);
      this.Confirmthecontrast = true;
      this.receptionOverviewOfSystem();
    },
    getList() {
      console.log(this.selValue);
      // 当为楼盘选择时
      if (this.selValue == 1) {
        this.$api.api
          .findMyOrg({
            orgType: localStorage.getItem("orgType"),
            agentId: localStorage.getItem("agentId"),
          })
          .then((res) => {
            this.houseList = res.data;
            this.receptionOverviewOfSystem();
          });
      } else if (this.selValue == 2) {
        this.$api.api
          .findHouseByUser({
            orgType: localStorage.getItem("orgType"),
            houseId: localStorage.getItem("houseId"),
            houseTypes: this.houseTypes,
          })
          .then((res) => {
            this.houseList = res.data;
            this.receptionOverviewOfSystem();
          });
      } else {
        this.$api.api
          .findMyAgent({
            orgType: localStorage.getItem("orgType"),
          })
          .then((res) => {
            this.houseList = res.data;
            this.receptionOverviewOfSystem();
          });
      }
    },
    secondChange(i, str) {
      this.secindex = i;
      this.getChars(i, str);
    },
    confirmtime(e) {
      this.dateType = null;
      this.checked = false;
      this.selectTime = "";
      this.selectTime1 = "";
      this.$set(this, "time", null);
      if (!e) return;
      this.Confirmthecontrast = false;
      this.receptionOverviewOfSystem();
    },
    selChange() {
      this.choicValue = "";
      this.dateType = 4;
      this.getList();
    },
    valuechange() {
      this.receptionOverviewOfSystem();
    },
    radioChange() {
      this.selectTime = "";
      this.selectTime1 = "";
      this.$set(this, "time", null);
      if (!this.checked) {
        this.receptionOverviewOfSystem();
      }
    },
    timestampToTime(timestamp) {
      var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      // var  date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000

      var yyyy = date.getFullYear() + "-";

      var MM =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";

      // var dd = date.getDate() + ' ';
      var dd =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";

      return yyyy + MM + dd;
    },
    //卡片下折线图
    SwitchCARDS(arr, str, timeDate, Strname) {
      echarts.init(document.getElementById(str)).dispose(); // 销毁实例
      var chartDom = document.getElementById(str);
      var myChart = echarts.init(chartDom);
      var option;

      option = {
          color: [
              "#6F8EDC",
              "#EE6666",
              "#F98120",
              "#1CC99E",
              "#9474FB",
              "#66AFF5",
              "#FABD2B",
              "#FFCF8F",
              "#657292",
              "#7A6A99",
              "#BF5D52",
              "#77B7E4",
              "#E6A065",
              "#9D5139",
              "#C1AA88",
              "#F87F7A",
              "#F6CF74",
              "#7F5506",
              "#88BB9B",
              "#6E99AA",
              "#5789D0",
            ],
        legend: {
          data: Strname,
          bottom: "10",
        },
        grid: {
          left: 10,
          right: 10,

          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: timeDate,
          axisLabel: {
            //重点在这一块，其余可以忽略
            textStyle: {
              color: "#212121", //更改坐标轴文字颜色
            },
          },
          axisLine: {
            lineStyle: {
              type: "solid",
              color: "#DDE1EE", //x线的颜色
              width: "1", //坐标线的宽度
            },
          },
        },

        series: arr,
      };
      if (
        this.secindex == "fraction" ||
        this.secindex == "activeCustomerRate"
      ) {
        if (this.selectTime1) {
          option.tooltip = {
            trigger: "axis",
            formatter: function (params) {
              let src =
                "<p>" +
                params[0].seriesName +
                ":" +
                params[0].data +
                "%" +
                "</p>" +
                "<p>" +
                params[1].seriesName +
                ":" +
                params[1].data +
                "%" +
                "</p>";
              return src;
            },
          };
        } else {
          option.tooltip = {
            trigger: "axis",
            formatter: "{b0}:{c0}" + "%",
          };
        }
        option.yAxis = {
          type: "value",
          splitNumber: 5,
          max: 100,
          min: 0,
          axisLabel: {
            //重点在这一块，其余可以忽略
            textStyle: {
              color: "#212121", //更改坐标轴文字颜色
            },
          },
          axisLine: {
            lineStyle: {
              ype: "solid",
              color: "#DDE1EE", //x线的颜色
              width: "1", //坐标线的宽度
            },
          },
          splitLine: {
            lineStyle: {
              type: "dashed", // y轴分割线类型
            },
          },
          axisTick: {
            //y轴刻度线
            show: false,
          },
        };
      } else if (this.secindex == "avgDuration") {
        if (this.selectTime1) {
          option.tooltip = {
            trigger: "axis",
            formatter: function (params) {
              let src =
                "<p>" +
                params[0].seriesName +
                ":" +
                params[0].data +
                "分钟" +
                "</p>" +
                "<p>" +
                params[1].seriesName +
                ":" +
                params[1].data +
                "分钟" +
                "</p>";
              return src;
            },
          };
        } else {
          option.tooltip = {
            trigger: "axis",
            formatter: "{b0}:{c0}" + "分钟",
          };
        }
        option.yAxis = {
          type: "value",
          splitNumber: 4,
          axisLabel: {
            //重点在这一块，其余可以忽略
            textStyle: {
              color: "#212121", //更改坐标轴文字颜色
            },
          },
          axisLine: {
            lineStyle: {
              ype: "solid",
              color: "#DDE1EE", //x线的颜色
              width: "1", //坐标线的宽度
            },
          },
          splitLine: {
            lineStyle: {
              type: "dashed", // y轴分割线类型
            },
          },
          axisTick: {
            //y轴刻度线
            show: false,
          },
        };
      } else {
        if (this.selectTime1) {
          option.tooltip = {
            trigger: "axis",
            formatter: function (params) {
              let src =
                "<p>" +
                params[0].seriesName +
                ":" +
                params[0].data +
                "次" +
                "</p>" +
                "<p>" +
                params[1].seriesName +
                ":" +
                params[1].data +
                "次" +
                "</p>";
              return src;
            },
          };
        } else {
          option.tooltip = {
            trigger: "axis",
            formatter: "{b0}:{c0}" + "次",
          };
        }
        option.yAxis = {
          type: "value",
          splitNumber: 4,
          axisLabel: {
            //重点在这一块，其余可以忽略
            textStyle: {
              color: "#212121", //更改坐标轴文字颜色
            },
          },
          axisLine: {
            lineStyle: {
              ype: "solid",
              color: "#DDE1EE", //x线的颜色
              width: "1", //坐标线的宽度
            },
          },
          splitLine: {
            lineStyle: {
              type: "dashed", // y轴分割线类型
            },
          },
          axisTick: {
            //y轴刻度线
            show: false,
          },
        };
      }

      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>

<style scoped="scoped" lang="scss" >
.box-center {
  width: 100%;
  padding: 15px;
  min-width: 1000px;
  padding-bottom: 100px;
}

.container {
  display: grid;
  grid-template-columns: repeat(6, 16%);
  grid-column-gap: 8px;
  grid-row-gap: 18px;
}
.container1 {
  display: grid;
  grid-template-columns: repeat(3, 30%);
  grid-column-gap: 66px;
  grid-row-gap: 18px;
}
// 进度条
.jinbox {
  width: 100%;
  height: 18px;
  line-height: 18px;
  display: flex;
  font-size: 16px;
  color: #2c3542;
  margin-top: 20px;
  .jinboxtit {
    width: 14%;
    height: 18px;
    padding-right: 6px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .jinbox-box {
    width: 75%;
    height: 100%;
    border-radius: 8px;
    background: #f2f2f2;
  }
  .boxbaifenbi {
    height: 100%;
    background: #60d7a0;
    border-radius: 8px;
  }
  .boxbaifenbi2 {
    height: 100%;
    background: #5b8ff9;
  }
  .jinboxbott {
    width: 16%;
    text-indent: 20px;
  }
}

#main {
  width: 100%;
  height: 380px;
}
#echar2 {
  width: 100%;
  height: 380px;
}
#Brokenline1 {
  width: 100%;
  height: 350px;
}
#Brokenline2 {
  width: 100%;
  height: 350px;
}
#Pinspeak1 {
  width: 100%;
  height: 350px;
}
#Pinspeak2 {
  width: 100%;
  height: 350px;
}
.app-box-san {
  width: 100%;
  // height: 400px;
  display: flex;
  margin-top: 15px;
  .zuo {
    flex: 1;
    height: 100%;
    margin-right: 15px;
    background: #ffffff;
    border-radius: 4px;
    .title {
      width: 100%;
      height: 55px;
      border-bottom: 1px solid #e0e0e0;
      display: flex;
      align-content: center;
      .text1 {
        flex: 2;
        line-height: 55px;
        text-indent: 20px;
        font-weight: 500;
        font-size: 16px;
        color: #333333;
      }
      .text2 {
        flex: 1;
        height: 55px;
        display: flex;
        align-items: center;
      }
    }
  }
  .you {
    height: 100%;
    flex: 1;
    background: #ffffff;
    border-radius: 4px;
    .title {
      width: 100%;
      height: 55px;
      border-bottom: 1px solid #e0e0e0;
      display: flex;
      align-content: center;
      .text1 {
        flex: 2;
        line-height: 55px;
        text-indent: 20px;
        font-weight: 500;
        font-size: 16px;
        color: #333333;
      }
      .text2 {
        flex: 1;
        height: 55px;
        display: flex;
        align-items: center;
      }
    }
  }
}

.app-box-er {
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  margin-top: 15px;
  padding: 15px;
}
.grid-content {
  background: #ffffff;
  height: 90px;
  border: 1px solid #e0e0e0;
  cursor: pointer;
  .text1 {
    height: 16px;
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
    text-indent: 20px;
    margin-top: 20px;
  }
  .text2 {
    height: 32px;
    font-size: 32px;
    font-weight: normal;
    line-height: 32px;
    text-indent: 20px;
    margin-top: 10px;
  }
}

.tophove {
  color: #ffffff;
  background: #2671e2;
}
.tophovese {
  color: #2671e2;
}
.app-top {
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  padding-top: 15px;
  padding-bottom: 15px;
}
.app-titel {
  width: 100%;
  display: flex;
  align-items: center;
  .titel-text {
    height: 100%;
    font-size: 16px;
    font-weight: 600;
    color: #32363d;
    text-indent: 30px;
  }
  .toptimeqhuan {
    width: 190px;
    height: 32px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    overflow: hidden;
    margin-left: 20px;
    cursor: pointer;
  }
  .toptimeqhuan div {
    flex: 1;
    text-align: center;
    line-height: 32px;
    font-size: 14px;
  }
}
.hejisan {
  width: 92%;
  margin: 0 auto;
  display: flex;
  margin-top: 15px;
  .text1-1 {
    color: #666666;
  }
  .text1-2 {
    color: #333333;
    margin-top: 10px;
  }
}
.app_titile {
  display: flex;
  justify-content: space-between;
}
.text33 {
  font-size: 12px;
  text-indent: 20px;
  line-height: 20px;
  display: flex;
  justify-content: space-between;
  margin-right: 20px;
}
</style>