|
|
@ -4,10 +4,10 @@ |
|
|
|
<div class="border3"> |
|
|
|
<section class="chart-section"> |
|
|
|
<div> |
|
|
|
<div class="trapezoid"> |
|
|
|
<!-- <div class="trapezoid"> |
|
|
|
<span>{{ companyName }}</span> |
|
|
|
<span>{{ stockCode }}</span> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
<div ref="KlineCanvs" class="KlineClass"></div> |
|
|
|
</div> |
|
|
|
</section> |
|
|
@ -28,31 +28,18 @@ |
|
|
|
</div> |
|
|
|
<div class="calendar"> |
|
|
|
<div v-for="row in 5" :key="row" class="calendarCol"> |
|
|
|
<div |
|
|
|
v-for="item in currentData.slice((row - 1) * 7, row * 7)" |
|
|
|
:key="item" |
|
|
|
class="calendarRow" |
|
|
|
> |
|
|
|
<div |
|
|
|
class="calendarItem" |
|
|
|
:style="{ backgroundColor: item.color }" |
|
|
|
> |
|
|
|
<div v-for="item in currentData.slice((row - 1) * 7, row * 7)" :key="item" class="calendarRow"> |
|
|
|
<div class="calendarItem" :style="{ backgroundColor: item.color }"> |
|
|
|
<div v-if="item.month" class="month"> |
|
|
|
<div class="monthContent"> |
|
|
|
{{ months[item.month - 1] }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="calendarItemTitle">{{ item.day }}</div> |
|
|
|
<div |
|
|
|
class="calendarItemContent" |
|
|
|
v-if="item.stock_temperature == ''" |
|
|
|
> |
|
|
|
<div class="calendarItemContent" v-if="item.stock_temperature == ''"> |
|
|
|
<img :src="suoding" alt="锁定" class="ciImg" /> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
class="calendarItemContent" |
|
|
|
v-else-if="item.stock_temperature == '休市'" |
|
|
|
> |
|
|
|
<div class="calendarItemContent" v-else-if="item.stock_temperature == '休市'"> |
|
|
|
休市 |
|
|
|
</div> |
|
|
|
<div class="calendarItemContent" v-else> |
|
|
@ -182,7 +169,7 @@ const indexCodes = [ |
|
|
|
"I63", |
|
|
|
"VNINDE", |
|
|
|
]; |
|
|
|
const isIndexCode = computed(() => indexCodes.includes(props.code)); |
|
|
|
const isIndexCode = computed(() => indexCodes.includes(props.stockCode)); |
|
|
|
|
|
|
|
const currentData = ref([]); |
|
|
|
const fetchCalendarData = () => { |
|
|
@ -341,6 +328,7 @@ function initChart(raw, klineDataRawValue, WDRLValue) { |
|
|
|
); |
|
|
|
return; |
|
|
|
} |
|
|
|
console.log(props) |
|
|
|
|
|
|
|
// 如果已存在图表实例,先销毁 |
|
|
|
if (chartInstance) { |
|
|
@ -969,7 +957,8 @@ defineExpose({ initChart }); |
|
|
|
left: -2.5px; |
|
|
|
width: 20px; |
|
|
|
height: 20px; |
|
|
|
border-top: 3px solid #00ffff; /* 左上角颜色 */ |
|
|
|
border-top: 3px solid #00ffff; |
|
|
|
/* 左上角颜色 */ |
|
|
|
border-left: 3px solid #00ffff; |
|
|
|
border-top-left-radius: 8px; |
|
|
|
} |
|
|
@ -981,7 +970,8 @@ defineExpose({ initChart }); |
|
|
|
right: -2px; |
|
|
|
width: 20px; |
|
|
|
height: 20px; |
|
|
|
border-bottom: 3px solid #00ffff; /* 右下角颜色 */ |
|
|
|
border-bottom: 3px solid #00ffff; |
|
|
|
/* 右下角颜色 */ |
|
|
|
border-right: 3px solid #00ffff; |
|
|
|
border-bottom-right-radius: 8px; |
|
|
|
} |
|
|
@ -993,6 +983,7 @@ defineExpose({ initChart }); |
|
|
|
font-style: normal; |
|
|
|
font-display: swap; |
|
|
|
} |
|
|
|
|
|
|
|
.title { |
|
|
|
width: 100%; |
|
|
|
margin-bottom: 0px; |
|
|
@ -1056,6 +1047,7 @@ defineExpose({ initChart }); |
|
|
|
width: 13.5%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.calendarItem { |
|
|
|
border: 1px solid #0060af; |
|
|
|
width: 100%; |
|
|
|