<template>
  <section class="mainbox">
    <div
      class="Site-details"
      :style="
        activeName === 'first'
          ? 'min-height:700px;'
          : activeName === 'second'
          ? 'min-height:700px;'
          : activeName === 'third'
          ? 'height: 670px;'
          : activeName === 'fourth'
          ? 'min-height: 830px;'
          : 'height: 710px;'
      "
    >
      <el-tabs v-model="activeName" @tab-click="handleClick" id="device_tabs">
        <el-tab-pane label="实时数据" name="first">
          <el-tabs
            v-model="ac_content"
            @tab-click="handleClick1"
            class="ac-content"
          >
            <el-tab-pane
              label="模拟量"
              name="model"
              style="display: flex"
              class="model"
            >
              <div v-for="(all, index) in 4" :key="index">
                <div
                  v-for="arr in model_array.slice(
                    index == 0 ? 0 : index == 1 ? 20 : index == 2 ? 40 : 60,
                    index == 0
                      ? 20
                      : index == 1
                      ? 40
                      : index == 2
                      ? 60
                      : model_array.length
                  )"
                  :key="arr"
                  class="display"
                >
                  <el-tooltip
                    :disabled="arr.name.length > 10 ? false : true"
                    effect="dark"
                    :content="arr.name"
                    placement="top"
                  >
                    <div>{{ arr.name }}</div>
                  </el-tooltip>
                  <el-tooltip
                    :disabled="arr.value.length > 10 ? false : true"
                    effect="dark"
                    :content="arr.value"
                    placement="top"
                  >
                    <div>{{ arr.value }}</div>
                  </el-tooltip>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="状态量" name="states" class="states">
              <div v-for="(all, index) in 2" :key="index">
                <div
                  v-for="arr in state_array.slice(
                    index == 0 ? 0 : state_array.length / 2,
                    index == 0 ? state_array.length / 2 : state_array.length
                  )"
                  :key="arr"
                  class="display"
                >
                  <div style="display: flex">
                    <el-tooltip
                      :disabled="arr.name.length > 10 ? false : true"
                      effect="dark"
                      :content="arr.name"
                      placement="top"
                    >
                      <div :class="index == 0 ? 'name' : 'name1'">
                        {{ arr.name }}
                      </div>
                    </el-tooltip>

                    <div :class="'state_' + arr.value"></div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
          <el-button
            type="primary"
            class="primary"
            @click="If_tabs_api($store.state.siteId)"
            >刷新</el-button
          >
        </el-tab-pane>
        <el-tab-pane label="历史趋势" name="second" style="top: 1px">
          <el-tabs
            v-model="se_content"
            @tab-click="handleClick2"
            class="se-content"
          >
            <el-tab-pane
              v-for="tabs in $store.state.se_tabs"
              :key="tabs"
              :label="tabs.label"
              :name="tabs.name"
              :class="tabs.name"
            ></el-tab-pane>
            <el-button type="primary" class="preservation" @click="preservation"
              >保存为图片</el-button
            >
          </el-tabs>
          <div class="block">
            <span>选择时间范围 :</span>
            <el-date-picker
              @change="HistoricalCurve_api($store.state.siteId)"
              v-model="se_defaultTime"
              type="datetimerange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              range-separator="~"
              :disabledDate="disabledDate"
            >
            </el-date-picker>
          </div>
        </el-tab-pane>
        <el-tab-pane label="数据报表" name="third" style="top: 2px">
          <div class="block">
            <span>选择时间范围 :</span>
            <el-date-picker
              v-model="th_defaultTime"
              type="datetimerange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              range-separator="~"
              :disabledDate="disabledDate"
            >
            </el-date-picker>
            <div class="operation">
              <el-button
                type="primary"
                class="query"
                :disabled="checkedCities.length > 0 ? false : true"
                @click="Data_report_api($store.state.siteId)"
                >查询</el-button
              >
              <el-button
                type="primary"
                class="export"
                :disabled="
                  th_tableData.length > 0 && checkedCities.length > 0
                    ? false
                    : true
                "
                @click="DataReportExport()"
                >导出</el-button
              >
            </div>
          </div>
          <div class="box">
            <el-checkbox
              :indeterminate="isIndeterminate"
              v-model="checkAll"
              @change="handleCheckAllChange"
              >全选</el-checkbox
            >
            <el-checkbox-group
              v-model="checkedCities"
              @change="handleCheckedCitiesChange"
            >
              <el-checkbox v-for="city in cities" :label="city" :key="city">{{
                city
              }}</el-checkbox>
            </el-checkbox-group>
          </div>
          <div class="table">
            <el-table
              v-loading="table_loading"
              empty-text=" "
              element-loading-text="拼命加载中"
              class="elTable"
              :data="th_tableData"
              style="width: 100%"
              height="520"
              show
            >
              <el-table-column
                prop="dataTime"
                label="时间"
                :render-header="labelHead"
                fixed
              >
              </el-table-column>
              <template
                v-for="(table, index) in $store.state.table_list"
                :key="index"
              >
                <el-table-column
                  :label="table.name"
                  v-if="columnHeaders[index].isShow"
                >
                  <el-table-column
                    :render-header="labelHead"
                    v-for="list in table.list"
                    :key="list"
                    :label="list.name"
                    :prop="list.value"
                  ></el-table-column>
                </el-table-column>
              </template>

              <template #empty v-if="table_loading == false">
                <div class="zwsj">
                  <img src="./../../assets/images/No_data.png" alt="" />
                  <p>暂无数据</p>
                </div>
              </template>
            </el-table>
          </div>
        </el-tab-pane>
        <devicesecond
          v-if="activeName === 'second'"
          ref="main"
          :defaul_tTime="defaultTime"
        ></devicesecond>
        <el-tab-pane label="运行状态统计" name="fourth" style="top: 3px">
          <div class="ft_content">
            <div style="display: flex">
              <div class="ctn_one">
                <div class="one_text">{{ loadLive }}</div>
                <div>当前回路带电/停电</div>
              </div>
              <div class="ctn_one">
                <div>{{ day_count }}</div>
                <div>本日 OFF 次数</div>
              </div>
              <div class="ctn_one">
                <div>{{ month_count }}</div>
                <div>本月 OFF 次数</div>
              </div>
              <div class="ctn_one">
                <div>{{ minute }} 分钟</div>
                <div>本日 OFF 时长</div>
              </div>
              <div>
                <el-button type="primary" class="primary" @click="preservation"
                  >下载</el-button
                >
              </div>
            </div>
            <div class="ctn_time">
              <span>选择时间范围 :</span>
              <el-date-picker
                v-model="fh_defaultTime"
                type="datetimerange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                range-separator="~"
                :disabledDate="disabledDate"
                @change="If_tabs_api($store.state.siteId)"
              >
              </el-date-picker>
            </div>
            <div class="ctn_echarts">
              <devicedistion
                v-if="activeName === 'fourth'"
                ref="distion"
                :defaul_tTime="defaultTime"
              ></devicedistion>
              <deviceStateCurve
                v-if="activeName === 'fourth'"
                ref="statecurve"
                :defaul_tTime="defaultTime"
              ></deviceStateCurve>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </section>
