<template>
  <div class="compare">
    <div class="title-box">
      <div class="title">
        {{ jqTitle
        }}<img src="../../../assets/images/xiala.png" width class="img" alt="" @click="isShowJqType = true" />
        <van-action-sheet v-model:show="isShowJqType">
          <van-picker :columns="jqTypeList" @confirm="groupChange" @cancel="isShowJqType = false" />
        </van-action-sheet>
      </div>
    </div>
    <div class="zst-box">
      <div class="zst-title-box">
        <div class="zst-title-left">数据统计</div>
        <div class="zst-title-right">
          {{ dataCountDay
          }}<img src="../../../assets/images/xiala.png" width class="img" alt="" @click="chooseTime('sjtj')" />
          <van-action-sheet v-model:show="isShowDataCount1">
            <van-picker :columns="timeList" @confirm="change_data_count" @cancel="isShowDataCount1 = false" />
          </van-action-sheet>
        </div>
      </div>
      <div class="jrfxBox">
        <div class="jrfxLi">
          <div class="numb sum_total">{{ formData.total }}</div>
          <div class="titles">总数</div>
        </div>
        <div class="jrfxLi">
          <div class="numb xs_total">{{ formData.xs }}</div>
          <div class="titles">刑事</div>
        </div>
        <div class="jrfxLi">
          <div class="numb xz_total">{{ formData.xz }}</div>
          <div class="titles">行政</div>
        </div>
      </div>
    </div>
    <div class="zst-box">
      <div class="zst-title-box">
        <div class="zst-title-left">发案趋势分析</div>
        <div class="zst-title-right">
          {{ qsfxDay }}
          <img src="../../../assets/images/xiala.png" width class="img" alt="" @click="chooseTime('qsfx')" />
          <van-action-sheet v-model:show="isShowDataCount2">
            <van-picker :columns="timeList" @confirm="change_data_count" @cancel="isShowDataCount2 = false" />
          </van-action-sheet>
        </div>
      </div>
      <lineChart :xline="xline" :xsdata="xsdata" :xzdata="xzdata" :zdata="zdata" />
    </div>
    <div class="zst-box">
      <div class="zst-title-box" style="margin-bottom: 2vw">
        <div class="zst-title-left">派出所发案分析</div>
        <div class="zst-title-right">
          {{ pcsDay }}
          <img src="../../../assets/images/xiala.png" width class="img" alt="" @click="chooseTime('pcsfafx')" />
          <van-action-sheet v-model:show="isShowDataCount3">
            <van-picker :columns="timeList" @confirm="change_data_count" @cancel="isShowDataCount3 = false" />
          </van-action-sheet>
        </div>
      </div>
      <Bar1 :datas="pcsfaList" />
    </div>
    <div class="zst-box">
      <div class="zst-title-box">
        <div class="zst-title-left">发案时段及三车人员预警</div>
        <div class="zst-title-right">
          {{ ryyjDay }}
          <img src="../../../assets/images/xiala.png" width class="img" alt="" @click="chooseTime('ryyj')" />
          <van-action-sheet v-model:show="isShowDataCount4">
            <van-picker :columns="timeList" @confirm="change_data_count" @cancel="isShowDataCount4 = false" />
          </van-action-sheet>
        </div>
      </div>
      <div class="tag_box">
        <van-tag v-for="(item, index) in tags" @click="changeTime(item)" plain :key="index"
          :color="isTimeActive == item ? '#3c9cff' : ''" style="margin-right: 1vw">{{ item }}
        </van-tag>
      </div>
      <Bar2 :datas="fasdAndscList" />
    </div>
    <div class="zst-box">
      <div class="zst-title-box">
        <div class="zst-title-left">高发区域TOP5</div>
        <div class="zst-title-right">
          {{ gfqyDay }}
          <img src="../../../assets/images/xiala.png" width class="img" alt="" @click="chooseTime('gfqy')" />
          <van-action-sheet v-model:show="isShowDataCount5">
            <van-picker :columns="timeList" @confirm="change_data_count" @cancel="isShowDataCount5 = false" />
          </van-action-sheet>
        </div>
      </div>
      <div class="fjChart">
        <TopArea :list="totalList" v-if="totalList.length > 0" />
        <div v-else style="height: 10vh; text-align: center; line-height: 10vh">
          没有数据
        </div>
      </div>
      <!-- <div class="but_box">
        <span>发送指令</span>
        <span>以地图展示</span>
      </div> -->
    </div>
    <div class="zst-box">
      <div class="zst-title-box">
        <div class="zst-title-left">三车前科人员活跃TOP5</div>
        <div class="zst-title-right">
          {{ ryhdDay }}
          <img src="../../../assets/images/xiala.png" width class="img" alt="" @click="chooseTime('qkryhd')" />
          <van-action-sheet v-model:show="isShowDataCount6">
            <van-picker :columns="timeList" @confirm="change_data_count" @cancel="isShowDataCount6 = false" />
          </van-action-sheet>
        </div>
      </div>
      <div class="trailList" v-if="ryyjList.length > 0">
        <!-- <ListData
          v-for="(item, index) in ryyjList"
          :key="index"
          type="ry"
          :item="item.ryInfo"
          @onClickItem="onClickItem($event, 'ry')"
        /> -->
      </div>
      <div v-else style="height: 10vh; text-align: center; line-height: 10vh">
        没有数据
      </div>
    </div>
    <div class="zst-box">
      <div class="zst-title-box">
        <div class="zst-title-left">车辆预警TOP5</div>
        <div class="zst-title-right">
          {{ tpcyjDay }}
          <img src="../../../assets/images/xiala.png" width class="img" alt="" @click="chooseTime('tpcyj')" />
          <van-action-sheet v-model:show="isShowDataCount7">
            <van-picker :columns="timeList" @confirm="change_data_count" @cancel="isShowDataCount7 = false" />
          </van-action-sheet>
        </div>
      </div>
      <div class="trailList" v-if="clyjList.length > 0">
        <!-- <ListData
          v-for="(item, index) in clyjList"
          :key="index"
          type="car"
          :item="item.clInfo"
          @onClickItem="onClickItem($event, 'cl')"
        /> -->
      </div>
      <div v-else style="height: 10vh; text-align: center; line-height: 10vh">
        没有数据
      </div>
    </div>
  </div>
