fix:修改图表颜色

ZhangXianQiang

2024-03-05 26ab0d5c9dba0b1bb8605f49195a8ebfd0e822e9

 src/views/daoAnOffice/right/danger/index.vue

@@ -4,8 +4,8 @@
  <RightTitle title="安全隐患情况">
    <template #top>
      <div class="select-container flex">
        <div class="item whitespace-no-wrap cursor-pointer" :class="{'select-active': item.isActive}" v-for="item in selectItems" :key="item.itemIndex"
          @click="changeSelect(item)">
        <div class="item whitespace-no-wrap cursor-pointer" :class="{ 'select-active': item.isActive }"
          v-for="item in selectItems" :key="item.itemIndex" @click="changeSelect(item)">
          {{ item.name }}
        </div>
      </div>
@@ -27,18 +27,24 @@
import RightTitle from "@/components/right-title";
import DataView from './dataView.vue';
import InfoView from './infoView.vue';
import { ref } from 'vue';
import { ref, provide } from 'vue';


const tableState = ref(false);
const selectItems = ref([
  { itemIndex: 1, name: '安全隐患', isActive: true },
  { itemIndex: 2, name: '数据统计', isActive: false },
]);

// 依赖
provide('tableState',tableState);

const changeSelect = (selectItem) => {
  selectItems.value.map(item => item.isActive = false);
  selectItem.isActive = true;
  if (selectItem.itemIndex === 2) {
    tableState.value = true;
  } else {
    tableState.value = false;
  }
}

</script>
@@ -51,15 +57,16 @@
.item {
  margin: 0 8px;
  padding: 10px 14px;
  font-size: 12px;
  font-size: 14px;
  background: rgba(67, 102, 155, 0.4);
  border: 1px solid rgba(47, 91, 157, 0.8);
  flex-shrink: 0;
  color: #5B83BD;
  font-family: 'PingFang SC';
}

.select-active {
 color: #fff; 
  color: #fff;
}

.item:last-child {