</template>
<script>
import api from "../../api/site/Device_motore";
import devicesecond from "../site_ehcarts/Device_second";
import devicedistion from "../site_ehcarts/Device_distion";
import deviceStateCurve from "../site_ehcarts/Device_StateCurve";
import { ElMessage } from "element-plus";
const cityOptions = [
  "电流",
  "功率",
  "电度",
  "电压",
  "温度",
  "频率",
  "功率因数",
  "谐波电流有效值",
  "通讯参数",
  "电压突变",
];
export default {
  name: "site_details",
  components: {
    devicesecond,
    devicedistion,
    deviceStateCurve,
  },
  computed: {
    increment() {
      return this.$store.state.siteId;
    },
  },
  data() {
    return {
      activeName: "first", //最外层tabs切换name
      ac_content: "model", //实时数据tabs切换name
      se_content: "I", //历史趋势tabs切换name
      se_label: "电流", //历史趋势label/name信息存储 tabs切换时调用接口进行判断的值

      model_array: [], //实时数据->模拟量接口返回信息存储
      state_array: [], //实时数据->状态接口返回信息存储
      th_tableData: [], //数据报表->table表格数据存储

      se_defaultTime: this.$store.state.se_defaultTime, //历史趋势时间选择器v-model
      th_defaultTime: this.$store.state.th_defaultTime, //数据报表时间选择器v-model
      fh_defaultTime: this.$store.state.fh_defaultTime, //运行状态统计时间选择器v-model

      disabledDate(date) {
        return date.getTime() > new Date(); //公共时间选择器 控制当前时间之后的时间无法选择
      },

      loadLive: "ON", //运行状态统计->当前回路带电/停电
      month_count: 0, //运行状态统计->本月off次数
      day_count: 0, //运行状态统计->本日off次数
      minute: 0, //运行状态统计->本日off时长

      value: "",
      checkAll: false, //数据报表->全选按钮是否选中
      checkedCities: [], //数据报表->多选按钮信息存储
      cities: cityOptions, //数据报表->多选按钮信息存储
      isIndeterminate: false, //数据报表->全选按钮是否选中
      table_loading: false, //数据报表->Loading 加载

      columnHeaders: [
        { index: 0, title: "电流", isShow: false },
        { index: 1, title: "功率", isShow: false },
        { index: 2, title: "电度", isShow: false },
        { index: 3, title: "电压", isShow: false },
        { index: 4, title: "温度", isShow: false },
        { index: 5, title: "频率", isShow: false },
        { index: 6, title: "功率因数", isShow: false },
        { index: 7, title: "谐波电流有效值", isShow: false },
        { index: 8, title: "通讯参数", isShow: false },
        { index: 9, title: "电压突变", isShow: false },
      ], //数据报表->控制table表格是否显示隐藏
    };
  },
  mounted() {},
  methods: {
    //最外层tabs切换事件触发
    handleClick(tab, event) {
      this.th_tableData = [];
      this.ac_content = "model"; //将实时数据->恢复默认内部tabs选中
      this.se_content = "I"; //将历史趋势->恢复默认内部tabs选中
      for (let i in event.path) {
        if (event.path[i].className === "el-tabs__nav is-top") {
          var childNodes = event.path[i].childNodes;
          for (let i in childNodes) {
            if (childNodes[i].className === "el-tabs__active-bar is-top") {
              childNodes[i].style.left = tab.index + "px";
            }
          }
        }
      }
      this.If_tabs_api(this.$store.state.siteId);
    },
    //实时数据 内部tabs 点击事件触发
    handleClick1(tab, event) {
      // console.log(tab, event);
      tab || event;
      this.If_tabs_api(this.$store.state.siteId);
    },
    //历史趋势 内部tabs 点击事件触发
    handleClick2(tab, event) {
      tab || event;
      // console.log(tab, event);
      this.se_label = tab.props.label;
      this.If_tabs_api(this.$store.state.siteId);
    },
    //数据报表全选按钮事件
    handleCheckAllChange(val) {
      this.th_tableData = [];
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    //数据报表多选按钮事件
    handleCheckedCitiesChange(value) {
      this.th_tableData = [];
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    /**
     * @数据报表api请求
     */
    Data_report_api(siteid) {
      var _this = this;
      _this.table_loading = true;
      _this.$store.commit("TimeAll_function", _this.th_defaultTime);
      var time = _this.$store.state.Time_Data;
      _this.$store.commit("checkedCities_all", _this.checkedCities);
      var queryType = _this.$store.state.queryType;

      api
        .DataReport({
          startTime: time[0],
          endTime: time[1],
          queryType: queryType,
          siteId: siteid,
        })
        .then((requset) => {
          if (requset.status === "SUCCESS") {
            _this.th_tableData = requset.data;
            _this.table_loading = false;
          } else {
            ElMessage.error(requset.msg);
          }
        });
    },
    /**
     * @数据报表导出
     */
    DataReportExport() {
      var _this = this;
      _this.$store.commit("TimeAll_function", _this.th_defaultTime);
      var time = _this.$store.state.Time_Data;
      _this.$store.commit("checkedCities_all", _this.checkedCities);
      var queryType = _this.$store.state.queryType;

      api
        .DataReportExport({
          siteId: this.$store.state.siteId,
          startTime: time[0],
          endTime: time[1],
          queryType: queryType,
        })
        .then((requset) => {
          if (requset.status === "SUCCESS") {
            window.location.href =
              window.PLATFROM_CONFIG.fileUrl + requset.data;
          } else {
            ElMessage.error(requset.msg);
          }
        });
    },
    /**
     * @实时数据api请求
     */
    Real_time_api(siteid) {
      var _this = this;
      //模拟量api请求
      function rtAnalogData() {
        api.rtAnalogData({ siteId: siteid }).then((requset) => {
          if (requset.status === "SUCCESS") {
            _this.model_array = requset.data;
          } else {
            ElMessage.error(requset.msg);
          }
        });
      }
      //状态量api请求
      function rtSwitchData() {
        api.rtSwitchData({ siteId: siteid }).then((requset) => {
          if (requset.status === "SUCCESS") {
            for (let i in requset.data) {
              requset.data[i].value == 0
                ? (requset.data[i].value = "OFF")
                : (requset.data[i].value = "ON");
            }
            _this.state_array = requset.data;
          } else {
            ElMessage.error(requset.msg);
          }
        });
      }
      this.ac_content === "model"
        ? rtAnalogData()
        : this.ac_content === "states"
        ? rtSwitchData()
        : "";
    },
    /**
     * @运行状态统计api请求
     */
    Operation_status_api(siteid) {
      var _this = this;
      _this.$store.commit("TimeAll_function", _this.fh_defaultTime);
      var time = _this.$store.state.Time_Data;

      function LoopStatus() {
        api.LoopStatus({ siteId: siteid }).then((requset) => {
          if (requset.status === "SUCCESS") {
            _this.loadLive = requset.data[0].LoadLive == 1 ? "ON" : "OFF";
            _this.month_count = requset.data[0].month_count;
            _this.minute = requset.data[0].minute;
            _this.day_count = requset.data[0].day_count;
          } else {
            ElMessage.error(requset.msg);
          }
        });
      }
      async function runStatus() {
        await api
          .runStatus({ startTime: time[0], endTime: time[1], siteId: siteid })
          .then((requset) => {
            if (requset.status === "SUCCESS") {
              _this.$store.state.run_off_Status = requset.data;
              // console.log(requset);
            } else {
              ElMessage.error(requset.msg);
            }
          });
      }
      LoopStatus();
      runStatus();
    },
    /**
     * @历史趋势api请求
     */
    HistoricalCurve_api(siteid) {
      var _this = this;
      _this.$store.commit("TimeAll_function", _this.se_defaultTime);
      var time = _this.$store.state.Time_Data;

      api
        .HistoricalCurve({
          siteId: siteid,
          startTime: time[0],
          endTime: time[1],
          queryType: _this.se_content,
        })
        .then((requset) => {
          if (requset.status === "SUCCESS") {
            _this.$store.commit("HistoricalCurve", requset.data);
          } else {
            ElMessage.error(requset.msg);
          }
        });
    },
    /**
     * @判断最外层tabs切换时请求api
     */
    If_tabs_api(siteid) {
      this.activeName === "first"
        ? this.Real_time_api(siteid) //调用实时数据api请求
        : this.activeName === "second"
        ? this.HistoricalCurve_api(siteid) //调用历史趋势api请求
        : this.activeName === "fourth"
        ? this.Operation_status_api(siteid) //调用运行状态统计api请求
        : "";
    },
    /**
     * @调用公共ehcarts保存图片
     */
    preservation() {
      if (this.activeName === "second") {
        this.$store.commit("getConnectedDataURL", [
          this.$refs.main.chart,
          this.se_label,
        ]);
      } else if (this.activeName === "fourth") {
        this.$store.commit("getConnectedDataURL", [
          this.$refs.statecurve.chart,
          "运行状态曲线",
        ]);
        this.$store.commit("getConnectedDataURL", [
          this.$refs.distion.chart,
          "OFF次数分布",
        ]);
      }
    },
    /**
     * @控制table中title盒子宽度
     */
    labelHead(h) {
      let l = h.column.label.length;
      if (l <= 6) {
        l = l + 10;
      }
      let f = 16; //每个字大小，其实是每个字的比例值，大概会比字体大小差不多大一点，
      if (h.column.label === "时间") {
        h.column.minWidth = 100;
      } else {
        h.column.minWidth = f * l; //字大小乘个数即长度 ,注意不要加px像素，这里minWidth只是一个比例值，不是真正的长度 //然后将列标题放在一个div块中，注意块的宽度一定要100%，否则表格显示不完全
      }
      return (
        "div",
        { class: "table-head", style: { width: "100%" } },
        [h.column.label]
      );
    },
  },
  watch: {
    /**
     * @监听vuex存储值变化 用于调用api
     */
    increment: {
      immediate: true, // 首次加载的时候执行函数
      deep: true, // 深入观察,监听数组值，对象属性值的变化
      handler: function () {
        this.If_tabs_api(this.$store.state.siteId);
      },
    },
    /**
     * @title 监听列显示隐藏
     */
    checkedCities(newArrayVal) {
      newArrayVal.length <= 0 ? (this.th_tableData = []) : "";
      // 计算为被选中的列标题数组
      var nonSelecteds = this.columnHeaders
        .filter((item) => newArrayVal.indexOf(item.title) == -1)
        .map((item) => item.title);
      // 根据计算结果进行表格重绘
      this.columnHeaders.filter((item) => {
        let isNonSelected = nonSelecteds.indexOf(item.title) != -1;
        if (isNonSelected) {
          // 隐藏未选中的列
          item.isShow = false;
        } else {
          // 显示已选中的列
          item.isShow = true;
        }
      });
    },
  },
};
</script>

<style>
/* 
  运行状态统计css样式
*/
.ft_content {
  margin: 0 15px;
}
.ft_content div:nth-child(1) .ctn_one {
  width: 2.675rem;
  height: 81px;
  border-radius: 3px;
  box-shadow: 0 0 10px rgba(0, 244, 253, 0.7) inset;
  background-color: rgba(8, 31, 47, 1);
  text-align: center;
  margin-right: 0.5rem;
  padding: 10px;
}
.ft_content div:nth-child(1) .ctn_one div:nth-child(1) {
  height: 40px;
  line-height: 40px;
  font-size: 0.3rem;
  font-family: Impact Regular, Impact Regular-Regular;
  font-weight: 400;
  color: #00f4fd;
}
.ft_content div:nth-child(1) .ctn_one .one_text {
  color: red !important;
}
.ft_content .ctn_time {
  margin-top: 15px;
}
.ft_content .ctn_time > span {
  margin-right: 10px;
}
</style>

<style>
/* 
  数据报表css样式
*/
#pane-third .el-table__fixed {
  height: 100% !important;
}
#pane-third .el-table {
  color: #fff;
}
#pane-third .el-table thead {
  color: #fff;
}
#pane-third .cell {
  text-align: center;
}