</template>

<script>
import Bar1 from "./components/barEcharts1.vue";
import Bar2 from "./components/barEcharts2.vue";
import TopArea from "./components/TopArea.vue";
import lineChart from "./components/lineChart.vue";
import router from "../../../router/index.js";
import {
  timeValidate,
  getRecentDay,
  getnRencebtMonth,
  setArray,
  hbArray,
  dateFormat,
  getBase64,
} from "../../../utils/tools.js";
import { jqfxCorrelation, jqfxCorrelationYjzl } from "../../../api/jqfxApi.js";
export default {
  components: {
    Bar1,
    Bar2,
    TopArea,
    lineChart,
  },
  data() {
    return {
      daterValidate: [
        timeValidate(new Date(), "ymd") + " 00:00:00",
        timeValidate(new Date()),
      ],
      submitType: "",
      isShowDataCount1: false,
      isShowDataCount2: false,
      isShowDataCount3: false,
      isShowDataCount4: false,
      isShowDataCount5: false,
      isShowDataCount6: false,
      isShowDataCount7: false,
      dataCountDay: "今日",
      qsfxDay: "今日",
      pcsDay: "今日",
      ryyjDay: "今日",
      gfqyDay: "今日",
      ryhdDay: "今日",
      tpcyjDay: "今日",
      timeList: ["今日", "近7日", "近7周", "近7月"],
      formData: {
        total: 0,
        xs: 0,
        xz: 0,
      },
      xline: [],
      xsdata: [],
      xzdata: [],
      zdata: [],
      isShowJqType: false,
      jqTitle: "街面警情",
      jqTypeList: ["街面警情", "盗抢三车"],
      tags: ["3时段", "4时段", "6时段", "8时段"],
      totalList: [], //高发区域
      //派出所分析数据
      pcsfaList: {},
      //三车人员预警
      fasdAndscList: [],
      //组织机构数据
      ssbmList: [],
      isTimeActive: "6时段", //默认时段
      pcsfaListCopy: [], //三车预警数据
      //车预警
      clyjList: [],
      //人员预警
      ryyjList: [],
      baseUrl: this.baseUrl2,
    };
  },
  mounted() {
    this.get_data_count();
    this.get_faqsfx_data();
    this._getSsbmData();
    this.get_fasd_scyj_data();
    this._getgfquData();
    this._getYjclTOP5();
    this._getRyyjTOP5();
  },
  methods: {
    //点击人员预警
    onClickItem(item, type) {
      //人员跳转
      if (type == "ry") {
        let { yj_rysfzh, jd, wd } = item;
        router.push(
          `/yjMapPoint?item=${JSON.stringify({
            yj_rysfzh,
            jd,
            wd,
            time: this.ryhdDay,
          })}`
        );
      } else {
        //车辆跳转
        let { yj_clcph } = item;
        uni.navigateTo({
          url: `../ryyjTop5AndMap/ryyjTop5AndMap?hphm=${yj_clcph}&clTime=${this.tpcyjDay}`,
        });
      }
    },
    //获取三车人员预警TOP5
    _getRyyjTOP5() {
      this.ryyjList = [];
      let data = {
        ssxgajdm: "1",
      };
      let url = "";
      switch (this.ryhdDay) {
        case "今日":
          data.kssj = timeValidate(new Date(), "ymd") + " 00:00:00";
          data.jssj = timeValidate(new Date());
          url = "/yjxx/yjry/yjrytjsc";
          break;
        case "近7日":
          data.kssj = getRecentDay(-7);
          data.jssj = timeValidate(new Date());
          url = "/yjxx/yjry/yjrytjsc";
          break;
        case "近7周":
          data.kssj = getRecentDay(-49);
          data.jssj = timeValidate(new Date());
          url = "/yjxx/yjry/zyjrytjsc";
          break;
        default:
          data.ksny = getnRencebtMonth(6);
          data.jsny = getnRencebtMonth(0);
          url = "/yjxx/yjry/yyjrytjsc";
          break;
      }
      jqfxCorrelationYjzl(url, data).then((res) => {
        let array = res.slice(0, 5);
        array.forEach(async (item) => {
          item.ryInfo = await this._getRyInfo(item.yj_rysfzh);
          item.ryInfo.sl = item.sl;
          getBase64((_res) => {
            item.ryInfo.itemUrl = _res;
            this.ryyjList.push(item);
            this.ryyjList.sort(function (m, n) {
              let valueM = m["sl"];
              let valueN = n["sl"];
              if (valueM < valueN) return 1;
              else if (valueM > valueN) return -1;
              else return 0;
            });
          }, item.ryInfo.yj_xtp);
        });
      });
    },
    //获取 人员详情
    _getRyInfo(sfzh) {
      return new Promise((ok) => {
        jqfxCorrelationYjzl("/yjxx/yjry/queryBySfzh", {
          sfzh,
        }).then((res) => {
          ok(res[0]);
        });
      });
    },
    //获取预警车辆TOP5
    _getYjclTOP5() {
      this.clyjList = [];
      let data = {
        ssxgajdm: "1",
      };
      let url = "";
      switch (this.tpcyjDay) {
        case "今日":
          data.kssj = timeValidate(new Date(), "ymd") + " 00:00:00";
          data.jssj = timeValidate(new Date());
          url = "/yjxx/yjcl/yjcltj";
          break;
        case "近7日":
          data.kssj = getRecentDay(-7);
          data.jssj = timeValidate(new Date());
          url = "/yjxx/yjcl/yjcltj";
          break;
        case "近7周":
          data.kssj = getRecentDay(-49);
          data.jssj = timeValidate(new Date());
          url = "/yjxx/yjcl/zyjcltj";
          break;
        default:
          data.ksny = getnRencebtMonth(6);
          data.jsny = getnRencebtMonth(0);
          url = "/yjxx/yjcl/yyjcltj";
          break;
      }
      jqfxCorrelationYjzl(url, data).then((res) => {
        let array = res.slice(0, 5);
        array.forEach(async (item) => {
          item.clInfo = await this._getClInfo(item.yj_clcph);
          item.clInfo.sl = item.sl;
          this.clyjList.push(item);
          this.clyjList.sort(function (m, n) {
            let valueM = m["sl"];
            let valueN = n["sl"];
            if (valueM < valueN) return 1;
            else if (valueM > valueN) return -1;
            else return 0;
          });
        });
      });
    },
    //获取 车辆详情
    _getClInfo(hphm) {
      return new Promise((ok) => {
        jqfxCorrelationYjzl("/yjxx/yjcl/queryBycCphm", {
          hphm,
        }).then((res) => {
          res[0].yj_xtp = res[0].yj_xtp.replace(
            "http://80.35.1.132",
            this.baseUrl
          );
          ok(res[0]);
        });
      });
    },
    //高发区域 TOP5
    _getgfquData() {
      let params = {
        ssxgajdm: "1", //分县局代码
      };
      switch (this.gfqyDay) {
        case "今日":
          params.ksrq = timeValidate(new Date(), "ymd") + " 00:00:00";
          params.jsrq = timeValidate(new Date());
          break;
        case "近7日":
          params.ksrq = getRecentDay(-7);
          params.jsrq = timeValidate(new Date());
          break;
        case "近7周":
          params.ksrq = getRecentDay(-49);
          params.jsrq = timeValidate(new Date());
          break;
        default:
          params.ksny = getnRencebtMonth(6);
          params.jsny = getnRencebtMonth(0);
          break;
      }
      this.totalList = [];
      jqfxCorrelation("/tbJq/queryZtfx", params).then((res) => {
        if (res && res.length > 0) {
          res.forEach((item) => {
            if (!item.error) {
              item.name = item.address.road || item.display_name.split(",")[0];
              item.sl = item.jqsl;
              this.totalList.push(item);
            }
          });
        }
      });
    },
    // 高发时段分析
    get_fasd_scyj_data() {
      let params = {
        ssxgajdm: "1",
      };
      switch (this.ryyjDay) {
        case "今日":
          params.ksrq = timeValidate(new Date(), "ymd") + " 00:00:00";
          params.jsrq = timeValidate(new Date());
          this._getJqData("/ztfx/fascryyj/scryyj", params);
          break;
        case "近7日":
          params.ksrq = getRecentDay(-7);
          params.jsrq = timeValidate(new Date());
          this._getJqData("/ztfx/fascryyj/scryyj", params);
          break;
        case "近7周":
          params.ksrq = getRecentDay(-49);
          params.jsrq = timeValidate(new Date());
          this._getJqData("/ztfx/fascryyj/zscryyj", params);
          break;
        default:
          params.ksny = getnRencebtMonth(6);
          params.jsny = getnRencebtMonth(0);
          this._getJqData("/ztfx/fascryyj/yscryyj", params);
          break;
      }
    },
    //请求高发地图警情数据
    _getJqData(url, params) {
      jqfxCorrelation(url, params).then((res) => {
        let timeArr = [];
        for (var i = 0; i < 24; i++) {
          let obj = {
            product: i,
            发案数: 0,
            前科人员报警数: 0,
          };
          for (var j = 0; j < res.length; j++) {
            let item = res[j];
            if (i == item.jqfsksxs) {
              obj["发案数"] = item.sl;
            }
          }
          timeArr.push(obj);
        }
        this.pcsfaListCopy = timeArr;
        this.changeTime("6时段");
      });
    },
    // 高发时段分析时段切换
    changeTime(value) {
      this.isTimeActive = value;
      if (value == "3时段") {
        this.fasdAndscList = this.getGroup(3);
      }
      if (value == "4时段") {
        this.fasdAndscList = this.getGroup(4);
      }
      if (value == "6时段") {
        this.fasdAndscList = this.getGroup(6);
      }
      if (value == "8时段") {
        this.fasdAndscList = this.getGroup(8);
      }
    },
    // 时间分组
    getGroup(val) {
      let arr = [];
      let num = 24 / val;
      if (arr.length < num) {
        for (let j = 1; j <= num; j++) {
          let obj = {
            product: "",
            发案数: 0,
            前科人员预警数: 0,
          };
          for (let t = 0; t < this.pcsfaListCopy.length; t++) {
            let it = this.pcsfaListCopy[t];
            if ((j - 1) * val <= t && t < j * val) {
              let objs = JSON.parse(JSON.stringify(obj));
              objs.product = (j - 1) * val + "-" + (it.product + 1);
              this.count = this.count + it["发案数"];
              if (t % val == val - 1) {
                objs["发案数"] = this.count;
                this.count = 0;
                arr.push(objs);
                break;
              }
            }
          }
        }
      }
      return arr;
    },
    //获取组织机构数据
    _getSsbmData() {
      jqfxCorrelation("/xtzd/zzjg").then((res) => {
        this.ssbmList = res;
        this._getPcsfaFx();
      });
    },
    // 下拉切换 总警情、违法犯罪警情、街面警情
    // groupChange(val) {
    // 	switch (val.value[0]) {
    // 		case '总警情':
    // 			this.jqTitle = '总警情'
    // 			break;
    // 		case '违法犯罪警情':
    // 			this.jqTitle = '违法犯罪警情'
    // 			break;
    // 		case '街面警情':
    // 			this.jqTitle = '街面警情'
    // 			break;
    // 	}
    // 	this.isShowJqType = false
    // },
    // 选择时间段
    chooseTime(type) {
      this.submitType = type; //选择那个模块时间
      switch (type) {
        case "sjtj":
          this.isShowDataCount1 = true;
          break;
        case "qsfx":
          this.isShowDataCount2 = true;
          break;
        case "pcsfafx":
          this.isShowDataCount3 = true;
          break;
        case "ryyj":
          this.isShowDataCount4 = true;
          break;
        case "gfqy":
          this.isShowDataCount5 = true;
          break;
        case "qkryhd":
          this.isShowDataCount6 = true;
          break;
        default:
          this.isShowDataCount7 = true;
      }
    },
    // 专题分析-数据统计 - 时间选择
    change_data_count(val) {
      this.selectTime(val);
      this.isShowDataCount1 = false;
      this.isShowDataCount2 = false;
      this.isShowDataCount3 = false;
      this.isShowDataCount4 = false;
      this.isShowDataCount5 = false;
      this.isShowDataCount6 = false;
      this.isShowDataCount7 = false;
    },
    //选择时间
    selectTime(time) {
      switch (this.submitType) {
        case "sjtj":
          this.dataCountDay = time;
          this.get_data_count();
          break;
        case "qsfx":
          this.qsfxDay = time;
          this.get_faqsfx_data();
          break;
        case "pcsfafx":
          this.pcsDay = time;
          this._getPcsfaFx();
          break;
        case "ryyj":
          this.ryyjDay = time;
          this.get_fasd_scyj_data();
          break;
        case "gfqy":
          this.gfqyDay = time;
          this._getgfquData();
          break;
        case "tpcyj":
          this.tpcyjDay = time;
          this._getYjclTOP5();
          break;
        case "qkryhd":
          this.ryhdDay = time;
          this._getRyyjTOP5();
          break;
      }
    },
    //获取派出所发案分析
    _getPcsfaFx() {
      // 01刑事  02行政
      let pcsfaFxList = [];
      let params = {
        ssxgajdm: "1", //分县局代码
      };
      let url = "/ztfx/pcsfafx/rtj";
      switch (this.pcsDay) {
        case "今日":
          params.ksrq = this.daterValidate[0];
          params.jsrq = this.daterValidate[1];
          break;
        case "近7日":
          params.ksrq = getRecentDay(-7);
          params.jsrq = this.daterValidate[1];
          break;
        case "近7周":
          params.ksrq = getRecentDay(-49);
          params.jsrq = this.daterValidate[1];
          url = "/ztfx/pcsfafx/ztj";
          break;
        case "近7月":
          params.ksny = getnRencebtMonth(6);
          params.jsny = getnRencebtMonth(0);
          url = "/ztfx/pcsfafx/ytj";
          break;
      }
      jqfxCorrelation(url, params).then((res) => {
        let list = setArray(res);
        list.forEach((item) => {
          this.ssbmList.forEach((_item) => {
            if (item.ssbmdm == _item.id + "") {
              let obj = {
                product: "",
                刑事: 0,
                行政: 0,
                总数: 0,
              };
              if (item.bjlb == "01000000") {
                obj["刑事"] = item.sl;
              } else {
                obj["行政"] = item.sl;
              }
              obj["总数"] = obj["刑事"] + obj["行政"];
              obj.product = this._getSsbmName(item.ssbmdm).substring(0, 2);
              pcsfaFxList.push(obj);
            }
          });
        });
        let arrayList = hbArray(pcsfaFxList, "刑事", "行政", "总数");
        let arrObj = {
          titles: [],
          xsList: [],
          xzList: [],
          zsList: [],
        };
        arrayList.forEach((item) => {
          arrObj.titles.push(item.product);
          arrObj.xsList.push(item["刑事"]);
          arrObj.xzList.push(item["行政"]);
          arrObj.zsList.push(item["总数"]);
        });
        this.pcsfaList = arrObj;
      });
    },
    //获取组织部门详细信息
    _getSsbmName(code) {
      let info = this.ssbmList.find((item) => {
        return code == item.id;
      });
      if (info) {
        return info.org_short_name;
      }
      return;
    },
    // 专题分析-数据统计
    get_data_count() {
      let params = {
        ssxgajdm: "1", //分县局代码
      };
      let url = "/ztfx/sjtj/ztsjtj";
      if (this.dataCountDay == "今日") {
        params.ksrq = this.daterValidate[0];
        params.jsrq = this.daterValidate[1];
      }
      if (this.dataCountDay == "近7日") {
        params.ksrq = getRecentDay(-7);
        params.jsrq = this.daterValidate[0];
      }
      if (this.dataCountDay == "近7周") {
        params.ksrq = getRecentDay(-49);
        params.jsrq = this.daterValidate[0];
      }
      if (this.dataCountDay == "近7月") {
        params.ksny = getnRencebtMonth(6);
        params.jsny = getnRencebtMonth(0);
        url = "/ztfx/sjtj/yztsjtj";
      }

      jqfxCorrelation(url, params).then((res) => {
        let total = 0;
        res.forEach((item) => {
          total = total + item.sl;
          if (item.bjlb == "01000000") {
            this.formData.xs = item.sl;
          }
          if (item.bjlb == "02000000") {
            this.formData.xz = item.sl;
          }
        });
        this.formData.total = total;
      });
    },
    // 专题分析-发案趋势分析
    get_faqsfx_data() {
      let params = {
        ssxgajdm: "1", //分县局代码
      };
      if (this.qsfxDay == "今日") {
        params.ksrq = this.daterValidate[0];
        params.jsrq = this.daterValidate[1];
        this._getZtfxData("/ztfx/afqsfx/rtj", params);
      }
      if (this.qsfxDay == "近7日") {
        params.ksrq = getRecentDay(-7);
        params.jsrq = this.daterValidate[0];
        this._getZtfxData("/ztfx/afqsfx/rtj", params);
      }
      if (this.qsfxDay == "近7周") {
        params.ksrq = getRecentDay(-49);
        params.jsrq = this.daterValidate[0];
        this._getZtfxData("/ztfx/afqsfx/ztj", params);
      }
      if (this.qsfxDay == "近7月") {
        params.ksny = getnRencebtMonth(6);
        params.jsny = getnRencebtMonth(0);
        this._getZtfxData("/ztfx/afqsfx/ytj", params);
      }
    },
    //获取专题分析数据
    _getZtfxData(url, params) {
      jqfxCorrelation(url, params).then((res) => {
        let xs = [];
        let xz = [];
        let total = [];
        let line = [];
        if (res.length > 0) {
          res.forEach((v) => {
            if (v.bjlb == "01000000") {
              xs.push(v.sl);
              let week;
              if (this.qsfxDay == "近7周") {
                week = v.jqfskszs + "周";
              } else if (this.qsfxDay == "近7月") {
                week = v.jqfsksny;
              } else {
                week = timeValidate(v.jqfsksrq, "md");
              }
              line.push(week);
            }
            if (v.bjlb == "02000000") {
              xz.push(v.sl);
            }
          });
          xz.forEach((it, index) => {
            xs.forEach((v, i) => {
              if (index == i) {
                total.push(it + v);
              }
            });
          });
        } else {
          xs.push(0);
          xz.push(0);
          total.push(0);
          line.push(timeValidate(new Date(), "md"));
        }
        this.zdata = total;
        this.xsdata = xs;
        this.xzdata = xz;
        this.xline = line;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../assets/styles/mixin.scss";

.trailList {
  padding-bottom: 1vw;
}

.jrfxBox {
  margin: 2vw 2vw 0 2vw;
  display: flex;
  justify-content: space-around;
  padding: 2vw 0;
}

.jrfxBox .jrfxLi .numb {
  width: 21.06667vw;
  height: 21.06667vw;
  background-size: 100% 100%;
  text-align: center;
  line-height: 21.06667vw;
  color: #fff;
}

.jrfxBox .jrfxLi .titles {
  text-align: center;
  font-size: 4vw;
  padding-top: 2vw;
}

.sum_total {
  background: url("../../../assets/images/new/new_yiqing.png") no-repeat;
}

.xs_total {
  background: url("../../../assets/images/new/new_dongqing.png") no-repeat;
}

.xz_total {
  background: url("../../../assets/images/new/new_dieqing.png") no-repeat;
}

.compare {}

.title-box {
  display: flex;
  justify-content: center;
}

.title {
  width: 92vw;
  height: 4vw;
  background: url("../../../assets/images/bigTitle@2x.png");
  background-size: 100% 100%;
  margin-top: 10px;
  text-align: center;
  line-height: 4vw;
  @include font_color($font-color-theme);
  @include font_size($font_medium_s);
}

::v-deep .nav-box[data-v-19978886] {
  border-bottom: 1px solid #203967;
}

.zst-box {
  @include font_size($font_medium_s);
  @include font_color($font-color-theme);
}

.zst-title-box {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  @include font_color($font-color-theme);
  @include font_size($font_medium);
}

.zst-title-left {
  background: url("../../../assets/images/lanmu-title.png") no-repeat;
  background-size: 100% 100%;
  flex: 2;
  height: 28px;
  line-height: 28px;
  padding-left: 10px;
}

.zst-title-right {
  flex: 1;
  text-align: right;
  height: 28px;
  line-height: 28px;
  padding-right: 10px;
  color: #47b8ff;
}

.zst-title-right1 {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  height: 28px;
  line-height: 28px;
  padding-right: 10px;
  /* color: #47B8FF; */
}

.sendZL {
  width: 70px;
  height: 26px;
  border-radius: 5px;
  background-image: linear-gradient(#00c0fa, #015eea);
  text-align: center;
}

.img {
  margin-left: 3px;
}

.fjChart {
  padding: 3.5vw 3.5vw 0 3.5vw;
}

.assess-box {
  padding: 10px;
  line-height: 18px;
  font-size: 12px;
  color: #e3e3e3;
}

.fjAndCqfj-box {
  width: 100%;
  /* height: 40vh; */
  margin-top: 10px;
  display: flex;
  flex-direction: row;
}

.first-line {
  width: 11vw;
  border: 1px solid #178bed;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(51, 157, 255, 0.2);
}

.first-line :last-child {
  border-bottom: unset;
}

.first-line-item {
  flex: 1;
  border: 1px solid #18325e;
  text-align: center;
  display: flex;
  align-items: center;
  width: 100%;
  padding-left: 1.5vw;
}

.right-box {
  display: flex;
  border-top: 1px solid #178bed;
  border-bottom: 1px solid #178bed;
  width: 89vw;
  overflow: auto;
}

.right-box-line-item {
  width: 33vw;
  border-right: 1px solid #178bed;
  display: flex;
  position: relative;
}

.right-line-box {
  width: 11vw;
  height: 40vh;
  /* border: 0.5px solid #18325E; */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.first-line-item-right {
  flex: 1;
  border-bottom: 0.5px solid #18325e;
  border-right: 1px solid #18325e;
  text-align: center;
  display: flex;
  align-items: center;
  width: 100%;
  padding-left: 1.5vw;
}

.right-line-box :first-child {
  border-right: unset;
}

.right-title-box {
  position: absolute;
  top: 0;
  text-align: center;
  width: 100%;
  line-height: 4vh;
}

/* echarts */
#gfChart {
  width: 100%;
  height: 40vh;
}

.tag_box {
  display: flex;
  padding: 3vw;
}

.but_box {
  text-align: center;
  margin-top: 3vw;
  color: #fff;
}

.but_box>span {
  display: inline-block;
  padding: 1.5vw 3vw;
  margin: 0 1.5vw;
  border-radius: 5px;
  background-image: linear-gradient(to top, #015eea, #00c0fa);
}
</style>
