<template>
  <div class="right">
    <div>
      

      <img src="@/assets/imgs/dituc.png" alt style="width: 100%;height: 90%;margin-left: 40px;" />
    </div>
    <!-- <LeftTwo ref="leftTwoRef" />
    <LeftThree ref="leftThreeRef" />-->
  </div>
</template>

<script setup>
import { ref, defineExpose, reactive, onMounted } from "vue";

import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
// import Tit from "./Tit/index.vue";
// import * as CockpitApi from '@/api/cockpit'
// import Tit
const emit = defineEmits(["updateData"]);
const loading = ref(false);
const loaded = ref(false);
const percentage = ref();
const input1 = ref("");
const year = ref("");
const radio1 = ref("year");
const state = reactive({
  // seriesData: {}
});
onMounted(() => {
  year.value = String(new Date().getFullYear());
  // value.value = String(new Date().getFullYear())
  // search()
});

// const percentage = computed(() => {
//   return (state.seriesData.lastYearEmissions / state.seriesData.lastYearTarget) * 100 >= 100
//     ? 100
//     : (state.seriesData.lastYearEmissions / state.seriesData.lastYearTarget) * 100 || 0
// })

const search = data => {
  // getData(data)
  if (data == "海岳大街") {
    emit("updateData", data);
  } else {
    ElMessage({
      message: "抱歉，暂时无道路信息",
      type: "warning",
      plain: true
    });
  }
};

// search()

defineExpose({
  search
});
</script>

<style lang="scss" scoped>
.right {
  position: absolute;
  width: 440px;
  right: 80px;
  top: 127px;
}
.other1 {
  // position: absolute;
  // right: -40px;
  // top: 100px;
  margin-left: 40px;
  margin-bottom: 30px;
  height: 31x;
  line-height: 31px;
  width: 96px;
  box-sizing: border-box;
  padding: 0 12px 0 12px;
  background: linear-gradient(270deg, #139fd5 0%, #20d6ad 100%, #5cf3d1 100%);
  border-radius: 2px;
  // margin-right: 9px;
  font-size: 12px;
  color: #ffffff;
  text-align: center;
  // display: flex;
  // align-items: center;
  // justify-content: space-between;
  cursor: pointer;
  :deep(.v-icon) {
    margin-right: 5px;
  }
}
.leftOne-content {
  padding: 0 73px 0 43px;
  width: 340px;
  height: 800px;
  background-color: #05151a;
  color: aliceblue;
}

.label {
  font-family: SourceHanSansCN;
  font-weight: 500;
  font-size: 14px;
  color: #c6d8e4;
  margin-bottom: 18px;
  padding-top: 21px;
}

.value-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.value {
  font-family: Bebas;
  font-size: 32px;
  color: transparent;
  background: linear-gradient(180deg, #3ff1b6 0%, #08dae8 100%);
  background-clip: text;
  margin-bottom: 12px;
}

.value-pre {
  font-family: Bebas;
  font-size: 14px;
  color: #cedce6;
  margin-left: 16px;
}

.value-text {
  &-l {
    margin-right: 5px;
    font-size: 14px;
  }

  &-v {
    font-size: 20px;
    font-family: Bebas;
  }
}

.total {
  margin-top: 16px;
}

.total-label {
  font-family: SourceHanSansCN;
  font-weight: 500;
  font-size: 14px;
  color: #c6d8e4;
}

.total-value {
  font-family: Bebas;
  font-size: 16px;
  color: #cedce6;
  margin-left: 10px;
}

.total-value-pre {
  font-family: Bebas;
  font-size: 14px;
  color: #cedce6;
  margin-left: 7px;
}

// :deep(.el-progress-bar__inner) {
//   background: linear-gradient(90deg, #00fdc7 0%, #0dc2ff 100%);
// }
</style>