.el-table__fixed-body-wrapper {
  /* height: 369px !important; */
}
#pane-third .el-table__header {
  /* width: 100.65% !important; */
}

#pane-third .el-table--fit {
  background-color: rgb(0, 66, 78, 0) !important;
}
#pane-third .el-table th,
.el-table tr {
  background-color: rgb(0, 66, 78, 0.5);
}
.el-table__fixed-body-wrapper::-webkit-scrollbar {
  width: 0;
  height: 0;
}
#pane-third .block span {
  padding: 0 10px;
}

#pane-third .operation {
  float: right;
  margin-right: 10px;
}
#pane-third button {
  height: 30px !important;
  min-height: 30px;
  line-height: 0;
  margin-top: 0px;
  padding: 0px 10px;
  margin-left: 17px;
}
#pane-third button span {
  font-size: 0.18rem;
  padding: 0 10px;
  font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
}
#pane-third .box {
  padding-left: 10px;
  display: flex;
  margin-top: 12px;
}
#pane-third .el-checkbox-group {
  margin-left: 30px;
}
#pane-third .el-checkbox .el-checkbox__label {
  color: #fff;
  font-size: 0.18rem;
}
#pane-third .el-checkbox .el-checkbox__input .el-checkbox__inner {
  background-color: transparent;
  border: 1px solid rgba(1, 111, 109, 1);
}
#pane-third .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: rgba(1, 111, 109, 1) !important;
}
#pane-third .el-checkbox__inner::after {
  border: 1px solid rgba(0, 244, 253, 1);
  border-left: 0;
  border-top: 0;
}
#pane-third .table {
  margin-top: 10px;
  padding: 0 10px;
}
#pane-third .el-table--border,
.el-table--group {
  border: 1px solid rgba(1, 111, 109, 0.5);
  background-color: transparent;
}
#pane-third .el-table--border td,
.el-table--border th,
.el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
  border-right: 1px solid rgba(1, 111, 109, 0.5);
  color: #fff;
}
#pane-third .el-table td,
.el-table th.is-leaf {
  border-bottom: 1px solid rgba(1, 111, 109, 0.5);
}
#pane-third .el-table th,
.el-table tr {
  border-bottom: 1px solid rgba(1, 111, 109, 0.5);
}
#pane-third .table .el-table thead.is-group th {
  background-color: rgb(0, 66, 78, 1) !important;
}
#pane-third .el-table__row {
  background-color: transparent;
}

/* #pane-third .el-table__body {
  width: 100% !important;
} */
#pane-third .el-table__body .hover-row > td {
  background-color: rgb(3, 61, 72, 1) !important;
}
#pane-third .el-table__body tr > td:nth-child(1) {
  background-color: rgb(0, 66, 78, 1) !important;
}

#pane-third .zwsj {
  margin: 65px 0;
}
#pane-third .el-table--border::after,
.el-table--group::after {
  width: 0;
}
#pane-third .el-table::before {
  height: 0px;
}
#pane-third .el-table__fixed-right::before,
.el-table__fixed::before {
  height: 0px;
}
/* #pane-third .is-scrolling-middle {
  height: 374px !important;
  z-index: 1;
}
#pane-third .is-scrolling-right {
  height: 374px !important;
  z-index: 1;
}
#pane-third .is-scrolling-left {
  height: 374px !important;
  z-index: 1;
} */

/* .elTable .cell {
  white-space: nowrap;
  display:inline;
} */

#pane-third .el-loading-mask {
  background-color: rgb(0, 244, 253, 0.05);
}
#pane-third .el-loading-spinner .path {
  stroke: rgb(86, 158, 160, 1);
}
#pane-third .el-loading-spinner .el-loading-text {
  color: rgb(86, 158, 160, 1);
}
</style>

<style>
/* 历史趋势css样式 */
.se-content {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  display: flex;
}
.se-content .el-tabs__header {
  /* width: calc(130px * 10); */
  width: 100%;
  margin: 0 auto;
}
.se-content .el-tabs__item.is-active {
  background: rgba(6, 68, 83, 1) !important;
}
.se-content .el-tabs__active-bar {
  width: 130px !important;
  top: 0;
  background: transparent;
}
.se-content .el-tabs__item {
  border-top: 1px rgba(0, 244, 253, 0.1) solid;
  border-bottom: 1px rgba(0, 244, 253, 0.1) solid;
}
.se-content .el-tabs__nav-scroll {
  border-bottom: 0px rgba(0, 244, 253, 0.1) solid;
}
.se-content .el-tabs__nav {
  /* width: 100%; */
  width: calc(130px * 9);
  float: none !important;
  margin: auto;
}
.se-content .preservation {
  min-height: 35px !important;
  line-height: 10px;
  height: 35px;
  margin: 2px 0.4rem 5px 0px;
}
.se-content #tab-I {
  border-left: 1px rgba(0, 244, 253, 0.1) solid;
}

#pane-second .block {
  margin-top: 3px;
}

#pane-second span {
  padding: 0 10px;
  font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
}
#pane-second .el-range-input {
  background-color: transparent;
  color: #fff;
}
</style>

<style>
.Site-details {
  width: 98%;
  /* opacity: 0.2; */
  background-color: rgba(0, 244, 253, 0.1);
  border: 1px solid rgba(0, 244, 253, 0.1);
  margin: 0 auto;
  margin-top: 5px;
}

.el-tabs__nav-wrap {
  margin-bottom: 0px;
}
.el-tabs__nav-scroll {
  border-bottom: 1px rgba(0, 244, 253, 0.1) solid;
  margin: 0 auto;
}
.el-tabs__item {
  width: 130px !important;
  height: 40px !important;
  color: #ffffff !important;
  text-align: center;
  padding: 0 !important;
  /* padding: 0 1px !important; */
  border-right: 1px rgba(0, 244, 253, 0.1) solid;
}
.el-tabs__item.is-active {
  color: rgba(0, 244, 253, 1) !important;
}
.el-tabs__active-bar {
  width: 130px !important;
  top: 0;
  background: #4bf4f9;
}
.el-tabs__nav-wrap::after {
  bottom: revert;
  height: 1px !important;
  background-color: rgba(0, 244, 253, 0.1) !important;
}
</style>

<style>
/* 
 实时数据css样式
*/
.ac-content {
  height: 100%;
}
.ac-content .el-tabs__header {
  width: 260px;
  margin: 0 auto;
}
.ac-content .el-tabs__item.is-active {
  background: rgba(6, 68, 83, 1) !important;
}
.ac-content .el-tabs__active-bar {
  width: 130px !important;
  top: 0;
  background: transparent;
}
.ac-content .el-tabs__item {
  border-left: 1px rgba(0, 244, 253, 0.1) solid;
  border-top: 1px rgba(0, 244, 253, 0.1) solid;
}
.primary {
  position: absolute;
  top: 0;
  right: 10px;
  min-height: 34px !important;
  line-height: 8px;
  z-index: 10;
}

/* 
  模拟量css样式
 */
.ac-content .model > div {
  width: 25%;
  margin-top: 10px;
}
.ac-content .model .display {
  display: flex;
}
.ac-content .model .display div:nth-child(1) {
  height: 36px;
  line-height: 36px;
  border-bottom: 1px solid rgba(0, 244, 253, 0.1);
  text-align: right;
  width: 50%;
  color: rgba(255, 255, 255, 1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ac-content .model .display div:nth-child(2) {
  height: 36px;
  line-height: 36px;
  border-bottom: 1px solid rgba(0, 244, 253, 0.1);
  width: 50%;
  text-align: left;
  padding-left: 0.7rem;
  color: rgba(1, 201, 208, 1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 
  状态量css样式
 */
.ac-content .states {
  display: flex;
  margin-top: 10px;
}
.ac-content .states > div {
  width: 50%;
}
.ac-content .states .display {
  color: rgba(1, 201, 208, 1);
  font-size: 15px;
  font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
  font-weight: 400;
}
.ac-content .states .display .name1,
.name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ac-content .states .display > div:nth-child(1) {
  border-bottom: 1px solid rgba(0, 244, 253, 0.1);
  width: 100%;
  height: 36px;
  line-height: 36px;
  text-align: right;
}
.ac-content .states .display > div:nth-child(2) {
  border-bottom: 1px solid rgba(0, 244, 253, 0.1);
  width: 100%;
  height: 36px;
  line-height: 36px;
  text-align: right;
}
.ac-content .states .display .name {
  width: 75%;
}
.ac-content .states .display .name1 {
  width: 3.5rem;
}

.ac-content .states .display .state_ON {
  width: 44px;
  height: 24px;
  background: url(./../../assets/images/state_ON.png) no-repeat;
  background-size: cover;
  margin-top: 0.1rem;
  margin-left: 0.2rem;
}
.ac-content .states .display .state_OFF {
  width: 44px;
  height: 24px;
  background: url(./../../assets/images/state_OFF.png) no-repeat;
  background-size: cover;
  margin-top: 6px;
  margin-left: 0.2rem;
}
</style>

<style>
/* 
  公共时间选择器css样式
*/
#device_tabs .el-input__inner {
  width: 414px !important;
  height: 30px !important;
  line-height: 30px !important;
  background-color: transparent;
  border: 1px solid rgba(3, 107, 119, 1);
}
#device_tabs .el-range-input {
  background-color: transparent;
  color: #fff;
}
#device_tabs .el-range-separator {
  line-height: 20px;
  color: #fff;
}
</style>
